Open douglasjunior opened 11 months ago
The most strange part, is that if I remove from '.';
from the local classes, the result is even worse:
With postcss this part of problem doesn't happen, so I can omit the
from '.';
and I have the same previous result.
component.module.css
.classA {
composes: fontSizes--headingMedium from global;
background-color: magenta;
}
.classB {
composes: classA;
text-align: center;
}
.myComponentClass {
composes: classB;
border: solid 1px red;
}
Note that the classA
was completely ignored.
Hello,
in the first example and codesandbox, theme/index.css
is a gobal CSS file, not processed by css modules. So composes
does not have any effect and is ignored by the browser.
Not 100% sure of the setup used here, but usually if you wanted to make it a css module, you'd have to rename it theme.module.css
, but that would make it a full css module (every class scoped).
I guess you will need to make a clear decision about what's global and what's not here ;)
Maybe a Heading
component?
Note that the classA was completely ignored.
I think it is the same problem as https://github.com/swc-project/swc/issues/7737.
I'm trying to use css-modules
composes
with multiple class levels, but it's working for part of my need.My project is configured with
vite
andlightningcss
.I have the following scenario:
component.module.css
theme.css
(imported globally in myApp.tsx
)Result appearance
Result HTML
Result CSS
So, note that the
composes: fontWeights--bold from '.';
was ignored by the css-modules transpilation.What I'm doing wrong?
Reproducible example: https://codesandbox.io/p/sandbox/lightningcss-css-modules-composition-demo-6k9x67