New rule idea: improved selector-class-pattern for CSS modules
Opened this issue · 2 comments
It's common to enforce camelCase for all local class names when using CSS modules, while ignoring global class names, since we don't have control over third-party libraries. A detailed discussion on this topic can be found at: stylelint/stylelint#3259
Instead of using // stylelint-disable every time we use :global, it might be more efficient to create a new rule for CSS modules that allows developers to provide different options for :global and :local scopes.
We could follow a similar approach to how stylelint-scss provides scss/function-no-unknown to replace the core function-no-unknown. A possible name for the new rule is css-modules/function-no-unknown.
If this proposal sounds good to you, I can create a pull request to start the implementation.
Hi @luin,
a couple of considerations.
- Is that really such an issue and unbearable to use a couple of
// stylelint-disable? - This config package does not force nor override any stylistic pattern or rule, it's not its goal, so I'm wondering whether such rule would have a fit here.
- Usually rules are most commonly shipped through plugins, not configs directly? Granted this would mean yet another package...
Leaving this open to gather feedback and interest from other users.
I think some of this could be very useful. I don't know that a new rule is necessary, but the standard preset does enforce kebab-case which is usually not how selectors in CSS Modules are written. We had to override that ourselves. I'd love if this config would set a more reasonable pattern than the one in standard.