stylelint-config: the selector-class-pattern rule rejects some default block, widget, and editor classes
#28,616 opened on 2021年1月30日
Repository metrics
- Stars
- (9,607 stars)
- PR merge metrics
- (平均マージ 12d 18h) (30d で 509 merged PRs)
説明
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:
This ends up flagging a lot of BEM-style default Gutenberg classes like wp-block-media-text__content and wp-block-button__link, editor class versions, as well as old widget classes like widget_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
- Create a new npm project installing
stylelintand@wordpress/stylelint-configas devDependencies, and a"stylelint"key in package.json. (Example below for reference.) - Create a CSS file in the same project using block, editor, or widget classes like above.
- Run stylelint (
npx stylelint "*.css".) It will complain about the class names containing underscores.
Code snippets
Example css (from TwentyTwentyOne):
/* stylelint will flag this */
.wp-block-cover .wp-block-cover__inner-container,
.wp-block-cover-image .wp-block-cover__inner-container {
width: calc(100% - calc(2 * var(--global--spacing-vertical)));
}
.but-this-is-a-totally-fine-style {
margin: 4px;
}
Example package.json:
{
"name": "wp-stylelint-config-bug",
"version": "1.0.0",
"devDependencies": {
"@wordpress/stylelint-config": "^19.0.0",
"stylelint": "^13.9.0"
},
"stylelint": {
"extends": "@wordpress/stylelint-config",
"rules": {}
}
}