css-design-token-mining

# 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 npx codemod run css-design-token-mining -t /path/to/your/project ``` ### 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