Using imported value in rgba()

[jerrysu]

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?

[jgrancher]

+1 for this. I've got the same issue... :(

[jamesmccann-zz]

Having a similar issue using calc.

With css-modules/postcss-modules-values@e8345f9 it works for me with a locally defined value but not a value imported from another file, i.e.:

// works
@value navbarHeight: 50px;

// doesn't work
@value navbarHeight from 'shared/styles/constants.css';

.panel {
  width: 350px;
  height: calc(100vh - navbarHeight);
}

[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.

[sohkai]

@jedrichards I think this is a case where you've ran into some of CSS Modules' limitations; because it's run after all postcss plugins, all of the transpiled functions are expanded before the value definitions are exported / imported. The same applies for functions available in other preprocessors. The css-next color plugin probably can't find a color reference for foo and then silently hangs.

[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?

[tomsapps]

same issue, this is still broken.

@ctaepper checking the order of my plugins was promising to me at first too lol. Must be a bug in the plugin. Has anyone been working on this?

[princed]

I wrote a workaround to overcome this flaw in CSS Modules — https://github.com/princed/postcss-modules-values-replace. I'd love to have some feedback on it.

Update: However, color computations won't work inside @value out of the box, as postcss-color-function doesn't traverse media queries.

[nglazov]

Any news here?

[pczern]

This is an interesting question. If this isn't solved since a year, what is the preferred way to import variables?

[phamcharles]

Any update on this problem?

[alexander-akait]

@phamcharles PR welcome

[windmaomao]

css community needs to figure out a way to do color conversion easily. Otherwise it'll be more and more variables for the same purpose.