@styleflow.app/cli

Local-first compiler and React runtime bridge for StyleFlow Figma token artifacts. It turns a Figma token export into a single styleflow.css plus Tailwind theme variables, generated TypeScript unions, a runtime contract and a build report.

Requires Node.js >= 20. Homepage: styleflow.app

Install

# Run without installing
npx @styleflow.app/cli build

# Or add it to a project
npm install -D @styleflow.app/cli

Commands

npx @styleflow.app/cli init
npx @styleflow.app/cli validate
npx @styleflow.app/cli build
npx @styleflow.app/cli watch

styleflow build reads styleflow.config.ts and tokens/styleflow.tokens.json, then writes CSS runtime output, Tailwind theme variables, generated TypeScript unions and a build report to .styleflow/.

For local exploration of an export with known WCAG contrast failures, pass --allow-contrast-warnings to validate, build, or watch. Contrast issues are reported as warnings; build and watch include them in report.json. Schema errors, missing tokens, unresolved aliases and unsupported values remain blocking errors.

Use build: { type: "dev", content: ["./src"] } for the complete runtime contract. For distributable CSS, run with STYLEFLOW_BUILD_TYPE=production in the shell or a project .env file. Production scans each configured content directory, emits selectors found in Ui props or data-* attributes, and follows only their token alias dependencies into the generated CSS. Dynamic prop usage retains the full affected axis. styleflow watch observes production content directories in addition to config, .env and token input.

Runtime classes

StyleFlow base utilities expose two public classes:

<div
  class="sf-layout sf-color"
  data-layout-role="panel"
  data-layout-density="md"
  data-color-tone="main"
  data-color-intensity="2"
>
  ...
</div>

• .sf-layout applies layout decisions: radius, padding and gap.
• .sf-color applies color decisions: border, background and foreground.
• Escape attributes are public and scoped to those classes: data-no-border, data-no-bg, data-no-fg, data-no-gap, data-no-radius, data-no-padding.

Tone and layout-role values come from the project artifact. Public IDs may be renamed; generated project types expose the strict canonical union, while deprecated aliases remain accepted by the 0.2.x runtime. Omitting tone or layout role uses the defaults declared in artifact axes metadata.

0.2.0 is a breaking release candidate: legacy base classes such as .sf-ui, .sf-surface, .sf-control, .sf-field, .sf-badge and .sf-text are no longer generated.

Exports

• @styleflow.app/cli/config: defineStyleFlowConfig.
• @styleflow.app/cli/contracts: structural runtime constants.
• @styleflow.app/cli/format: versioned StyleflowTokensFile types and parser.
• @styleflow.app/cli/ui: typed React Ui primitive emitting sf-layout sf-color by default.

Development output uses the complete public-contract runtime and may trigger the CSS budget warning in report.json; production output is pruned to detected usage.

License

MIT © StyleFlow