Skip to content

feat(mint): add unused CSS custom properties detection - #113

Draft
nujovich wants to merge 5 commits into
mainfrom
hermes/build/mint-unused-custom-properties
Draft

feat(mint): add unused CSS custom properties detection#113
nujovich wants to merge 5 commits into
mainfrom
hermes/build/mint-unused-custom-properties

Conversation

@nujovich

@nujovich nujovich commented Sep 4, 2026

Copy link
Copy Markdown
Owner

Card: https://github.com/nujovich/mint-radar/issues/22

What: Adds deterministic dead-code analysis for CSS custom properties to Mint. Milestone 1 introduces the UnusedCustomPropertyIssue and UnusedCustomPropertiesAudit types in lib/types.ts, which track every custom property declared (--*) versus every property referenced (var(--*)), and adds an optional unusedCustomProperties field to AuditReport. Later milestones add the parser, CLI wiring with an optional --remove-unused flag, and Tailwind-scale test fixtures.

Why: Tailwind and other utility-heavy projects emit --tw-* and similar custom properties that are never consumed, inflating CSS output and complicating maintenance. No reliable automated tool detects truly-unused custom properties across CSS, HTML, and JS (PurgeCSS and Chrome Coverage both mishandle var() references and dynamically-injected properties). Mint can fill this gap with cross-file reference analysis, reinforcing its positioning as a thorough CSS health auditor.

Milestones

  • Milestone 1 — Add UnusedCustomPropertyIssue and UnusedCustomPropertiesAudit types to lib/types.ts tracking defined (--) vs referenced (var(--)) custom properties, plus unusedCustomProperties field on AuditReport
  • Milestone 2 -- Implement lintUnusedCustomProperties() in lib/css-lint-rules.mjs: walk all --* declarations and var() references, emit the defined-but-unused diff with selectors and cleanup suggestions
  • Milestone 3 — Wire the unused-properties report into bin/mint-ds.mjs CLI output with a dead-variable list and an optional --remove-unused flag
  • Milestone 4 — Add a test fixture with a large Tailwind-style stylesheet (1000+ custom properties) and tests in lib/tests/

How to test:

npm run typecheck
npm test

Milestone 4 detail

Added a Tailwind-style test fixture in lib/__fixtures__/tailwind-custom-properties.css: 1000 custom properties across 20 color palettes (50 shades each), with 750 referenced in utility classes and 250 declared but never used, simulating dead tokens left behind after a palette refactor.

Tests added to lib/__tests__/css-lint-rules.test.mjs (new lintUnusedCustomProperties at scale (Tailwind-style fixture) describe block, 4 tests):

  • Detects all 1000 custom properties declared in the fixture
  • Flags exactly 250 dead tokens left behind by the refactor
  • Separates referenced palettes (red-fuchsia) from the unreferenced tail (pink-zinc)
  • Attributes every dead token to :root with a cleanup suggestion

@nujovich

nujovich commented Sep 7, 2026

Copy link
Copy Markdown
Owner Author

All milestones complete. Ready for review when you are.

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