Add stylelint CSS linting

.stylelintignore

@@ -0,0 +1,27 @@
+# Ignore WordPress plugin files.
+src/wp-content/plugins/**/*
+
+# Ignore WordPress theme files.
+src/wp-content/themes/**/*
+
+# Ignore WordPress block files.
+src/wp-includes/blocks/**/*
+
+# Ignore admin color schemes auto generated files.
+src/wp-admin/css/colors/*/*.css
+
+# Ignore WordPress included dist files.
+src/wp-includes/css/dist/**/*
+
+# Ignore files copied to wp-includes js.
+src/wp-includes/js/**/*
+
+# Ignore WordPress JS vendor files.
+src/js/_enqueues/vendor/**/*
+
+# Ignore minified CSS files.
+**/*.min.css
+
+# Ignore RTL CSS files.
+**/*-rtl.css
+**/*-rtl.min.css

.stylelintignore-themes

@@ -0,0 +1,9 @@
+# Ignore Node modules.
+node_modules
+
+# Ignore minified CSS files.
+**/*.min.css
+
+# Ignore RTL CSS files.
+**/*-rtl.css
+**/*-rtl.min.css

.stylelintrc.js

@@ -0,0 +1,57 @@
+/** @type {import('stylelint').Config} */
+module.exports = {
+	extends: '@wordpress/stylelint-config/scss-stylistic',
+	plugins: [
+		'stylelint-plugin-logical-css',
+		'@wordpress/theme/stylelint-plugins/no-token-fallback-values',
+	],
+	reportNeedlessDisables: true,
+	rules: {
+		'at-rule-empty-line-before': null,
+		'at-rule-no-unknown': null,
+		'comment-empty-line-before': null,
+		'declaration-property-value-allowed-list': [
+			{
+				'flex-direction': '/^(?!(row|column)-reverse).*$/',
+			},
+			{
+				message: ( property, value ) =>
+					`Avoid "${ value }" value for the "${ property }" property. For accessibility reasons, visual, reading, and DOM order must match. Only use the reverse values when they do not affect reading order, meaning, and interaction.`,
+			},
+		],
+		'font-weight-notation': null,
+		'@stylistic/max-line-length': null,
+		'no-descending-specificity': null,
+		'property-disallowed-list': [
+			[ 'order' ],
+			{
+				message:
+					'Avoid the order property. For accessibility reasons, visual, reading, and DOM order must match. Only use the order property when it does not affect reading order, meaning, and interaction.',
+			},
+		],
+		'rule-empty-line-before': null,
+		'selector-class-pattern': [
+			'^[a-z][a-z0-9]*(?:(?:__|--|-)[a-z0-9]+)*$',
+			{
+				message:
+					'Selector should use lowercase class segments separated with hyphens, double hyphens, or double underscores (selector-class-pattern)',
+			},
+		],
+		'value-keyword-case': null,
+		'scss/operator-no-unspaced': null,
+		'scss/selector-no-redundant-nesting-selector': null,
+		'scss/load-partial-extension': null,
+		'scss/no-global-function-names': null,
+		'scss/comment-no-empty': null,
+		'scss/at-extend-no-missing-placeholder': null,
+		'scss/operator-no-newline-after': null,
+		'scss/at-if-closing-brace-newline-after': null,
+		'scss/at-else-empty-line-before': null,
+		'scss/at-if-closing-brace-space-after': null,
+		'no-invalid-position-at-import-rule': null,
+	},
+	reportDescriptionlessDisables: true,
+	ignorePath: '.stylelintignore',
+};
+
+

Gruntfile.js

@@ -1760,8 +1760,28 @@ module.exports = function(grunt) {
 		'qunit:compiled'
 	] );
 
