Styleframe Logo
Getting Started

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 -D @styleframe/cli

Commands

The CLI provides two primary commands: init for project setup and build for generating CSS output.

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. Adds styleframe and @styleframe/cli to your package.json dependencies
  3. 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

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.

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

Configuration

Configure your Styleframe instance with custom options for indentation, variable naming, utility selectors, and theme selectors.

Variables

Styleframe variables are the foundation of your design system. They let you define design tokens such as colors, spacing, typography, and more.