CSS custom properties in HSL color definitions wont compile

[necccc]

Using CSS custom properties with HSL color definitions in scss files cause an error when trying to compile it using node-sass.

Example code:

.foo {
    --hue: 70;

    background-image: linear-gradient(
        hsl(var(--hue), 100%, 50%),
        hsl(0, 100%, 50%)
    );
}

This is valid CSS by the way, it should compile anyway.

The error

Error: argument `$hue` of `hsl($hue, $saturation, $lightness)` must be a number

Backtrace:

node-sass-hsl-var.scss:7, in function `hsl`
node-sass-hsl-var.scss:7
on line 7 of node-sass-hsl-var.scss
>>         hsl(var(--hue), 100%, 50%),
--------
}

• Validate that it runs with both Ruby Sass and LibSass

Note: this won't validate because the validator seems broken too.

As this seemed a compilation error, went to libsass, but their sourcemap inspector compiles the example correctly

When reporting an bug, you must provide this information:

• NPM version (npm -v):
  5.3.0
• Node version (node -v):
  8.6.0
• Node Process (node -p process.versions):
  { http_parser: '2.7.0',
  node: '8.6.0',
  v8: '6.0.287.53',
  uv: '1.14.1',
  zlib: '1.2.11',
  ares: '1.10.1-DEV',
  modules: '57',
  nghttp2: '1.25.0',
  openssl: '1.0.2l',
  icu: '59.1',
  unicode: '9.0',
  cldr: '31.0.1',
  tz: '2017b' }
• 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.7.2 (Wrapper) [JavaScript]
  libsass 3.5.0.beta.2 (Sass Compiler) [C/C++]
• npm node-sass versions (npm ls node-sass):
  node-sass@4.7.2

[nschonni]

Can you file an issue with https://github.com/sass/libsass/issues and link it back here, thanks!

[necccc]

Sure, here it is:

sass/libsass#2552

[binarymee]

I am also getting the error Error: argument '$color' of 'rgba($color, $alpha)' must be a color when tried to compile with background-color: rgba(var(--ss-primary-color), 0.1);

[necccc]

Folks, got an update from libsass, according to that, the issue is fixed, and it will be available in the latest beta (3.5.0.beta.4) or in the final 3.5 release

[erichaus]

@necccc how does that correspond to this package which is what's in my package.json? what needs to happen to enable this in my js project?

[necccc]

Nothing - we wait until the new libsass is released and node-sass releases a new version which uses that libsass version.

[xzyfer]

Fixed in 4.8.0