Fix CSS lint with a Tailwind v4 aware stylelint config

.distignore

@@ -29,6 +29,7 @@ CLAUDE.md
 webpack.config.js
 tailwind.config.js
 postcss.config.js
+.stylelintrc.js
 
 # Composer and Package files.
 composer.json

.stylelintrc.js

@@ -0,0 +1,69 @@
+/**
+ * Stylelint config for `bun run lint:css` (`wp-scripts lint-style`).
+ *
+ * A JS file rather than `.stylelintrc.json` so every override can carry a comment
+ * (stylelint parses JSON configs strictly, without comments).
+ *
+ * Base: the same `scss-stylistic` preset `wp-scripts` uses when a project has no config
+ * of its own. The SCSS parser also handles the postcss-nested syntax in the legacy
+ * `src/resources/pcss/*.pcss` files (`&` means "this element").
+ *
+ * Build output (`build/`) and `vendor/` stay ignored through wp-scripts' default
+ * `.stylelintignore` (used while the project has none of its own).
+ */
+module.exports = {
+	extends: '@wordpress/stylelint-config/scss-stylistic',
+	rules: {
+		// Same as the wp-scripts default config: class names come from WordPress core,
+		// jQuery UI, Select2 and Tailwind, none of which follow one pattern.
+		'selector-class-pattern': null,
+
+		// Tailwind v4 at-rules used by `src/resources/packages/admin/styles/globals.css`
+		// (@config, @source, @theme, @custom-variant), plus the rest of the v4 set.
+		// `@tailwindcss/postcss` consumes them at build time.
+		'scss/at-rule-no-unknown': [
+			true,
+			{
+				ignoreAtRules: [
+					'config',
+					'source',
+					'theme',
+					'utility',
+					'variant',
+					'custom-variant',
+					'apply',
+					'reference',
+					'plugin',
+				],
+			},
+		],
+
+		// Tailwind's @config and @source directives sit above its @import lines. They are
+		// build-time directives that emit no CSS, so they don't invalidate the imports.
+		'no-invalid-position-at-import-rule': [
+			true,
+			{
+				ignoreAtRules: [ 'config', 'source' ],
+			},
+		],
+
+		// Dashicons is WordPress's icon font. A generic fallback family would render
+		// the glyph's code point as a letter instead of the icon.
+		'font-family-no-missing-generic-family-keyword': [
+			true,
+			{
+				ignoreFontFamilies: [ 'dashicons' ],
+			},
+		],
+	},
+	overrides: [
+		{
+			// Legacy jQuery UI, Select2 and datepicker styles rely on source order:
+			// reordering rules to satisfy this rule would change the cascade.
+			files: [ 'src/resources/pcss/**/*.pcss' ],
+			rules: {
+				'no-descending-specificity': null,
+			},
+		},
+	],
+};

readme.txt

