CSS Design Token Mining
Detect hardcoded CSS values that should become design tokens or CSS custom properties. A detection-only (code-mining) codemod that emits metrics for Codemod Insights.
Problem
Hardcoded CSS values scattered across a codebase lead to:
- Design drift — Near-duplicate values (e.g. 15px, 16px, 17px) that should be one token
- Theme blocking — Hardcoded colors prevent dark mode, branding, and white-labeling
- Maintenance cost — Repeated literals instead of semantic tokens
Solution
The codemod parses CSS and Less files, extracts declarations, and emits the design-token-declarations-collected metric for (property, literal) pairs that appear 2+ times per file.
Usage
bash
Create dashboard in Codemod Insights
Go to app.codemod.com/insights, create a dashboard and a widget, set the source to js-ast-grep, and pick this package from the registry dropdown.
Metrics
- design-token-declarations-collected — Count of (property, literal) pairs that appear 2+ times per file. Cardinalities: family, file, property, literal, property-literal (combined property|literal for single-dimension grouping). Single-occurrence pairs are omitted to reduce cardinality for Codemod Insights.
What Gets Detected
- Repeated literals in token-heavy families (color, spacing, radius, typography, z-index, etc.)
- Excludes var() and calc() values
- Excludes minified CSS and test files
License
Fair Source License