Open sidhu663 opened 7 years ago
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;
}
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.
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;
}
//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 }