@@ -177,6 +177,7 @@ For help with or questions about FakerPress, visit the [WordPress Plugin Forums]
 * Tests - Add Jest coverage for the admin, REST payload tests for every generate endpoint, and build the JS before WPUnit in CI. [[#187](https://github.com/bordoni/fakerpress/pull/187)]
 * Tweak - Format the JavaScript and TypeScript sources with Prettier; no behaviour change. [[#235](https://github.com/bordoni/fakerpress/pull/235)]
 * Tweak - Clear every JavaScript lint and TypeScript error: WordPress package types, the `@fp` import alias in ESLint, the zod v4 meta-rule schema, `…` in translated strings, and `let`/`const` in the legacy jQuery scripts. [[#236](https://github.com/bordoni/fakerpress/pull/236)]
+* Tweak - Clear every stylelint error in the admin styles with a Tailwind v4 aware config; the compiled CSS is unchanged apart from dropping obsolete `-moz-` gradients and empty rules. [[#237](https://github.com/bordoni/fakerpress/pull/237)]
 
 = 0.9.2 — 20 of July 2026 =
 

src/resources/packages/admin/styles/globals.css

@@ -3,15 +3,18 @@
 /* Limit Tailwind's auto-detection to source packages only. */
 @source "../../**/*.{tsx,ts,jsx,js,html,php}";
 
+/* Partial imports only: the full "tailwindcss" import adds a global reset. */
 @import "tailwindcss/theme" prefix(fp);
 @import "tailwindcss/utilities" prefix(fp);
 
+/* Dark variant: anything inside a .dark ancestor. */
 @custom-variant dark (&:is(.dark *));
 
 /*
  * Bridge shadcn/ui semantic tokens → Tailwind v4 color namespace.
- * Tailwind utilities (e.g. fp:bg-primary) reference --color-primary via --fp-color-primary,
- * which resolves to var(--primary) — defined per-element below.
+ * Tailwind utilities (e.g. fp:bg-primary) reference --color-primary via
+ * --fp-color-primary, which resolves to var(--primary) — defined per-element
+ * below.
  */
 @theme inline {
 	--color-background: var(--background);
@@ -54,38 +57,41 @@
 
 /*
  * Declare internal FakerPress layers for cascade organization.
- * Layer priority (highest → lowest within fp-* layers): fp-utilities > fp-components > fp-base.
- * NOTE: The WP-admin reset below remains UNLAYERED so it can compete with WordPress admin's own
- * unlayered CSS through specificity + source order (our sheet loads after WP admin).
+ * Layer priority (highest → lowest within fp-* layers):
+ * fp-utilities > fp-components > fp-base.
+ * NOTE: The WP-admin reset below remains UNLAYERED so it can compete with
+ * WordPress admin's own unlayered CSS through specificity + source order
+ * (our sheet loads after WP admin).
  */
 @layer fp-base, fp-components, fp-utilities;
 
 @layer fp-base {
+
 	/*
 	 * Theme variables scoped to the FakerPress React root.
-	 * Custom properties are not subject to normal layer priority — they cascade by specificity
-	 * and source order like any other declaration, so keeping them in fp-base is just
-	 * for organizational clarity.
+	 * Custom properties are not subject to normal layer priority — they
+	 * cascade by specificity and source order like any other declaration, so
+	 * keeping them in fp-base is just for organizational clarity.
 	 */
 	#fakerpress-react-root {
 		--background: oklch(1 0 0);
-		--foreground: oklch(0.24 0.010 241);
+		--foreground: oklch(0.24 0.01 241);
 		--card: oklch(1 0 0);
-		--card-foreground: oklch(0.24 0.010 241);
+		--card-foreground: oklch(0.24 0.01 241);
 		--popover: oklch(1 0 0);
-		--popover-foreground: oklch(0.24 0.010 241);
+		--popover-foreground: oklch(0.24 0.01 241);
 		--primary: oklch(0.49 0.12 241);
 		--primary-foreground: oklch(0.985 0 0);
 		--secondary: oklch(0.97 0 0);
-		--secondary-foreground: oklch(0.24 0.010 241);
+		--secondary-foreground: oklch(0.24 0.01 241);
 		--muted: oklch(0.97 0 0);
-		--muted-foreground: oklch(0.40 0.008 245);
+		--muted-foreground: oklch(0.4 0.008 245);
 		--accent: oklch(0.97 0 0);
-		--accent-foreground: oklch(0.24 0.010 241);
+		--accent-foreground: oklch(0.24 0.01 241);
 		--destructive: oklch(0.577 0.245 27.325);
 		--destructive-foreground: oklch(0.577 0.245 27.325);
-		--border: oklch(0.60 0.006 247);
-		--input: oklch(0.60 0.006 247);
+		--border: oklch(0.6 0.006 247);
+		--input: oklch(0.6 0.006 247);
 		--ring: oklch(0.49 0.12 241);
 		--radius: 0.3rem;
 		--chart-1: oklch(0.646 0.222 41.116);
@@ -105,10 +111,10 @@
 }
 
 /*
- * WordPress admin reset — UNLAYERED so it competes with WP admin's unlayered CSS
- * via source order (our sheet loads after WP admin styles).
- * :where() contributes zero specificity, so Tailwind utilities (0,2,0) always win
- * over these resets.
+ * WordPress admin reset — UNLAYERED so it competes with WP admin's unlayered
+ * CSS via source order (our sheet loads after WP admin styles).
+ * :where() contributes zero specificity, so Tailwind utilities (0,2,0) always
+ * win over these resets.
  */
 
 /*
@@ -120,7 +126,7 @@
 	box-sizing: border-box;
 	border-width: 0;
 	border-style: solid;
-	border-color: currentColor;
+	border-color: currentcolor;
 }
 
 /*
@@ -140,7 +146,8 @@
 }
 
 /*
- * Links — WP admin sets color (#2271b1), text-decoration, transition, and outline.
+ * Links — WP admin sets color (#2271b1), text-decoration, transition, and
+ * outline.
  */
 :where([data-fp-root]) a {
 	color: inherit;
@@ -206,7 +213,7 @@
 	line-height: inherit;
 	border-width: 0;
 	border-style: solid;
-	border-color: currentColor;
+	border-color: currentcolor;
 	border-radius: 0;
 	background-color: transparent;
 	color: inherit;
@@ -240,16 +247,17 @@
 :where([data-fp-root]) input[type="radio"]:focus,
 :where([data-fp-root]) select:focus,
 :where([data-fp-root]) textarea:focus {
-	border-color: currentColor;
+	border-color: currentcolor;
 	box-shadow: none;
 	outline: none;
 	color: inherit;
 }
 
 /*
- * Rule number / remove / add controls: WordPress's own `.button`, so they follow the admin colour
- * scheme and disabled state, sized like the stable generator's 22×23 rule buttons. The ID keeps
- * this above `.wp-core-ui .button` (0,2,0), which Tailwind utilities (0,1,0) cannot beat.
+ * Rule number / remove / add controls: WordPress's own `.button`, so they
+ * follow the admin colour scheme and disabled state, sized like the stable
+ * generator's 22×23 rule buttons. The ID keeps this above
+ * `.wp-core-ui .button` (0,2,0), which Tailwind utilities (0,1,0) cannot beat.
  */
 #fakerpress-react-root .fp-rule-action.button {
 	display: block;

src/resources/pcss/admin.pcss

@@ -2,46 +2,47 @@
 =============================================*/
 
 .fp-link-footer {
-    text-decoration: none;
-    margin-right: 5px;
-    margin-left: 5px;
+	text-decoration: none;
+	margin-right: 5px;
+	margin-left: 5px;
 
-    &:hover {
-        text-decoration: underline;
+	&:hover {
+		text-decoration: underline;
 
-        span {
-            text-decoration: none;
-        }
-    }
+		span {
+			text-decoration: none;
+		}
+	}
 }
 
 
 .select2-drop {
-    padding-top: 8px;
-
-    &.select2-drop-active {
-        border: 2px solid #2271b1;
-        border-top: 0;
-    }
-
-    .select2-search {
-        &:after {
-            content: "\f179";
-            display: block;
-            position: absolute;
-            top: 9px;
-            text-align: center;
-            font: normal 20px/1 dashicons !important;
-            right: 13px;
-            speak: never;
-            -webkit-font-smoothing: antialiased;
-            -moz-osx-font-smoothing: grayscale;
-        }
-
-        input[type="text"] {
-            background: #fff !important;
-            padding-right: 30px;
-        }
-    }
+	padding-top: 8px;
+
+	&.select2-drop-active {
+		border: 2px solid #2271b1;
+		border-top: 0;
+	}
+
+	.select2-search {
+
+		&::after {
+			content: "\f179";
+			display: block;
+			position: absolute;
+			top: 9px;
+			text-align: center;
+			font: 400 20px/1 dashicons !important;
+			right: 13px;
+			speak: never;
+			-webkit-font-smoothing: antialiased;
+			-moz-osx-font-smoothing: grayscale;
+		}
+
+		input[type="text"] {
+			background: #fff !important;
+			padding-right: 30px;
+		}
+	}
 }