Skip to content

Fix CSS lint with a Tailwind v4 aware stylelint config - #237

Merged
bordoni merged 7 commits into
mainfrom
style/css-lint
Oct 17, 2026
Merged

bordoni merged 7 commits into
mainfrom
style/css-lint

Conversation

@bordoni

@bordoni bordoni commented Oct 17, 2026

Copy link
Copy Markdown
Owner

Takes bun run lint:css from 1520 problems to 0. CSS lint never ran in CI before (it gets a step in #241).

  • .stylelintrc.js allows the Tailwind v4 at-rules (@theme, @custom-variant, @utility, @source…).
  • stylelint --fix over the admin styles, then the leftovers in select2.pcss and jquery-ui.pcss by hand.
  • Dashicons allowed without a generic family; specificity ordering skipped in the legacy .pcss.

Stacked on #236.

Checked: the compiled CSS is equivalent (only obsolete -moz- gradients and empty rules dropped), and screenshots of all 5 pages match the pre-cleanup ones.

Extends the same scss-stylistic preset wp-scripts uses by default, keeps its selector-class-pattern override, and allows Tailwind's @config/@source/@theme/@custom-variant (and the rest of the v4 at-rules) plus @import after @config/@source. JS so each override can be commented.
Tabs, blank lines, leading zeros, lowercase hex and keywords, double quotes, ::before/::after, font-weight 400/700. Keeps .select2-container's display: inline-block, which the declaration-block-no-duplicate-properties fixer removed as a duplicate of the IE7 *display hack.
- Legacy -webkit-/-moz-linear-gradient(center bottom|top) -> (bottom|top): same direction, standard legacy keyword.
- Move the IE filter above the prefixed background-image fallbacks so the fallbacks are consecutive.
- Put display: inline-block right before the IE7 *display hack (after zoom) for the same reason.
- Drop background-clip: padding-box on .select2-arrow: the background shorthand right after it always reset it.
- Fold the second .select2-container-multi .select2-choices block (min-height) into the first.
- Fix a stray space before a selector.
- Remove the seven empty .ui-icon state rules (their theme images were stripped long ago).
- black -> #000.
- Keep the theme section's repeated .ui-icon and .ui-widget-overlay blocks and line-height: 1.8em (em inherits differently from unitless) with commented stylelint-disable-next-line.
- Wrap the long license header line.
…egacy pcss

- font-family-no-missing-generic-family-keyword ignores dashicons (icon font).
- no-descending-specificity is off for src/resources/pcss: the legacy jQuery UI / Select2 / datepicker styles depend on source order.
- select2-wordpress.pcss gets a comment explaining why the empty file stays (no-empty-source).
…oups

Comments above the @import and @custom-variant groups keep them visually separate now that stylelint disallows blank lines between blockless at-rules. The Tailwind import lines themselves are unchanged.
Base automatically changed from fix/js-lint to main October 17, 2026 18:55
@bordoni
bordoni merged commit 6d79144 into main Oct 17, 2026
4 of 5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant