Custom properties not working as function parameter

[robcalcroft]

We have our CSS custom props defined in a JSON file which is imported like:

'postcss-cssnext': {
      browsers: ['>.25%', 'IE 8'],
      features: {
        { '--color-primary': red },
      },
    },

We can then use that var as normal with no issues Then trying to use it with the color() function:

&:active {
  border-color: color(var(--color-primary) shade(20%));
}

And this doesn't work. The resulting color is just black.

Doing:

&:active {
  border-color: color(red shade(20%));
}

does work

[Semigradsky]

We have our CSS custom props defined in a JSON file which is imported like:

This is incorrect. See doc: http://cssnext.io/usage/#features

Your setup should be like

'postcss-cssnext': {
      browsers: ['>.25%', 'IE 8'],
      features: {
        customProperties: {
          variables: {
            'color-primary': red
          },
        },
      },
    },