Add stylelint with logical-property rule to catch RTL styling bugs

[dcalhoun]

What problem does this address?

GutenbergKit's own SCSS is never processed by rtlcss. Gutenberg's stylesheets ship pre-generated -rtl variants, and the editor now loads whichever matches the text direction, but our own styles under src/ have no such counterpart — a physical property written there stays physical in both directions.

That produced a real bug during RTL testing: .gutenberg-kit-editor-toolbar .components-toolbar-group used border-right-color, which put the toolbar group divider on the wrong side in right-to-left layouts. It was found by eye, and nothing prevents the next one.

There is currently no stylelint setup in the repo at all — no config, no dependency, no lint:css script, no Makefile target — so this class of bug has no automated guard.

What is your proposed solution?

Add stylelint with stylelint-plugin-logical-css, matching how upstream Gutenberg catches the same problem (tools/stylelint/config.js).

Setup

• Dependencies: stylelint, stylelint-plugin-logical-css, @wordpress/stylelint-config, postcss-scss
• .stylelintrc.mjs extending @wordpress/stylelint-config/scss, enabling plugin/use-logical-properties-and-values
• Reuse upstream's ignore list, which exempts vertical and direction-neutral properties (margin-top, width, overflow-y, border-top, …)
• lint:css / lint:css:fix scripts in package.json, plus lint-css / lint-css-fix Makefile targets matching the existing lint-js pattern
• Run lint-css wherever CI runs lint-js

Existing violations

The asymmetric cases that actually misrendered have already been fixed. What remains across the 11 SCSS files under src/:

• 15 physical-property declarations, all symmetric pairs (padding-left: 8px; padding-right: 8px, margin-left: auto; margin-right: auto, border-left: none; border-right: none) or text-align: center. None misrender in RTL, but the rule will flag them because it cannot tell a symmetric pair is direction-safe. Converting to the shorthand (padding-inline: 8px) is mechanical and arguably cleaner.
• 10 left/right positioning declarations that are symmetric full-width pins (left: 0; right: 0, left: 16px; right: 16px). Same situation — safe today, flagged by the rule, trivially convertible to inset-inline.

Two further left/right declarations in the toolbar scroll indicators are not symmetric and need their own investigation — tracked separately.

Notes

Whether this is worth the setup cost depends on how much RTL work follows. If right-to-left is now a supported dimension people will keep touching, the linter is what keeps it from regressing; it would also catch other WordPress CSS conventions as a side benefit.

Related: the RTL support work in the branch that fixed the original border-right-color bug.

[akashfer]

I'd like to work on this. Plan: add stylelint, stylelint-plugin-logical-css, @wordpress/stylelint-config, and postcss-scss as dev dependencies, add .stylelintrc.mjs extending @wordpress/stylelint-config/scss with plugin/use-logical-properties-and-values enabled, port over upstream's ignore list, add lint:css/lint:css:fix npm scripts and matching lint-css/lint-css-fix Makefile targets, wire lint-css into CI alongside lint-js, then fix the ~25 flagged physical-property/positioning violations by converting them to their logical equivalents (padding-inline, inset-inline, etc.) as called out in the issue.