Using @value in composes failing

[sidhu663]

//theme.css
.smallText {
font-size: 10px;
}

//style.css
@value theme: 'theme.css';

.myClass {
composes: smallText from theme;
}

The above example results in a "Module build failed: referenced class name "smallText" in composes not found"

Using webpack

Assigning the import to a value first works fine:

//style.css
@value theme: 'theme.css';
@value smallText from theme;

.myClass {
composes: smallText
}

[josephrexme]

I have the exact same issue. I had to compose directly from the path:

.myclass{
  composes: smallText from './';
}

and in the case of inheriting the variable name

@value myColor from './theme.css';
.myclass{
  background: myColor;
}

[tivac]

I ran into this with modular-css and had to fix it by splitting up value-processing into a two-pass thing, where it does local values (like @value foo: "./foo.css";) first and then processing values/compositions imported from other files.

Kinda of a PITA, but it worked out ok.

[DavideDaniel]

yep, same...

/* colors.css */
@value primary: rgba(255,215,237,1);
.primaryColor {
  color: primary;
  fill: primary;
}

then:

/* styles.css */
@value colors: "../colors.css";
@value primary, secondary from colors;
/* the following works */
.header {
  background-color: primary;
}
/* the following results in error */
.header {
  composes: primaryColor from colors;
}

Error message:
"Module build failed: referenced class name "primaryClass" in composes not found"

EDIT:
I think what's happening is related to the things discussed in Evaneos/vitaminjs#261 - I realized I was getting values feature from simply using css-modules and not even using a post-css loader. After adding postcss correctly, it still gave me the error until I tried this:

Solution:

@value primary, secondary from "../colors.css";

.header {
  composes: primaryColor from "../colors.css";
  background-color: secondary;
}