Imported local aliases not working when used in selectors

[tjramage]

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.

[TrySound]

/cc @sokra @geelen

[joepie91]

What's the current status on this? There does not appear to have been any movement on it since 2017.

This is a pretty significant issue, given that it blocks the main apparent purpose of CSS Modules: the ability to write modular stylesheets. If it's not possible to reference externally-generated class names, it's also not possible to interact (styling-wise) between different components with their own individual style rules.

What still needs to happen to get this resolved? What do I need to do/contribute to make this problem go away?

[sokra]

Yeah this seem to be a bug. Maybe file it in the webpack-contrib/css-loader repo. This is the spec repo.

[apexskier]

It's been filed there, see the references

webpack-contrib/css-loader#561
webpack-contrib/css-loader#562

[joepie91]

An update on this issue:

• Webpack: This now mostly works in css-loader; however, there is an as-of-yet unfixed issue that breaks importing of composed classes.
• Browserify: Works fully through icssify (which I wrote). Doesn't have the composed-classes bug.