@keypuncherlabs/style-accelerator

style-accelerator

Convert a W3C Design Tokens (DTCG) file into a scoped variables.css — one CSS scope per context (e.g. :root, .dark, .light). Token references are resolved to literal values, and every non-base context is emitted as an override-only block.

The core is isomorphic (browser / edge / Node) and imports no node:*. An optional Node entry and a CLI add file-system conveniences for build-time generation.

Install

npm install @keypuncherlabs/style-accelerator

Usage

Core — tokensToCss (isomorphic, no file system)

import { tokensToCss, type DtcgNode } from "@keypuncherlabs/style-accelerator"

const css: string = tokensToCss(tokens)
const hexCss = tokensToCss(tokens, { colorFormat: "hex" })

Node — generateVariablesCss (reads/writes files)

The tokens file is always read from tokens.json at the project root — its name and location are fixed and not configurable.

import { generateVariablesCss } from "@keypuncherlabs/style-accelerator/node"

// reads ./tokens.json, writes ./variables.css
await generateVariablesCss()

CLI

style-accelerator build [options]

Auto-loads a radium.json config from the working directory when present. Run style-accelerator --help for all options.

API

• Core (.): tokensToCss, emitCss, resolveCssOptions, getContexts, formatContextsModule, getFonts, formatFontsModule, the DEFAULT_CONTEXTS / DEFAULT_NAME_EXTENSION defaults, plus the related types.
• Node (./node): everything above, plus generateVariablesCss and resolveOptions.

License

MIT