codebend3r · codebend3r · Sep 5, 2026 · Sep 5, 2026
diff --git a/.claude/skills/pr-format/SKILL.md b/.claude/skills/pr-format/SKILL.md
@@ -23,7 +23,7 @@ This skill is the source of truth for PR text and **overrides** the default PR g
 
 ```
 CRMR: add `kind` property to learning modules
-CRMR: swap to the `oxlint`/`oxfmt`/`tsgo`/`gale` toolchain
+CRMR: swap to the `oxlint`/`oxfmt`/`tsgo`/`stylelint` toolchain
 CRMR: split `rust` module into `rust-1/2/3` by difficulty
 ```
 
@@ -183,7 +183,7 @@ Title: Swap toolchain, add PR-only CI, and raise function coverage past 50%
 This PR swaps the project over to a faster toolchain and improves our test
 coverage. It also changes when CI runs.
 
-- Swapped to the oxlint/oxfmt/tsgo/gale toolchain.
+- Swapped to the oxlint/oxfmt/tsgo/stylelint toolchain.
 - CI now triggers on pull_request instead of push.
 - Added unit tests for queries.ts and the four zustand stores.
 
@@ -200,14 +200,14 @@ Violations: missing `CRMR:` title prefix, `## Summary` and `## Test plan` (not i
 **Right:**
 
 ```
-Title: CRMR: swap to the `oxlint`/`oxfmt`/`tsgo`/`gale` toolchain and cover stores with tests
+Title: CRMR: swap to the `oxlint`/`oxfmt`/`tsgo`/`stylelint` toolchain and cover stores with tests
 ```
 
 ```markdown
 ## Changes
 
 - replace `eslint` with `oxlint --type-aware` (via `oxlint-tsgolint`); delete `eslint.config.js`
-- format with `oxfmt`; typecheck via `tsgo`; lint CSS with `@lyricalstring/gale`
+- format with `oxfmt`; typecheck via `tsgo`; lint CSS with `stylelint`
 - rename `check.yml` to `ci.yml`; trigger on `pull_request` only, add `concurrency`, Node from `.nvmrc`
 - `vite.config.ts` sets `reporters: ["dot"]`; add `@vitest/coverage-v8` and a `test:coverage` script
 - unit tests for `src/lib/queries.ts` and `sessionStore`/`authStore`/`themeStore`/`uiStore`

diff --git a/bun.lock b/bun.lock
diff --git a/package.json b/package.json
@@ -9,8 +9,8 @@
     "preview": "vite preview",
     "lint:ts": "oxlint --type-aware",
     "lint:ts:fix": "oxlint --type-aware --fix",
-    "lint:css": "gale \"src/**/*.css\" \"src/**/*.scss\"",
-    "lint:css:fix": "gale --fix \"src/**/*.css\" \"src/**/*.scss\"",
+    "lint:css": "stylelint \"src/**/*.css\" \"src/**/*.scss\"",
+    "lint:css:fix": "stylelint --fix \"src/**/*.css\" \"src/**/*.scss\"",
     "typecheck": "tsgo --noEmit",
     "test": "vitest run",
     "clean": "rm -rf dist",
@@ -37,7 +37,6 @@
     "zustand": "5.0.13"
   },
   "devDependencies": {
-    "@lyricalstring/gale": "0.1.5",
     "@types/react": "18.3.29",
     "@types/react-dom": "18.3.7",
     "@typescript/native-preview": "7.0.0-dev.20260707.2",
@@ -50,6 +49,9 @@
     "oxlint": "1.77.0",
     "oxlint-tsgolint": "7.0.2001",
     "playwright": "1.60.0",
+    "stylelint": "17.15.0",
+    "stylelint-config-standard": "40.0.0",
+    "stylelint-config-standard-scss": "17.0.0",
     "typescript": "5.9.3",
     "vite": "5.4.21",
     "vitest": "2.1.9"
@@ -60,12 +62,9 @@
       "oxfmt"
     ],
     "*.{css,scss}": [
-      "gale --fix",
+      "stylelint --fix",
       "oxfmt"
     ],
     "*.{json,jsonc,json5,md,mdx,yml,yaml,toml,html}": "oxfmt"
-  },
-  "trustedDependencies": [
-    "@lyricalstring/gale"
-  ]
+  }
 }
diff --git a/src/components/Button.module.css b/src/components/Button.module.css
@@ -28,6 +28,7 @@
   background: var(--color-accent);
   color: white;
 }
+
 .primary:hover:not(:disabled) {
   background: var(--color-accent-hover);
 }
@@ -37,6 +38,7 @@
   color: var(--color-text);
   border-color: var(--color-border);
 }
+
 .secondary:hover:not(:disabled) {
   border-color: var(--color-accent);
   color: var(--color-accent);
@@ -46,6 +48,7 @@
   background: transparent;
   color: var(--color-text);
 }
+
 .ghost:hover:not(:disabled) {
   background: var(--color-border);
 }
@@ -55,6 +58,7 @@
   color: var(--color-incorrect);
   border-color: var(--color-incorrect);
 }
+
 .danger:hover:not(:disabled) {
   background: var(--color-incorrect);
   color: white;

diff --git a/src/components/Card.module.css b/src/components/Card.module.css
@@ -3,5 +3,5 @@
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   padding: var(--space-5);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 3%);
 }
diff --git a/src/components/Header.module.css b/src/components/Header.module.css
@@ -70,9 +70,11 @@
   .header {
     padding: var(--space-3) var(--space-4);
   }
+
   .email {
     display: none;
   }
+
   .signOutLabel {
     display: none;
   }

diff --git a/src/components/OnboardingModal.module.css b/src/components/OnboardingModal.module.css
@@ -1,7 +1,7 @@
 .overlay {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgb(0 0 0 / 50%);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -16,7 +16,7 @@
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   padding: var(--space-5);
-  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 12px 32px rgb(0 0 0 / 25%);
 }
 
 .title {

diff --git a/src/components/Sidebar.module.css b/src/components/Sidebar.module.css
@@ -203,22 +203,26 @@
     z-index: 100;
     border-right: 1px solid var(--color-border);
   }
+
   .sidebar[data-open="true"] {
     transform: translateX(0);
   }
+
   .sidebar[data-open="false"] {
     width: 280px;
     border-right-width: 1px;
   }
+
   .nav {
     width: 280px;
     padding-top: var(--space-5);
   }
+
   .backdrop {
     display: block;
     position: fixed;
     inset: 0;
-    background: rgba(0, 0, 0, 0.4);
+    background: rgb(0 0 0 / 40%);
     z-index: 99;
     cursor: pointer;
   }

diff --git a/src/routes/AllModulesPage/AllModulesPage.module.css b/src/routes/AllModulesPage/AllModulesPage.module.css
@@ -79,7 +79,7 @@
 
 .cardLink:hover .card {
   transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 4px 12px rgb(0 0 0 / 6%);
 }
 
 .badgeRow {

diff --git a/src/routes/DesignSystem/DesignSystem.module.css b/src/routes/DesignSystem/DesignSystem.module.css
@@ -117,7 +117,7 @@
 .typeSample {
   font-size: 26px;
   line-height: 1.3;
-  word-break: break-word;
+  overflow-wrap: break-word;
 }
 
 .spaceStack {

diff --git a/src/routes/HomePage/HomePage.module.css b/src/routes/HomePage/HomePage.module.css
@@ -89,7 +89,7 @@
 
 .cardLink:hover .card {
   transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 4px 12px rgb(0 0 0 / 6%);
 }
 
 .badgeRow {

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -1,6 +1,6 @@
 :root {
   --color-bg: #f6f6f4;
-  --color-surface: #ffffff;
+  --color-surface: #fff;
   --color-text: #1a1a1a;
   --color-text-muted: #6b6b6b;
   --color-border: #e2e2dd;
@@ -16,7 +16,7 @@
   --color-badge-dynamic-bg: #d1fae5;
   --color-badge-dynamic-fg: #065f46;
 
-  --color-code-bg: rgba(27, 31, 35, 0.06);
+  --color-code-bg: rgb(27 31 35 / 6%);
   --color-code-block-bg: #f6f8fa;
 
   --hljs-text: var(--color-text);
@@ -42,8 +42,8 @@
   --space-7: 48px;
 
   --font-sans:
-    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
-  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
+  --font-mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
   --font-display: "Space Grotesk Variable", "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
 
   color-scheme: light;
@@ -57,17 +57,17 @@
   --color-border: #30363d;
   --color-accent: #58a6ff;
   --color-accent-hover: #79c0ff;
-  --color-accent-soft: rgba(88, 166, 255, 0.12);
+  --color-accent-soft: rgb(88 166 255 / 12%);
   --color-correct: #3fb950;
-  --color-correct-bg: rgba(63, 185, 80, 0.12);
+  --color-correct-bg: rgb(63 185 80 / 12%);
   --color-incorrect: #f85149;
-  --color-incorrect-bg: rgba(248, 81, 73, 0.12);
-  --color-badge-static-bg: rgba(139, 148, 255, 0.18);
+  --color-incorrect-bg: rgb(248 81 73 / 12%);
+  --color-badge-static-bg: rgb(139 148 255 / 18%);
   --color-badge-static-fg: #c4b5fd;
-  --color-badge-dynamic-bg: rgba(63, 185, 80, 0.18);
+  --color-badge-dynamic-bg: rgb(63 185 80 / 18%);
   --color-badge-dynamic-fg: #7ee787;
 
-  --color-code-bg: rgba(110, 118, 129, 0.4);
+  --color-code-bg: rgb(110 118 129 / 40%);
   --color-code-block-bg: #0d1117;
 
   --hljs-text: var(--color-text);

diff --git a/stylelint.config.js b/stylelint.config.js
@@ -0,0 +1,29 @@
+export default {
+  extends: ["stylelint-config-standard"],
+  overrides: [
+    {
+      files: ["**/*.scss"],
+      extends: ["stylelint-config-standard-scss"],
+    },
+    {
+      // CSS module class names are camelCase so they read as identifiers at the
+      // import site; global sheets are exempt because they carry third-party
+      // names we don't own (`.hljs-*`).
+      files: ["**/*.module.{css,scss}"],
+      rules: {
+        "selector-class-pattern": "^[a-z][a-zA-Z0-9]*$",
+      },
+    },
+  ],
+  rules: {
+    "selector-class-pattern": null,
+    // range syntax (`width <= 640px`) is newer than Vite's default build target
+    // (Safari 14), so keep the prefixed `max-width` form
+    "media-feature-range-notation": "prefix",
+    // blank lines group the design tokens in `global.css` by kind
+    "custom-property-empty-line-before": null,
+    // the base/variant CSS module pattern (`.filter` + `.filterActive`) trips
+    // this without an actual cascade conflict
+    "no-descending-specificity": null,
+  },
+};