build: add stylelint for RTL-unsafe logical CSS properties

.buildkite/pipeline.yml

@@ -58,6 +58,11 @@ steps:
       command: make lint-js
       plugins: *plugins
 
+    - label: ':stylelint: Lint CSS'
+      key: lint-css
+      command: make lint-css
+      plugins: *plugins
+
     - label: ':javascript: Test JavaScript'
       key: test-js
       command: make test-js
@@ -175,6 +180,7 @@ steps:
           - build-xcframework
           - swift-test-swift-package
           - lint-js
+          - lint-css
           - lint-swift
           - test-js
           - test-web-e2e

.stylelintrc.mjs

@@ -0,0 +1,51 @@
+/** @type {import('stylelint').Config} */
+export default {
+	extends: '@wordpress/stylelint-config/scss',
+	plugins: ['stylelint-plugin-logical-css'],
+	rules: {
+		'plugin/use-logical-properties-and-values': [
+			true,
+			{
+				ignore: [
+					// Doesn't affect RTL styles
+					'border-bottom',
+					'border-top',
+					'width',
+					'min-width',
+					'max-width',
+					'height',
+					'min-height',
+					'max-height',
+					'margin-top',
+					'margin-bottom',
+					'overflow-x',
+					'overflow-y',
+					'padding-top',
+					'padding-bottom',
+					'scroll-margin-top',
+					'scroll-margin-bottom',
+					'top',
+					'bottom',
+				],
+			},
+		],
+
+		// The rules below are relaxed the same way upstream Gutenberg relaxes them
+		// (see WordPress/gutenberg's tools/stylelint/config.js) when applying this
+		// shared config to a codebase that predates it. They flag pre-existing
+		// formatting/selector-naming conventions unrelated to RTL/logical CSS, and
+		// are out of scope for this initial adoption.
+		'comment-empty-line-before': null,
+		'no-descending-specificity': null,
+		'rule-empty-line-before': null,
+		'scss/comment-no-empty': null,
+		'scss/selector-no-redundant-nesting-selector': 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)',
+			},
+		],
+	},
+};

Makefile

@@ -231,6 +231,14 @@ wp-env-android-urls: ## Report whether WordPress emits emulator-reachable URLs,
 format: npm-dependencies ## Format code
 	npm run format
 
+.PHONY: lint-css
+lint-css: npm-dependencies ## Lint SCSS code
+	npm run lint:css
+
+.PHONY: lint-css-fix
+lint-css-fix: npm-dependencies ## Lint and auto-fix SCSS code
+	npm run lint:css:fix
+
 .PHONY: lint-js
 lint-js: npm-dependencies ## Lint JavaScript code
 	npm run lint:js