Expected a color when using CSS variables

[JamesTheHacker]

I'm getting the following error when trying to use a variable in color-mod:

form.css:48:31: Expected a color
  46 |     &:focus {
  47 |         outline: 5px solid var(--electric-blue);
> 48 |         background: color-mod(var(--electric-blue) lightness(50%));
     |                               ^
  49 |     }
  50 | }

Here is my code:

.input,
.textarea {
    font-size: 1em;
    padding: 10px;
    margin: initial;
    width: 100%;

    &:focus {
        outline: 5px solid var(--electric-blue);
        background: color-mod(var(--electric-blue) lightness(50%));
    }
}

The --electric-blue variable is definitely set. My outline is electric-blue. Why is this happening? I am using color-mod in my theme.css file without issues.

If I do the following it works fine:

        background: color-mod(green lightness(50%));

Seems to be a variable issue with the library.

[jonathantneal]

Is --electric-blue defined in the :root of the same file? If not, the current version of this plugin may have trouble resolving the variable.

In the forthcoming release, you can specify an external CSS file where this plugin can resolve Custom Properties from.

import postcssColorMod from 'postcss-color-mod-function';

postcssColorMod({
  importFrom: 'path/to/theme.css'
});

[mevbg]

you can specify an external CSS file where this plugin can resolve Custom Properties from.

There is something wrong with color-mod using CSS custom property when it's called inside nested declaration with &.

So, for example I have the following code...

.root {
  background-color: color-mod(var(--swatch-col-yellow) a(80%)); // this one passes

  &[data-current] {
    background-color: color-mod(var(--swatch-col-yellow) a(60%)); // this one fails
  }
}

... where the first color-mod (directly in .root) is parsed perfectly, while the second one fails with Expected a color and they both rely on same variable.

I successfully import my CSS files that contains all my variables, just as you told me yesterday, like so:

  require('postcss-preset-env')({
    stage: 0,
    importFrom: cssVariables,
    features: {
      'color-mod-function': {
        importFrom: cssVariables
      }
    }
  })

Everything works properly, just except color-mod with CSS variable inside nested & { ... } declaration.

You may test it here: https://github.com/martinmethod/testapp.

[jfroffice]

+1 I am getting the same issue.