Add stylelint for CSS not covered by Biome

.pre-commit-config.yaml

@@ -99,6 +99,25 @@ repos:
         files: ^demo-site/.*\.(ts|tsx|js|mjs|cjs)$
         exclude: ^demo-site/dist/
         pass_filenames: false
+      # Stylelint lints CSS that Biome doesn't reach: the <style> blocks inside
+      # extension/src/*.html and the demo-site stylesheet. Each hook globs via
+      # its package script (pass_filenames: false), so the regex only decides
+      # when to invoke. docs/ has no hook here — the pre-commit CI job installs
+      # only extension + demo-site deps; docs CSS is covered by the docs CI check.
+      - id: stylelint
+        name: Stylelint (extension — popup/options CSS)
+        language: system
+        entry: bash -c 'cd extension && bun run lint:stylelint'
+        files: ^extension/src/.*\.(css|html)$
+        exclude: ^extension/dist/|\.generated\.
+        pass_filenames: false
+      - id: stylelint-demo-site
+        name: Stylelint (demo-site CSS)
+        language: system
+        entry: bash -c 'cd demo-site && bun run lint:stylelint'
+        files: ^demo-site/src/.*\.css$
+        exclude: ^demo-site/dist/
+        pass_filenames: false
 
   - repo: https://github.com/astral-sh/ruff-pre-commit
     rev: v0.15.16

demo-site/package.json

@@ -9,7 +9,9 @@
     "build": "tsc -b && vite build",
     "preview": "vite preview",
     "lint:eslint": "eslint .",
-    "check": "biome check . && eslint ."
+    "lint:stylelint": "stylelint \"src/**/*.css\"",
+    "lint:stylelint:fix": "stylelint \"src/**/*.css\" --fix",
+    "check": "biome check . && eslint . && stylelint \"src/**/*.css\""
   },
   "dependencies": {
     "react": "^19.2.7",
@@ -26,6 +28,9 @@
     "eslint": "^10.4.1",
     "eslint-plugin-unicorn": "^64.0.0",
     "globals": "^17.6.0",
+    "stylelint": "^17.13.0",
+    "stylelint-config-standard": "^40.0.0",
+    "stylelint-config-tailwindcss": "^1.0.1",
     "tailwindcss": "^4.0.6",
     "typescript": "^6.0.3",
     "typescript-eslint": "^8.60.1",

demo-site/stylelint.config.js

@@ -0,0 +1,12 @@
+// Copyright (c) 2026 PixieBrix, Inc.
+// Licensed under PolyForm Shield 1.0.0 — see LICENSE.
+
+// Stylelint lints the demo-site CSS. stylelint-config-tailwindcss teaches the
+// standard config about Tailwind's at-rules (@import "tailwindcss", @theme,
+// @apply, @utility) so they aren't flagged as unknown.
+
+/** @type {import("stylelint").Config} */
+export default {
+  extends: ["stylelint-config-standard", "stylelint-config-tailwindcss"],
+  ignoreFiles: ["dist/**", "node_modules/**"],
+};

docs/package.json

@@ -13,7 +13,9 @@
     "dev": "astro dev",
     "build": "astro build",
     "preview": "astro preview",
-    "check": "astro check && biome check .",
+    "check": "astro check && biome check . && stylelint \"src/**/*.astro\"",
+    "lint:stylelint": "stylelint \"src/**/*.astro\"",
+    "lint:stylelint:fix": "stylelint \"src/**/*.astro\" --fix",
     "astro": "astro"
   },
   "dependencies": {
@@ -24,6 +26,9 @@
   "devDependencies": {
     "@astrojs/check": "^0.9.9",
     "@biomejs/biome": "2.4.16",
+    "postcss-html": "^1.8.1",
+    "stylelint": "^17.13.0",
+    "stylelint-config-standard": "^40.0.0",
     "typescript": "^6.0.3"
   }
 }

docs/src/components/SocialIcons.astro

@@ -30,14 +30,17 @@ import Default from "@astrojs/starlight/components/SocialIcons.astro";
     background: var(--sl-color-gray-6, transparent);
     transition: background-color 0.15s ease, border-color 0.15s ease;
   }
+
   .star-cta:hover {
     background: var(--sl-color-gray-5);
     border-color: var(--sl-color-gray-4);
   }
-  @media (max-width: 50rem) {
+
+  @media (width <= 50rem) {
     .star-cta span {
       display: none;
     }
+
     .star-cta {
       padding: 0.3rem;
       border-radius: 999px;

docs/stylelint.config.js

@@ -0,0 +1,22 @@
+// Copyright (c) 2026 PixieBrix, Inc.
+// Licensed under PolyForm Shield 1.0.0 — see LICENSE.
+
+// Stylelint lints the scoped <style> blocks in the Astro components. Biome
+// covers the .ts/.tsx/.json under docs/, but not CSS embedded in .astro files;
+// postcss-html extracts those <style> blocks. Custom properties are skipped
+// because the components consume Starlight's `--sl-*` design tokens.
+
+/** @type {import("stylelint").Config} */
+export default {
+  extends: ["stylelint-config-standard"],
+  ignoreFiles: ["dist/**", "node_modules/**", ".astro/**"],
+  rules: {
+    "custom-property-pattern": null,
+  },
+  overrides: [
+    {
+      files: ["**/*.astro"],
+      customSyntax: "postcss-html",
+    },
+  ],
+};

extension/eslint.config.js

@@ -32,6 +32,7 @@ export default tseslint.config(
       "src/**/*.generated.*",
       "eslint-rules/**",
       "eslint.config.js",
+      "stylelint.config.js",
       "jest.config.cjs",
     ],
   },

extension/package.json

@@ -31,12 +31,14 @@
     "clean": "rm -rf dist",
     "test": "jest",
     "test:coverage": "jest --coverage --coverageReporters=text-summary",
-    "check": "biome check . && eslint .",
-    "check:fix": "biome check --write . && eslint . --fix",
+    "check": "biome check . && eslint . && stylelint \"src/**/*.{css,html}\"",
+    "check:fix": "biome check --write . && eslint . --fix && stylelint \"src/**/*.{css,html}\" --fix",
     "format": "biome format --write .",
-    "lint": "biome lint . && eslint .",
+    "lint": "biome lint . && eslint . && stylelint \"src/**/*.{css,html}\"",
     "lint:eslint": "eslint .",
     "lint:eslint:fix": "eslint . --fix",
+    "lint:stylelint": "stylelint \"src/**/*.{css,html}\"",
+    "lint:stylelint:fix": "stylelint \"src/**/*.{css,html}\" --fix",
     "knip": "knip",
     "typecheck": "tsc --noEmit && tsc -p tsconfig.test.json --noEmit",
     "preflight": "bun run build-site-data && bun run build-injection-patterns && bun run check && bun run typecheck && bun run knip && bun run test:coverage"
@@ -81,6 +83,9 @@
     "jest-webextension-mock": "^4.1.1",
     "js-yaml": "^4.2.0",
     "knip": "^6.16.0",
+    "postcss-html": "^1.8.1",
+    "stylelint": "^17.13.0",
+    "stylelint-config-standard": "^40.0.0",
     "ts-jest": "^29",
     "type-fest": "^5.7.0",
     "typescript": "^6.0.3",