Skip to content

feat: add CSS custom properties export format (--format css-vars)#109

Open
mvanhorn wants to merge 1 commit into
google-labs-code:mainfrom
mvanhorn:feat/15-css-vars-export-format
Open

feat: add CSS custom properties export format (--format css-vars)#109
mvanhorn wants to merge 1 commit into
google-labs-code:mainfrom
mvanhorn:feat/15-css-vars-export-format

Conversation

@mvanhorn

Copy link
Copy Markdown
Contributor

Summary

Adds a css-vars export target so design.md export --format css-vars DESIGN.md emits 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 dtcg and Tailwind exports. Scope here is the core format plus --prefix; dark-theme / media-query variants are deferred as the issue notes.

Changes

  • New emitter under packages/cli/src/linter/css-vars/ (spec.ts, handler.ts, serialize.ts) following the DtcgEmitterHandler pattern: a pure execute(state) maps colors, spacing, and rounded to --<group>-<name> declarations, and serializeCssVars renders the :root block.
  • Wired into export.ts: css-vars added to the FORMATS enum, a new branch mirroring the other formats, and an optional --prefix arg threaded into the serializer (default emits --color-...).
  • Re-exported the handler, serializer, and result type from linter/index.ts.
  • Nested token keys flatten to dotted names (e.g. background.light); those dots are collapsed to hyphens so the emitted property name is valid CSS.

Sample output (--prefix ds):

:root {
  --ds-color-surface: #f9f9ff;
  --ds-spacing-unit: 8px;
  --ds-rounded-sm: 0.25rem;
}

Testing

  • bun test in packages/cli: 289 pass, 1 skip, 0 fail
  • bun run lint (tsc --noEmit): clean
  • New unit tests cover colors, spacing/rounded units, --prefix, nested-name hyphenation, and empty input; a command-level test covers a --format css-vars round-trip plus the invalid-format exit-code-1 path.

Fixes #15

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.

Feature: add CSS custom properties export (--format css-vars) for native CSS consumers

1 participant