Still work in progress, opening for visibility and guidance. Currently works locally but due to dependency updates tests don't pass.

What kind of change does this PR introduce?

Adds support for importing css modules in selectors. I guess it's a new feature, since this wasn't supported, but I'd consider it more of a bug fix, since the feature is part of the spec.

Did you add tests for your changes?

• add tests
• fix broken tests

Summary

This add support for importing css selectors from other locally scoped css files. This feature has been requested a few places and, in my opinion, allows css modules to use one of the core features that makes css great: being able to style components contextually.

• Selector class substitution. css-modules/css-modules#102
• closes Imported local aliases not working when used in selectors css-modules/icss#12, closes Imported local aliases not working when used in selectors #561

A quick example of usage (using bare icss syntax):

/* btn.css */
.btn { /* ... */ }

/* grouped-btn.css */
:import("./btn.css") {
    btn: btn;
}
.grouped-btn .btn {
    /* changing stuff, maybe removing a border radius on inner .btns */
}

Previously, this would have been compiled to something like:

/* btn.css */
.__btn-style__btn { /* ... */ }

/* grouped-btn.css */
.__grouped-btn-style__grouped_btn .__grouped-btn-style__btn { /* ... */ }

Note that the .btn class has been scoped locally to the grouped button styles.

Now, this compiles to:

/* btn.css */
.__btn-style__btn { /* ... */ }

/* grouped-btn.css */
.__grouped-btn-style__grouped_btn .__btn-style__btn { /* ... */ }

Does this PR introduce a breaking change?

Possibly, this updates dependencies, and the base icss-utils repo has had a major version bump. I've got to investigate why tests are failing to know for sure. I'll update if so.

The main changes are based on css-modules/icss-utils@19ffee9

Also, thanks to @michael-ciniawsky for some context here - see #561 (comment)