rgb and rgba functions misinterpret CSS variables as a single value instead of their output

[jannisborgers]

Example:

:root { --color--text: 18, 18, 26; }
body { color: rgba(var(--color--text), 0.8); }

Expected outcome:

body {
color: rgba(18, 18, 26, 0.8);
}

Actual outcome:

When using rgba():

{
  "status": 1,
  "file": "/path/to/partial.scss",
  "line": 30,
  "column": 23,
  "message": "argument `$color` of `rgba($color, $alpha)` must be a color\n\nBacktrace:\n\tsrc/scss/elements/_projectTeaser.scss:30, in function `rgba`\n\tsrc/scss/elements/_projectTeaser.scss:30",
  "formatted": "Error: argument `$color` of `rgba($color, $alpha)` must be a color\n\n       Backtrace:\n       \tsrc/scss/elements/_projectTeaser.scss:30, in function `rgba`\n       \tsrc/scss/elements/_projectTeaser.scss:30\n        on line 30 of src/scss/elements/_projectTeaser.scss\n>>     background-color: rgba(var(--color--fadePrimary), 0.8);\n   ----------------------^\n"
}

When using rgb(), without the alpha-value:

{
  "status": 1,
  "file": "/path/to/partial.scss",
  "line": 30,
  "column": 23,
  "message": "Function rgb is missing argument $green.",
  "formatted": "Error: Function rgb is missing argument $green.\n        on line 30 of src/scss/elements/_projectTeaser.scss\n>>     background-color: rgb(var(--color--fadePrimary));\n   ----------------------^\n"
}

Notes:
This works if I wrap the CSS variable values in their own rgb() function and just output those as property values, but in order to add different alpha-values on the fly, storing only the R, G, and B values in variables is a lot more flexible.

As I posted this on Twitter and instantly got a backlash: please note that of course I could use $sass-variables instead, but CSS variables are a lot better to work with for obvious reasons (mutability, element scoping).

Versions:

- NPM version (`npm -v`): 5.6.0
- Node version (`node -v`): 6.10.2
- Node Process (`node -p process.versions`): 
{ http_parser: '2.7.0',
  node: '6.10.2',
  v8: '5.1.281.98',
  uv: '1.9.1',
  zlib: '1.2.11',
  ares: '1.10.1-DEV',
  icu: '58.2',
  modules: '48',
  openssl: '1.0.2k' }
- 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]

var support doesn't come until sass/libsass#2244 is landed in this repo

[jannisborgers]

@nschonni I see, thank you.

Temporary workaround:
Ana Tudor noticed on Twitter that you can use RGB((--var)) or RGBA((--var),0.8) (note the uppercase function name), as sass will ignore it and CSS will parse it just fine.
(see https://twitter.com/anatudor/status/963758591529365504)

Jakob E also noted that wrapping the whole function in #{' '} interpolation will work, although this approach failed in my case.
(see https://twitter.com/anatudor/status/963758591529365504)

[fvsch]

Unless I’m mistaken the expected outcome is not possible and will not be possible with what @nschonni mentions.

CSS Custom Properties are dynamic, they inherit through the DOM tree and can be set in JS at run-time, can be set on different DOM nodes by selectors, etc. Some Postcss plugins use the CSS Custom Properties syntax with :root { --some-var: … } and treat them as global variables similar to Sass variables, which is a pretty bad idea IMO.

This code should always throw:

body { color: rgba(var(--color--text), 0.8); }

And this one (a pure CSS feature) should probably be passed as-is by Sass:

body { color: color(var(--color--text) alpha(0.8)); }

But note it’s syntax from a very incomplete draft of CSS Color Module Level 4, so syntax may change and browser support is far off. (It also introduces a bunch of syntax that Sass will probably choke on, like + modifiers before numeric values that have a meaning in CSS and should be left alone by Sass.)

[xzyfer]

@fvsch is mostly correct.

The expected output is impossible because rgba(color, alpha) is a Sass function.
The color argument must be a Sass Color type.
Sass does not evaluation css custom property values, because these are run-time variables.

However this input should not throw. Node Sass should pass through values it doesn't understand, but are still valid CSS values. The correct output should be:

:root {
  --color--text: 18, 18, 26; }

body {
  color: rgba(var(--color--text), 0.8); }

This output is obviously jibberish, but the behaviour is correct as far as Sass is concerned.
This will be resolved in v4.8.0.

[xzyfer]

Fixed in 4.8.0

[ro0gr]

Unfortunately it doesn't seem to be fixed.

I've just installed node-sass@4.9.0 and the following code snipet:

var sass = require('node-sass');
var result = sass.renderSync({
    data: `body {
        --c: 1,2,3;
        background-color: rgb(var(--c));
    }`
});
console.log(result);

fails for me with the following stack trace:

Ruslans-MBP:sass-test RHR$ node index.js
/Users/RHR/workspace/tmp/sass-test/node_modules/node-sass/lib/index.js:439
  throw assign(new Error(), JSON.parse(result.error));
  ^

Error: Function rgb is missing argument $green.
    at Object.module.exports.renderSync (/Users/RHR/workspace/tmp/sass-test/node_modules/node-sass/lib/index.js:439:16)
    at Object.<anonymous> (/Users/RHR/workspace/tmp/sass-test/index.js:2:19)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Function.Module.runMain (module.js:441:10)
    at startup (node.js:140:18)
    at node.js:1043:3

@xzyfer do I miss something, do I need some special treatment to make it work?

[mrahhal]

This only seems to work when setting css variables. In @ro0gr's example, this still causes problems. But then.. I don't understand, was this only fixed when setting css vars?

Uppercase RGB seems to be working for now though.

[xzyfer]

Can you confirm you're using 4.9.0 with npm ls node-sass?

[xzyfer]

Looks like we don't have test for RGB with a single argument. https://github.com/sass/sass-spec/pull/1002/files

It's entirely possible this specific case is not handle correctly.

[mrahhal]

I am using node-sass@4.9.2.

It only works with:

--some-var: rgb(var(...));

Never with:

color: rgb(var(...));

Had to use RGB.