feat: add CSS custom properties export format (--format css-vars)#109
Open
mvanhorn wants to merge 1 commit into
Open
feat: add CSS custom properties export format (--format css-vars)#109mvanhorn wants to merge 1 commit into
mvanhorn wants to merge 1 commit into
Conversation
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
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.
Summary
Adds a
css-varsexport target sodesign.md export --format css-vars DESIGN.mdemits a:root { ... }block of CSS custom properties derived from the token set. This makes DESIGN.md tokens directly consumable in native-CSS codebases without Tailwind or any token tooling.Why this matters
Issue #15 asks for a CSS variables export so DESIGN.md is useful outside the Tailwind ecosystem and gives coding agents a direct artifact to apply in native CSS. It complements the existing
dtcgand Tailwind exports. Scope here is the core format plus--prefix; dark-theme / media-query variants are deferred as the issue notes.Changes
packages/cli/src/linter/css-vars/(spec.ts,handler.ts,serialize.ts) following theDtcgEmitterHandlerpattern: a pureexecute(state)mapscolors,spacing, androundedto--<group>-<name>declarations, andserializeCssVarsrenders the:rootblock.export.ts:css-varsadded to theFORMATSenum, a new branch mirroring the other formats, and an optional--prefixarg threaded into the serializer (default emits--color-...).linter/index.ts.background.light); those dots are collapsed to hyphens so the emitted property name is valid CSS.Sample output (
--prefix ds):Testing
bun testinpackages/cli: 289 pass, 1 skip, 0 failbun run lint(tsc --noEmit): clean--prefix, nested-name hyphenation, and empty input; a command-level test covers a--format css-varsround-trip plus the invalid-format exit-code-1 path.Fixes #15