Add Stylelint

[simison]

What?

• Adds WordPress stylelint config and follows Gutenberg stylelint config pretty closely.
• Adds PostCSS config which applies design system fallbacks: var(--wpds-dimension-gap-lg ); are converted to var(--wpds-dimension-gap-lg, 16px); at build-time, rather than requiring us to keep fallbacks in CSS files, which would then eventually get out of sync anyway with real values. wp-build already handles this for routes/* page, but for "classic" builds we need to handle this ourselves.
• Reformats all stylesheets for lints to pass.
• Adds npm run lint:css to CI workflow

Why?

• Avoids RTL issues at the tooling level vs requiring folks to be mindful, like happened before
• More consistent use of design system tokens across all files rather than legacy tokens like --wp-admin-theme-color or -wp-components-color-gray-700

How?

Use of AI Tools

Yes

Testing Instructions

Nothing should change visually, apart from slight drifts due to updated design tokens (components→design system); smoke-test the plugin features. Test both the WP Build based settings page as well as the features in the editor, and classic WP Admin pages.

npm run lint:css should pass.

Screenshots or screencast

—

Updated design tokens

Here’s a concise before → after view for the SCSS we moved off raw hex / off --wp-components-color-* onto WPDS tokens. The “After (built fallback)” column is what PostCSS injects from @wordpress/theme’s design-token-fallbacks map (same as in your compiled CSS when the token is bare var(--wpds-…)).

Location / use	Before	Token now	After (built fallback)	How close
Request logs — image grid caption color	#5c5f62	var(--wpds-color-fg-content-neutral-weak)	#707070	ΔL — same “muted gray” intent; WPDS is a bit lighter (~#707070 vs #5c5f62).
Content resizing — toolbar button color	var(--wp-admin-theme-color, #3858e9)	var(--wpds-color-fg-interactive-brand)	var(--wp-admin-theme-color, #3858e9) (nested in map)	Match — same chain; brand still follows admin theme with #3858e9 default.
Content resizing — loading / label / neutral text color	#757575	var(--wpds-color-fg-content-neutral-weak)	#707070	Close — both mid-gray; WPDS #707070 is slightly lighter than #757575.
Content resizing — diff neutral chip background	#f0f0f0	var(--wpds-color-bg-surface-neutral-weak)	#f4f4f4	Very close — both light neutrals; #f4f4f4 vs #f0f0f0.
Content resizing — diff neutral chip color	#757575	var(--wpds-color-fg-content-neutral-weak)	#707070	Close — same as row 3.
Meta description — char count in range color	#00a32a	var(--wpds-color-fg-content-success-weak)	#008030	Same family, different shade — both “success green”; WPDS is darker (#008030 vs WP green #00a32a).
Meta description — char count out of range color	#dba617	var(--wpds-color-fg-content-warning-weak)	#926300	Noticeable shift — both warning/amber; WPDS #926300 is browner/darker than #dba617.

Changelog Entry

Added - New feature.
Changed - Existing functionality.
Deprecated - Soon-to-be removed feature.
Removed - Feature.
Fixed - Bug fix.
Security - Vulnerability.
Developer - Development related updates.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: simison <simison@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 74.68%. Comparing base (c71c9c9) to head (e07bd8c).

Additional details and impacted files

@@            Coverage Diff             @@
##             develop     #594   +/-   ##
==========================================
  Coverage      74.68%   74.68%           
  Complexity      1754     1754           
==========================================
  Files             85       85           
  Lines           7549     7549           
==========================================
  Hits            5638     5638           
  Misses          1911     1911           

Flag	Coverage Δ
unit	74.68% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[mirka]

Very cool to see the design system tooling being used in another repo ❤️ I'll leave it to someone with more familiarity here to approve, but overall it looks good to me.

[mirka]

Just looking at the diff here so not sure what exactly is going on in context, but this jumped out at me because you shouldn't have to overwrite accent colors in @wordpress/components. Possibly safe to remove.

[simison]

Yap! Seems fine for separate PR

[mirka]

Not sure what the strategy is in this repo, but I'll mention that even for routes in Gutenberg we are recommending a switch to CSS modules where stylesheets are imported from JS files. (This code comment is making it seem like it's fine to use plain CSS files in routes.)

[mirka]

Not sure if it's feasible, but this makes me wonder if we should be packaging some of these settings In @wordpress/stylelint-config for easier reuse!

[simison]

I think we should. 🙂