CLI Reference

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

yarn add -D @styleframe/cli

npm install -D @styleframe/cli

bun add -D @styleframe/cli

Commands

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

init

styleframe init [options]

Options

Usage

styleframe init

styleframe init --cwd ./my-project
styleframe init -d ./my-project

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)

build

styleframe build [entry] [options]

Options

Usage

styleframe build

styleframe build my-styles.config.ts

styleframe build --outputDir dist/styles
styleframe build -o dist/styles
styleframe build --out dist/styles

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 🚧

styleframe watch [entry] [options]

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.

FAQ

npx styleframe init

styleframe build path/to/your/config.ts

styleframe build styleframe.theme.config.ts -o dist/theme
styleframe build styleframe.components.config.ts -o dist/components