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?

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

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);
}

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.

@jedrichards

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

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?

@ctaepper

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?

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.

Any news here?

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

Any update on this problem?

@phamcharles

@phamcharles PR welcome

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.

Navigation Menu

Repository navigation

Using imported value in rgba() #17

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Using imported value in rgba() #17

Description

Activity

jgrancher commented on Dec 3, 2015

jamesmccann-zz commented on Dec 28, 2015

jedrichards commented on Jan 29, 2016

sohkai commented on Feb 22, 2016

ctaepper commented on May 14, 2016

tomsapps commented on Nov 16, 2016

princed commented on Nov 17, 2016

nglazov commented on Jun 1, 2017

pczern commented on Mar 23, 2018

phamcharles commented on Aug 20, 2018

alexander-akait commented on Aug 21, 2018

windmaomao commented on Jun 14, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions