Sprite is created but extracted asset urls are transformed to system path instead of relative with hash id

[reageek]

Detailed description

When compiling with option of extract true; the expectation is that the compiled css asset urls for sprite assets resolve as the sprite file with sprite fragments identifiers for such file. Instead the a system path to the file is what is injected.

The expectations relates to https://github.com/JetBrains/svg-sprite-loader/tree/master/examples/extract-mode

From the above link documentation

Input (main.css)

.logo {background: url('./logo.svg')}

Output (dist/main.css)

.logo {background: url('sprite.svg#logo-usage')}

Instead the result of compiling is the following:

Input (assets/app.scss)

.test {
    background-image: url('./badge-steam.svg');
}

Output (dist/styles/app.css)

.test {
  background-image: url(//home/user/localsites/site/app/public/wp-content/themes/test/assets/badge-steam.svg);
}

Expected Output (dist/styles/app.css)

.test {
  background-image: url(./sprite.svg#badge-steam);
}

Note when svgSprite is commented out, paths resolve as relative paths instead of system paths.

Configuration

const mix = require("laravel-mix");
require("laravel-mix-svg-sprite");

/**
 * @see https://laravel-mix.com/docs/6.0/api
 * @see https://laravel-mix.com/extensions/svg-sprite
 * @see https://github.com/JetBrains/svg-sprite-loader/tree/master/examples/extract-mode
 */
mix
  .options({
    watchOptions: {
      ignored: /node_modules/,
    },
    processCssUrls: true,
    useRelativePaths: true,
    publicPath: "dist",
  })
  .sass("assets/styles/app.scss", "styles")
  .svgSprite("assets/svgs", "svg/sprite.svg", {
    extract: true,
  });

Screenshot

source

test.zip

Env Info

node v16.9.0
npm 7.22.0
OS Arch Linux x86_64
Kernel 5.13.13-arch-1-1

[JaZo]

@reageek sorry it took a while to get back to you! This is an issue in svg-sprite-loader: JetBrains/svg-sprite-loader#465