Skip to content

CSS governance: styles.css entry-only split + contracts (succeeds #264) - #269

Merged
jackwener merged 4 commits into
mainfrom
yuejing/pr264-fixup
Jun 26, 2026
Merged

CSS governance: styles.css entry-only split + contracts (succeeds #264)#269
jackwener merged 4 commits into
mainfrom
yuejing/pr264-fixup

Conversation

@jackwener

Copy link
Copy Markdown
Member

Summary

Successor to #264 (QuinnWan/@somewan820's CSS governance rebase). Includes everything in #264 + 2 small fixup commits for issues that turned up running the full contract suite.

What this PR does

  • Shrinks apps/desktop/src/renderer/styles.css from a 14k-line monolith to a 66-line entry file (only @import, @source, @theme inline).
  • Splits all rules into apps/desktop/src/renderer/styles/*.css (base, sidebar, onboarding, module-pages, chat-header, chat-message, composer, daily-review, health-center, markdown-link, permission-center, reasoning-panel, theme-glass, tool-output, tool-stream) and styles/settings/*.css (bot, connection, form, models, nav-sidebar, provider-editor, theme-preview).
  • Adds CSS test helpers (css-test-helpers.ts, contract-css-helpers.ts) so every renderer-CSS contract test reads the aggregated @import chain via readAllRendererCss(), not a single file.
  • Adds new contract tests: renderer-styles-entry-contract.test.ts (entry-only invariant), renderer-important-audit-contract.test.ts (allowlisted !important sites).
  • Adds scripts/check-dead-css.mjs + baseline json (CI guard against dead-CSS count growing).
  • Adds docs/frontend-css-governance.md.

Why succeed instead of merging #264

QuinnWan's rebase addressed both critical selector-state regressions I flagged in my first review ([data-checked] for ChoiceCard, [data-pressed] for SettingsSegmented). But running the full contract suite on the rebased branch surfaced 2 more issues:

  1. motion-token-converge-contract.test.ts now trips on the legitimate --ease-out-strong: cubic-bezier(...) declaration in maka-tokens.css, because readAllRendererCss() expands the @import chain. Fix: strip TOKEN_DECL from the merged blob before counting (commit 1fd0b09f).
  2. settings-roadmap-cleanup-contract.test.ts trips on an unrelated Daily Review fallback copy edit (SettingsModal.tsx:1598) that doesn't belong in a CSS-governance PR. Fix: revert that one line (commit 519e684e).

After both fixes, all 431 contract tests pass on this branch.

Test plan

  • apps/desktop$ npx tsx --test src/main/__tests__/*-contract.test.ts → 431/431 pass
  • node scripts/check-dead-css.mjs --check → within baseline ✓
  • renderer-style-pruning-contract.test.ts retired-hooks list (17 entries) + orphan guard pass
  • settings-theme-contract.test.ts ChoiceCard + SettingsSegmented invariants pass
  • renderer-styles-entry-contract.test.ts no rule blocks in styles.css pass
  • renderer-style-layer-cascade-contract.test.ts unlayered overrides preserved

Credit: large diff (~14.7k +/14.0k -) is @somewan820's work in #264 — base + 2 commits. My contribution here is the final 2 fixup commits + verification.

Closes #264 (intent-equivalent, with the additional fixes).

somewan820 and others added 4 commits June 26, 2026 16:36
- point contract tests at the real renderer CSS graph
- keep styles.css entry-only and audit !important usage
- split renderer CSS into surface files with guarded layering
- add dead CSS checks and frontend CSS governance guidance
…anded CSS

Follow-up to QuinnWan's styles.css split (PR #264). `readAllRendererCss()`
now expands `@import` chains, so the styles blob includes maka-tokens.css —
including the legitimate `--ease-out-strong: cubic-bezier(0.16, 1, 0.3, 1);`
token declaration. The bare-curve assertion was tripping on the token file's
own definition.

Strip TOKEN_DECL from the merged styles blob (mirroring the same strip the
test already does for the tokens-file branch) so only NON-declaration
spellings count as violations.

Verifies green:
  apps/desktop$ npx tsx --test src/main/__tests__/motion-token-converge-contract.test.ts
…anup contract

PR #264's scope is CSS governance — moving styles.css → styles/*.css split,
adding contract tests, and a dead-CSS script. The settings-roadmap-cleanup
contract pins the Daily Review fallback copy ("当前版本仅本地数字聚合,定时生
成 / LLM 摘要尚未连接到后端。") which an unrelated edit had rewritten to
"…仍以本地汇总为主;…", breaking the existing pin.

Revert the copy to match the pinned vocabulary so the contract stays green
without expanding this PR's footprint into copy edits.
@jackwener
jackwener force-pushed the yuejing/pr264-fixup branch from 519e684 to 79a44fc Compare June 26, 2026 08:37
@jackwener
jackwener merged commit f7202f7 into main Jun 26, 2026
@Astro-Han
Astro-Han deleted the yuejing/pr264-fixup branch July 14, 2026 05:05
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.

2 participants