Stylelint: Enforce module class naming in UI packages#79504
Conversation
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Size Change: -7 B (0%) Total Size: 7.51 MB 📦 View Changed
|
| className={ clsx( | ||
| overlayChromeStyles.content, | ||
| focusStyles[ 'outset-ring--focus-visible' ] | ||
| focusStyles[ 'outset-ring-focus-visible' ] |
There was a problem hiding this comment.
Hmm, maybe this should have been outset-ring__focus-visible or something? The focus module classes in particular make me want namespacing to be clearer. But even for some other shared modules, we may find it more readable to have clear namespacing in certain cases in the future.
My only concern would be that namespacing with __ doesn't map cleanly to BEM principles in this case 🤔 I'm fine with either double hyphens or double underscores, but I think we may have readability issues if we enforce single hyphens only.
There was a problem hiding this comment.
Makes sense, I will relax the pattern to allow --
ciampo
force-pushed
the
codex/enable-selector-class-pattern-modules
branch
from
714e1ea to
06062f9
Compare
* Stylelint: Enforce module class naming in UI packages * Stylelint: Allow namespaced module classes --- Co-authored-by: ciampo <mciampini@git.wordpress.org> Co-authored-by: mirka <0mirka00@git.wordpress.org>
2 participants
What?
Follow up to #79445 (comment).
Enable
selector-class-patternfor CSS Modules in the component-library packages:components,ui, andtheme.Why?
This keeps new CSS Module class names kebab-case without forcing the same rule onto legacy non-module styles.
How?
Adds a targeted Stylelint override for
*.module.{css,scss}files in those packages, then renames the existing@wordpress/uimodule classes that violated it.Testing Instructions
components,ui, andtheme.packages/uiTypeScript build.Testing Instructions for Keyboard
Not applicable; this is a linting/class-name cleanup and does not change keyboard behavior.
Screenshots or screencast
Not applicable; no visual change expected.
Use of AI Tools
Prepared with assistance from OpenAI Codex and reviewed locally.