Description
I'm trying to import a class name from one CSS module into another. The find and replace works if I use the local alias as a declaration value but not when used in a selector. For example:
// foo.scss
.foo {
color: blue;
}
// bar.scss
:import("foo.scss") {
fooClassName: foo;
}
.fooClassName .bar { // <-- this doesn't get replaced :(
color: red;
}
// baz.scss
:import("foo.scss") {
fooClassName: foo;
}
.baz {
color: fooClassName; // <-- this does get replaced :)
}
When bar.scss is compiled / output, fooClassName hasn't been found and replaced with the generated local-scope class name from foo.scss. However, when baz.scss is compiled / output on the page, the declaration value of the color property does indeed have the correct generated local-scope class name (obviously that's not helpful, but it demonstrates that it pulls through the correct class name, even if the context in which it's being used makes no sense).
The ICSS spec mentions:
An :import statement allows importing variables from other CSS files. It performs the following operations:
- Find and replace the usages of localAlias in certain places (described below) within the current file with the dependency's exportedValue.
The places within the CSS file that are checked for localAlias are:
- In any selector: e.g. .localAlias .MyComponent {}
Unfortunately it's not working as expected. We're using Webpack – is there a special option or flag we need to set to get this working? Appreciate any help.