-
Notifications
You must be signed in to change notification settings - Fork 4.1k
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
stylelint-config: the selector-class-pattern rule rejects some default block, widget, and editor classes #28616
Comments
This rule is disabled in Gutenberg which only confirms that it is too strict: Line 11 in d9e7541
It should allow one occurrence of |
@gziolo Can I work on this one? |
Sure, you can always pick an issue that isn't marked as in progress or it doesn't have a PR referenced. |
I changed the regex to allow only one occurrence of gutenberg/packages/block-library/src/button/editor.scss Lines 36 to 42 in fb1cc0e
When compiled, this turns into |
Can you update those class names so we could see the number of exceptions that exists? It would help to make the decision. |
I'm not really sure if I understand it, but I ran the
This is not including the compiled |
@rafaelgalani, stellar work. "Allowing ONLY ONE element + modifier" is very close to what we need as explained in:
|
@gziolo
There's not much difference between the |
Yes, I wouldn't expect to see |
Regex bem pattern copied from https://regexr.com/5m0g9 referenced from WordPress/gutenberg#28616
Regex bem pattern copied from https://regexr.com/5m0g9 that was referenced on WordPress/gutenberg#28616
Maybe this is not restrictive enough for WP but I wanted to share it anyway.
|
这是来自QQ邮箱的假期自动回复邮件。
您好,邮件已收到。记得常联系哦
|
这是来自QQ邮箱的假期自动回复邮件。
您好,邮件已收到。记得常联系哦
|
This seems to work very well for BEM naming conventions for SCSS using stylelintrc.json. I have these settings set up on my
The regex expression I am using is Potherca BEM Regex I only removed the Classes Passed: Classes Failed: etc..... At least this is what I think after testing it out a bit... |
Description
The stylelint-config package sets a
selector-class-pattern
rule to enforce kebab-case CSS class names. It looks like the regex was taken straight from stylelint's docs:gutenberg/packages/stylelint-config/index.js
Line 101 in d9e7541
This ends up flagging a lot of BEM-style default Gutenberg classes like
wp-block-media-text__content
andwp-block-button__link
, editor class versions, as well as old widget classes likewidget_recent_entries
. For themes and plugins that want to create custom styles for these elements, this adds a lot of noise in the stylelint output.This issue was brought up in the old stylelint-config-wordpress repo, but got closed without resolution when the project was migrated here.
It seems like a WP-focused ruleset ought to accept WP-generated classes, so it would be good to either make the rule a little more comprehensive, or give some guidance in the package README about overriding it to target block/editor/widget classes.
Reproducing the error
stylelint
and@wordpress/stylelint-config
as devDependencies, and a"stylelint"
key in package.json. (Example below for reference.)npx stylelint "*.css"
.) It will complain about the class names containing underscores.Code snippets
Example css (from TwentyTwentyOne):
Example package.json:
The text was updated successfully, but these errors were encountered: