Styleframe Logo
Tooling

CLI Reference

Use the Styleframe CLI to initialize projects and build optimized CSS from your configuration files.

Overview

The Styleframe CLI is a command-line interface that helps you initialize new projects and build production-ready CSS from your Styleframe configuration. It provides a streamlined workflow from project setup to optimized style generation.

Why use the CLI?

The CLI helps you:

  • Quick project setup: Initialize Styleframe configuration and dependencies with a single command.
  • Optimized builds: Generate production-ready CSS from your configuration files.
  • Flexible output: Control where and how your styles are generated.
  • Consistent workflow: Integrate Styleframe into your development and deployment pipelines.

Installation

Install the CLI as a development dependency:

pnpm install -g styleframe

Commands

The CLI provides three primary commands: init for project setup, build for generating CSS output, and dtcg for exporting and importing design tokens in DTCG format.

init

command
styleframe init [options]
Initialize a new Styleframe project in your current directory.

Options

OptionAliasTypeDefaultDescription
--cwd-d, --dirstringprocess.cwd()Directory where the project will be initialized

Usage

styleframe init
  1. Creates a styleframe.config.ts file with basic configuration
  2. Creates or updates tsconfig.json with styleframe includes
  3. Adds all styleframe packages to your package.json dependencies
  4. Detects and configures your framework (Vite or Nuxt), if applicable
  5. Skips creating files that already exist (won't overwrite existing config)
Pro tip: After running init, don't forget to run npm install to install the added dependencies.

build

command
styleframe build [entry] [options]
Build your Styleframe project and generate CSS output files.

Options

OptionAliasTypeDefaultDescription
entry-stringstyleframe.config.tsEntry point file(s) for the build
--outputDir-o, --outstringstyleframeOutput directory for built files
--clean-booleanfalseClean output directory before build

Usage

styleframe build
  1. Loads your Styleframe configuration from the entry file
  2. Processes all styles, variables, themes, and utilities
  3. Generates optimized CSS files in the specified output directory

The build command generates a structured output directory:

styleframe/
├── index.css          # Main compiled CSS
└── index.ts           # Main compiled TypeScript

watch 🚧

command
styleframe watch [entry] [options]
Watch mode is planned for a future release. It will automatically rebuild your styles when configuration files change.
Coming soon: Track progress in the GitHub repository.

dtcg

command
styleframe dtcg <subcommand> [options]
Export Styleframe variables to and import them from spec-conformant DTCG (Design Tokens Community Group) JSON. The export output is consumed by the @styleframe/figma plugin (which performs the DTCG → Figma value conversion) and any other DTCG-compatible tooling; the import command generates Styleframe TypeScript code from a DTCG JSON file.

dtcg export

command
styleframe dtcg export [options]
Export Styleframe variables to DTCG format JSON.
Options
OptionAliasTypeDefaultDescription
--config-cstringstyleframe.config.tsPath to the Styleframe config file
--output-ostringtokens.jsonOutput JSON file path
--collection-n, --namestringDesign TokensCollection name embedded in the export
Usage
styleframe dtcg export

dtcg import

command
styleframe dtcg import [options]
Generate Styleframe TypeScript code from DTCG format JSON (e.g. produced by the @styleframe/figma plugin's Export action or the Variables REST API).
Options
OptionAliasTypeDefaultDescription
--input-istring-Input DTCG JSON file path (required)
--output-ostringtokens.styleframe.tsOutput Styleframe TypeScript file path
--composables-booleantrueUse @styleframe/theme composables (useColorDesignTokens, useSpacingDesignTokens, etc.)
--rem-booleanfalseUse rem units for dimensions instead of px
--baseFontSize-string16Base font size for rem conversion (in pixels)
--instanceName-stringsName for the Styleframe instance variable
Usage
styleframe dtcg import --input tokens.json
styleframe dtcg import -i tokens.json
  1. Reads and parses the input DTCG JSON file
  2. Converts DTCG format to Styleframe variables and themes
  3. Generates TypeScript code with proper imports and variable definitions
  4. Optionally uses @styleframe/theme composables for common patterns

Best Practices

  • Use npm scripts: Define CLI commands in your package.json for consistent execution across your team.
  • Version control configs: Commit your styleframe.config.ts to ensure consistent styling across environments.
  • Integrate with CI/CD: Run styleframe build in your deployment pipeline to generate production CSS.
  • Organize output: Use --outputDir to organize generated files according to your project structure.
  • Descriptive naming: Use clear names for multiple configs like styleframe.theme.config.ts or styleframe.components.config.ts.
Use native integrations: We recommend using native integrations with Vite and other tools for building projects using styleframe.

FAQ

Playground

Utility Scanner

Automatically detect utility class names in your source files and generate the corresponding CSS at build time — no manual value definitions needed.