-
Notifications
You must be signed in to change notification settings - Fork 552
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Support composes at-rule #351
Comments
Sounds good, but it will be breaking change, but we can keep both syntaxes for compatibility |
Thank you so much for considering this, @evilebottnawi. I am also fully in favor of keeping both syntaxes for compatibility. What could I do to help facilitate this change, from a position of code contributions? I’ve created #352 as a work-in-progress proposal of documentation changes. I would be happy to commit code changes in PRs to the appropriate plugins as well. |
We need to send a PR for this to https://github.com/css-modules/postcss-modules-scope/blob/master/src/index.js and https://github.com/css-modules/postcss-modules-extract-imports, I think we can implement this, sounds good |
Problem: Composition and the Cascade
CSS Modules lets us extend classes using the
composes
declaration. When extending multiple classes, CSS Modules requires multiplecomposes
declarations. Here is an example of what that CSS looks like:The issue is that this practice of writing multiple
composes
declarations defies CSS Cascade (the "C" in "CSS"). Therefore, using multiplecomposes
declarations becomes a non-preferable practice.In CSS, properties overwrite each other, and they do not combine with each other. Here is an example of the cascade:
Note: That example is used in MDN’s introduction to the CSS Cascade.
Authors may also rely on this cascade to manage browser fallbacks (e.g.
.layout { display: block; display: grid }
).Even the singular example from this project’s documentation of composition relies on this expectation.
Solution: Composition At-Rule
Please consider supporting a
@composes
at-rule, which would be functionally identical to the currentcomposes
declaration. This would allow authors to utilize composition while still respecting the expectations inherit to CSS.Here is an example of what that CSS would looks like, mirroring the opening example:
Additional unintentional benefits include:
declaration-block-no-duplicate-properties
when using multiplecomposes
declarations.declaration-empty-line-before
when separatingcomposes
from other declarations with an empty line.stylelint-order
when not separatingcomposes
from other declarations with an empty line.The text was updated successfully, but these errors were encountered: