SassError when processing CSS variable with url() as contents.

[3rd-Eden]

• NPM version (npm -v): 6.9.0
• Node version (node -v): v10.16.0
• Node Process (node -p process.versions): { http_parser: '2.8.0', node: '10.16.0', v8: '6.8.275.32-node.52', uv: '1.28.0', zlib: '1.2.11', brotli: '1.0.7', ares: '1.15.0', modules: '64', nghttp2: '1.34.0', napi: '4', openssl: '1.1.1b', icu: '64.2', unicode: '12.1', cldr: '35.1', tz: '2019a' }
• Node Platform (node -p process.platform): darwin
• Node architecture (node -p process.arch):x64
• node-sass version (node -p "require('node-sass').info"): node-sass 4.14.1 (Wrapper) [JavaScript] libsass 3.5.5 (Sass Compiler) [C/C++]
• npm node-sass versions (npm ls node-sass): 4.14.1

I'm trying to compile a sass file that exports various of CSS variables, but during the compilation it throws on the following definition:

:root{--uxp-icon-chevron-up-lt:url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M19.39 14.99l-1.41 1.41L12 10.43 6.02 16.4l-1.41-1.41L12 7.6l7.39 7.39z' clip-rule='evenodd'/></svg>");}

When processing that specific file statement with the node-sass (cli used as example here):

node-sass index.scss

You will be receiving the following error:

{
  "status": 1,
  "file": "/lol/yeah/not/sharing/full/path/here/index.scss",
  "line": 1,
  "column": 32,
  "message": "property \"url\" must be followed by a ':'",
  "formatted": "Error: property \"url\" must be followed by a ':'\n        on line 1 of index.scss\n>> :root{--uxp-icon-chevron-up-lt:url(\"data:image/svg+xml;utf-8,<svg xmlns='htt\n   -------------------------------^\n"
}

However when I process it with dart-sass (sass --version outputs: 1.26.7 compiled with dart2js 2.8.2), it works fine, and outputs the following as expected:

:root {
  --uxp-icon-chevron-up-lt:url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M19.39 14.99l-1.41 1.41L12 10.43 6.02 16.4l-1.41-1.41L12 7.6l7.39 7.39z' clip-rule='evenodd'/></svg>");
}

Leading me to believe that this is an issue inside node-sass that is preventing it from rending this.

[3rd-Eden]

For those who run into a similar issue as this. This a workaround for said problem, using interpolation of sass variables into a CSS variable completely bypasses the property validation it seems:

:root{
  $example: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M19.39 14.99l-1.41 1.41L12 10.43 6.02 16.4l-1.41-1.41L12 7.6l7.39 7.39z' clip-rule='evenodd'/></svg>");
  --uxp-icon-chevron-up-lt: #{$example};
}

Which results in:

:root {
  --uxp-icon-chevron-up-lt: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M19.39 14.99l-1.41 1.41L12 10.43 6.02 16.4l-1.41-1.41L12 7.6l7.39 7.39z' clip-rule='evenodd'/></svg>"); }

[UnleashSpirit]

Hi,

No news ? I have the same error on a 600Ko already minify scss file that I have to ingegrate. "property \"url\" must be followed by a ':'" The workaround may have been a solution since I dont have 52 occurences of 'url()' lol

$ node -v
v12.13.1
$ npm -v
6.12.1
$ npx node-sass -v
node-sass       5.0.0   (Wrapper)       [JavaScript]
libsass         3.5.5   (Sass Compiler) [C/C++]

[predam]

Any update?

[martirook]

I got this error when updated bootstrap. Works good on bootstrap 5.1.3

[jivansupe]

I have bootstrap 5.1.3, still facing the same issue. Any leads on this?

[Eoic]

I am experiencing the same issue with Bootstrap 5.2.3. Downgrading to 5.1.3 didn't work.