Add "no global scoped selector" rule for CSS Modules #414
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Adds a new Stylelint rule for CSS modules:
css-modules/no-global-scoped-selector
. This ensures that all selectors in a CSS module file are locally scoped - that is, they fall underneath a class selector that will be hashed.The point of CSS modules is to encapsulate styles, so global selectors directly violate that principle. By enforcing encapsulation we can ensure that components minimize their side effects on the rest of the page. I think it's a good idea to start enforcing this early to teach best practices in the beginning.
From the docs:
Note
This plugin requires
"stylelint": "^13.0.0 || ^14.0.0"
as a peer dependency. We are on16.3.1
, so I had to install the plugin with an override. I did try to fix this upstream but the package is not maintained anymore so I was unable to. Everything seems to work fine in16.x
though.