feat: add mint-ds apply to codemod source CSS to tokens (#35)#97
Merged
Conversation
Deterministic, no-LLM codemod that rewrites raw color/spacing/font-family values in source CSS to reference the generated design-token CSS variables. Exact matches always; near-duplicate/off-scale snaps behind --fuzzy (with /* was X */ comments). Writes in place, guarded by a git-clean check (--force bypasses). Skips comments/url()/var(), never node_modules, only source extensions, idempotent. --target css-var only in slice 1. New modules: lib/css-values.mjs, lib/token-index.mjs, lib/css-codemod.mjs, lib/git-status.mjs (all added to published files + check:pack).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #35. Adds
mint-ds apply <path>— the final step of the pipeline: audit → curate → export → apply.What it does
Rewrites raw color/spacing/font-family values in source CSS/SCSS to reference the generated design-token CSS variables, so adopting the tokens becomes a reviewable migration commit instead of manual find-and-replace.
raw value → tokenmap is derived locally by normalizing each literal and matching it against the tokens file (colors against the 50–900 scale, spacing against the scale, font-family exact).color: #1976d2→var(--color-primary); other shades →var(--color-primary-600).#1976D2,rgb(25, 118, 210)all match.padding: 8px→var(--spacing-2);font-family: Inter, sans-serif→var(--font-body).--fuzzy(opt-in): snaps near-duplicate colors / off-scale spacing to the nearest token with a/* was 13px */comment. Off by default → exact-only is zero-false-positive.--force.--dry-runpreviews without writing.url()/ existingvar(), nevernode_modules, only source extensions, fully idempotent.--target css-varonly in slice 1 (the flag errors on other values). CSS-in-JS / tailwind targets are deferred.Design & scope
Spec and slice-1 boundaries are in
docs/superpowers/specs/2026-07-17-mint-apply-codemod-design.md. Known slice-1 limitations (documented + tested): HTML<style>blocks are rewritten but inlinestyle="..."attributes are not; the emitted var names follow the export prompt's naming convention (drift risk noted).New modules (all added to published
files+ guarded bycheck:pack)lib/css-values.mjs,lib/token-index.mjs,lib/css-codemod.mjs,lib/git-status.mjs.Testing
Built test-first (TDD). 47 feature tests + full suite green;
check:packgreen; verified end-to-end on a real tokens file.