@strato-css/cli

CLI tool for Strato CSS framework. Provides command-line utilities for building, inspecting, and managing Strato CSS projects.

Installation

pnpm add -g @strato-css/cli

Or use directly with npx:

npx @strato-css/cli build

Commands

strato build

Compile CSS from your source files.

strato build

Options:

• -c, --config <path> - Path to config file (default: strato.config.js)
• -o, --output <path> - Output CSS file path (default: strato.css)
• -w, --watch - Watch mode for development
• -m, --minify - Minify output CSS
• --include <patterns> - File patterns to include (default: src/**/*.{html,js,ts,jsx,tsx,vue,svelte})
• --exclude <patterns> - File patterns to exclude (default: node_modules,dist,build)

Examples:

# Basic build
strato build

# Custom output
strato build -o dist/styles.css

# Watch mode
strato build -w

# Minify output
strato build -m

# Custom config
strato build -c strato.config.js

# With custom includes
strato build --include "src/**/*.tsx" --include "src/**/*.jsx"

strato inspect

Inspect and analyze utility classes.

strato inspect <classes>

Examples:

# Inspect single class
strato inspect p-4

# Inspect multiple classes
strato inspect "p-4 bg-white rounded"

# Analyze generated CSS
strato inspect "hover:bg-primary focus:ring-2"

strato init

Initialize a new Strato CSS project.

strato init

Options:

• -t, --template <name> - Template to use (default: default)
• --yes - Skip prompts

Examples:

# Interactive init
strato init

# Use specific template
strato init -t react

# Skip prompts
strato init --yes

Creates:

• strato.config.js - Configuration file
• strato.css - Generated CSS
• Updates package.json with scripts

strato version

Show CLI and framework version information.

strato version

Output:

@strato-css/cli: 0.0.1
@strato-css/core: 0.0.1
Node.js: v18.19.0

Configuration

Create a strato.config.js file in your project root:

export default {
  // Presets
  presets: [],

  // Theme customization
  theme: {
    colors: {
      primary: '#3b82f6',
      secondary: '#10b981'
    }
  },

  // Additional rules
  rules: [],

  // Shortcuts
  shortcuts: {},

  // Include patterns
  include: ['src/**/*.{html,js,ts,jsx,tsx,vue,svelte}'],

  // Exclude patterns
  exclude: ['node_modules', 'dist', 'build']
};

Examples

Basic Project

# Initialize project
strato init

# Build CSS
strato build

# Watch for changes
strato build -w

Custom Configuration

# Build with custom config
strato build -c config/strato.js

# Build with custom output
strato build -o assets/styles.css

# Build with minification
strato build -m

Development Workflow

# Terminal 1: Watch mode
strato build -w

# Terminal 2: Development server
npm run dev

Package.json Scripts

Add scripts to your package.json:

{
  "scripts": {
    "build:css": "strato build",
    "watch:css": "strato build -w",
    "build:css:prod": "strato build -m"
  }
}

Development

Testing

# Run all tests
pnpm test

# Run tests in watch mode
pnpm test --watch

# Run tests with UI
pnpm test:ui

# Run tests with coverage
pnpm test:coverage

Build

# Build the CLI
pnpm build

# Build in watch mode
pnpm dev

Type Checking

# Run TypeScript type checking
pnpm typecheck

Help

Get help on any command:

strato --help
strato build --help
strato inspect --help
strato init --help
strato version --help

License

MIT