Compilation fails when using `url` with `var` in SCSS

[Feelzor]

I've tried using the following snippet:

h2::before {
    content: url(var(--my-content));
}

which fails with Can't resolve 'var(--my-content in...

I'm using

    "css-loader": "^6.7.1",
    "pug-plugin": "^4.2.0",
    "sass": "^1.54.6",
    "sass-loader": "^13.0.2",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0"

with the following webpack config:

const path = require('path');
const PugPlugin = require('pug-plugin');

module.exports = {
  entry: {
    index: './src/views/login.pug',
    albums: './src/views/albums.pug',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: 'auto',
    filename: 'assets/js/[name].js',
  },
  module: {
    rules: [
      {
        test: /\.pug$/,
        loader: PugPlugin.loader,
        options: {
          method: 'render',
        }
      },
      {
        test: /\.s[ac]ss$/,
        use: [
          'css-loader',
          'sass-loader',
        ],
      },
      {
        test: /\.(png|jpg|jpeg|svg|ico)$/,
        type: 'asset/resource',
        generator: {
          filename: 'assets/images/[name][ext]',
        },
      },
    ],
  },
  plugins: [
    // enable processing of Pug files defined in webpack entry
    new PugPlugin({
      extractCss: {
        // output filename of CSS files
        filename: 'assets/css/[name].css',
      },
    }),
  ],
  resolve: {
    alias: {
      Assets: path.join(__dirname, 'src/assets/'),
    },
  },
}

I think pug-plugin should just ignore any url containing var since it cannot be resolved at compile-time.

[Feelzor]

My bad you just can't do that in css... I think I'm too tired to code tonight
I've just set the url() part in my variable and it works

[webdiscus]

Hello Thomas,

thank you for the bug report.
This use case is very important too.
Of cause, CSS variables should contains any URL only, w/o url(...) part.
In next release the resolving of var in url will be ignored.

Thx,
Dimitri

[Feelzor]

I am unsure a fix is necessary. As stated before, I searched the issue a little bit further just after opening the issue and found that url(var(--my-var)) is invalid in CSS (source).

Unless I missed something and the spec has changed, it seems that there is no need for a fix

EDIT: typo

[webdiscus]

Thanks for the link to stackoverflow.

I give here an example of correct usage:

:root {
  --logo-image: url(/static/images/logo.jpg);
}

.logo {
  background-image: var(--logo-image);
}