WordPress/gutenberg

stylelint-config: the selector-class-pattern rule rejects some default block, widget, and editor classes

Open

#28,616 创建于 2021年1月30日

在 GitHub 查看
 (13 评论) (0 反应) (1 负责人)JavaScript (3,893 fork)batch import
CSS StylingGood First Issue[Status] In Progress[Tool] stylelint config[Type] Enhancement

仓库指标

Star
 (9,607 star)
PR 合并指标
 (平均合并 12天 18小时) (30 天内合并 509 个 PR)

描述

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:

https://github.com/WordPress/gutenberg/blob/d9e7541fe29c0022f2f5de2570ec60bee670aede/packages/stylelint-config/index.js#L101

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

  1. Create a new npm project installing stylelint and @wordpress/stylelint-config as devDependencies, and a "stylelint" key in package.json. (Example below for reference.)
  2. Create a CSS file in the same project using block, editor, or widget classes like above.
  3. 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": {}
  }
}

贡献者指南