+	grunt.registerTask( 'lint:css', 'Runs Stylelint on core CSS.', function() {
+		var done = this.async();
+
+		grunt.util.spawn( {
+			cmd: 'npx',
+			args: [
+				'wp-scripts',
+				'lint-style',
+				SOURCE_DIR + '**/*.{css,scss}',
+				// By default, the Stylelint CLI looks for files to ignore in
+				// .stylelintignore in process.cwd(). This way, the configuration
+				// is consistent with the one for the NPM script in .stylelintrc.js.
+			],
+			opts: { stdio: 'inherit' }
+		}, function( error ) {
+			done( ! error );
+		} );
+	} );
+
 	grunt.registerTask( 'precommit:css', [
-		'postcss:core'
+		'postcss:core',
+		'lint:css',
 	] );
 
 	grunt.registerTask( 'precommit:php', [

package.json

@@ -76,6 +76,7 @@
 		"sinon": "16.1.3",
 		"sinon-test": "~3.1.6",
 		"source-map-loader": "5.0.0",
+		"stylelint-plugin-logical-css": "2.1.0",
 		"typescript": "6.0.3",
 		"uuid": "14.0.1",
 		"wait-on": "9.0.10",
@@ -125,6 +126,10 @@
 		"grunt": "grunt",
 		"lint:jsdoc": "wp-scripts lint-js",
 		"lint:jsdoc:fix": "wp-scripts lint-js --fix",
+		"lint:css": "wp-scripts lint-style \"src/**/*.{css,scss}\"",
+		"lint:css:fix": "npm run lint:css -- --fix",
+		"lint:css:themes": "wp-scripts lint-style \"src/wp-content/themes/**/*.{css,scss}\" --ignore-path .stylelintignore-themes",
+		"lint:css:themes:fix": "npm run lint:css:themes -- --fix",
 		"typecheck:js": "tsc --build",
 		"env:start": "node ./tools/local-env/scripts/start.js && node ./tools/local-env/scripts/docker.js run -T --rm php composer update -W",
 		"env:stop": "node ./tools/local-env/scripts/docker.js down",

src/wp-content/themes/twentytwenty/assets/css/font-inter.css

@@ -8,15 +8,15 @@ Inter variable font. Usage:
 
 @font-face {
 	font-family: "Inter var";
-	font-weight: 100 900; /* stylelint-disable-line font-weight-notation */
+	font-weight: 100 900;
 	font-style: normal;
 	font-display: swap;
 	src: url(../fonts/inter/Inter-upright-var.woff2) format("woff2");
 }
 
 @font-face {
 	font-family: "Inter var";
-	font-weight: 100 900; /* stylelint-disable-line font-weight-notation */
+	font-weight: 100 900;
 	font-style: italic;
 	font-display: swap;
 	src: url(../fonts/inter/Inter-italic-var.woff2) format("woff2");

src/wp-content/themes/twentytwenty/package.json

@@ -28,8 +28,7 @@
 		"concurrently": "^9.2.1",
 		"postcss": "^8.5.6",
 		"postcss-cli": "^11.0.1",
-		"rtlcss": "^4.3.0",
-		"stylelint-a11y": "^1.2.3"
+		"rtlcss": "^4.3.0"
 	},
 	"browserslist": [
 		"extends @wordpress/browserslist-config"
@@ -56,7 +55,6 @@
 		"build:vendor-prefixes-style": "postcss -r --no-map style.css assets/css/editor-style-block.css assets/css/editor-style-classic.css",
 		"build:vendor-prefixes-esb": "postcss -r --no-map assets/css/editor-style-block.css ",
 		"build:vendor-prefixes-esc": "postcss -r --no-map assets/css/editor-style-classic.css",
-		"lint:css": "wp-scripts lint-style 'style.css' 'assets/**/*.css'",
 		"lint:js": "wp-scripts lint-js 'assets/**/*.js'",
 		"lint:pkg-json": "wp-scripts lint-pkg-json"
 	}

src/wp-content/themes/twentytwenty/style-rtl.css

@@ -257,15 +257,15 @@ Inter variable font. Usage:
 
 @font-face {
 	font-family: "Inter var";
-	font-weight: 100 900; /* stylelint-disable-line font-weight-notation */
+	font-weight: 100 900;
 	font-style: normal;
 	font-display: swap;
 	src: url(./assets/fonts/inter/Inter-upright-var.woff2) format("woff2");
 }
 
 @font-face {
 	font-family: "Inter var";
-	font-weight: 100 900; /* stylelint-disable-line font-weight-notation */
+	font-weight: 100 900;
 	font-style: italic;
 	font-display: swap;
 	src: url(./assets/fonts/inter/Inter-italic-var.woff2) format("woff2");

src/wp-content/themes/twentytwenty/style.css

@@ -257,15 +257,15 @@ Inter variable font. Usage:
 
 @font-face {
 	font-family: "Inter var";
-	font-weight: 100 900; /* stylelint-disable-line font-weight-notation */
+	font-weight: 100 900;
 	font-style: normal;
 	font-display: swap;
 	src: url(./assets/fonts/inter/Inter-upright-var.woff2) format("woff2");
 }
 
 @font-face {
 	font-family: "Inter var";
-	font-weight: 100 900; /* stylelint-disable-line font-weight-notation */
+	font-weight: 100 900;
 	font-style: italic;
 	font-display: swap;
 	src: url(./assets/fonts/inter/Inter-italic-var.woff2) format("woff2");