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 https://github.com/Evaneos/vitaminjs/pull/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;
}