Using imported value in rgba()

I have the following:

/* colors.css */
@value midnight: #182947;

/* foo.css */
@value midnight from './colors.css';

.root {
  background-color: midnight;
  background-color: rgba(midnight, 0.97);
}

The output of this that I see in the browser is (similar to):

.foo__root___hwRbh {
  background-color: #182947;
  background-color: rgba(i__const_midnight_0, 0.97);
}

The value for midnight is not being interpolated correctly in the rgba() instance.

This occurs with css-loader@1.1.0 and with postcss-loader removed from my webpack configuration (I thought maybe one of my postcss plugins were conflicting).

Is this a bug? Or an unsupported use case?

[ctaepper]

same issue here, using color() from cssnext the value results in i__const… however i think the values plugin should run before cssnext, as i defined this order in my postcss plugin chain… so why is this not working?

[jedrichards]

Possibly related, I get a silent fail when using css-modulesify with postcss-cssnext and trying to use a color() function on an imported @value.

// colors.css
@value foo: #182947;

// component.css
@value foo from "../colors.css"

.root {
  color: color(foo l(+5%));
}

Above code causes watchify to just hang, no error message. color() function works as expected when not used on a @value.