SaaS Theme CLI

Command-line interface for SaaS theme management with enhanced modern CSS features.

Features

• 🚀 Quick theme generation with interactive prompts
• 🔧 Build and validate themes with comprehensive error checking
• 📱 Modern CSS support including Container Queries, CSS Layers, Logical Properties
• ♿ Accessibility validation with WCAG AA/AAA compliance
• 🔍 Theme linting and best practices enforcement
• 📊 Theme comparison and diff utilities
• 👀 Live preview with hot reloading
• 🌍 Multi-tenant support for SaaS applications

Installation

# Install globally
npm install -g saas-theme-cli

# Or use with npx
npx saas-theme-cli --help

Quick Start

# Initialize a new theme
saas-theme init my-theme

# Build a theme
saas-theme build ./themes/client-a.json --output ./dist

# Validate a theme
saas-theme validate ./themes/client-a.json

# Watch for changes and rebuild
saas-theme watch ./themes --output ./dist

# Preview themes in browser
saas-theme preview ./themes/client-a.json

Commands

init <name>

Create a new theme with interactive prompts.

saas-theme init my-theme
saas-theme init my-theme --template modern
saas-theme init my-theme --template minimal

Options:

• --template <type> - Template to use (basic, modern, minimal, enterprise)
• --output <dir> - Output directory (default: current directory)

build <theme>

Build a theme to CSS.

saas-theme build ./theme.json
saas-theme build ./theme.json --output ./dist --format css --minify

Options:

• --output <dir> - Output directory
• --format <type> - Output format (css, scss, less)
• --minify - Minify output
• --sourcemaps - Generate source maps
• --modern - Enable modern CSS features
• --prefix <string> - CSS variable prefix (default: --)

validate <theme>

Validate a theme for errors and accessibility issues.

saas-theme validate ./theme.json
saas-theme validate ./theme.json --strict --wcag AAA

Options:

• --strict - Enable strict validation mode
• --wcag <level> - WCAG compliance level (AA, AAA)
• --output <file> - Save validation report to file

watch <directory>

Watch themes for changes and rebuild automatically.

saas-theme watch ./themes --output ./dist
saas-theme watch ./themes --output ./dist --modern

Options:

• --output <dir> - Output directory
• --format <type> - Output format
• --modern - Enable modern CSS features
• --debounce <ms> - Debounce delay (default: 300ms)

preview <theme>

Launch a live preview server for theme development.

saas-theme preview ./theme.json
saas-theme preview ./theme.json --port 3000

Options:

• --port <number> - Server port (default: 8080)
• --open - Open browser automatically
• --hot - Enable hot reloading

diff <theme1> <theme2>

Compare two themes and show differences.

saas-theme diff ./theme-v1.json ./theme-v2.json
saas-theme diff ./theme-v1.json ./theme-v2.json --format table

Options:

• --format <type> - Output format (table, json, markdown)
• --output <file> - Save diff to file

lint <theme>

Lint a theme for best practices and potential issues.

saas-theme lint ./theme.json
saas-theme lint ./themes/*.json --fix

Options:

• --fix - Auto-fix issues where possible
• --rules <file> - Custom linting rules file
• --ignore <patterns> - Ignore patterns

modern <theme>

Generate modern CSS features for a theme.

saas-theme modern ./theme.json --container-queries --css-layers
saas-theme modern ./theme.json --all --output ./modern.css

Options:

• --container-queries - Enable container queries
• --css-layers - Enable CSS layers
• --logical-properties - Enable logical properties
• --color-functions - Enable advanced color functions
• --all - Enable all modern features
• --polyfills - Include polyfills for older browsers

Configuration

Create a saas-theme.config.js file in your project root:

module.exports = {
  // Default build options
  build: {
    format: "css",
    minify: true,
    sourceMaps: true,
    prefix: "--",
  },

  // Modern CSS features
  modern: {
    containerQueries: true,
    cssLayers: true,
    logicalProperties: true,
    colorFunctions: true,
    polyfills: true,
  },

  // Accessibility validation
  accessibility: {
    wcagLevel: "AA",
    enforceContrast: true,
    strictMode: false,
  },

  // Linting rules
  lint: {
    rules: {
      "no-hardcoded-colors": "error",
      "consistent-naming": "warn",
      "accessibility-contrast": "error",
    },
  },
};

Theme Templates

Basic Template

saas-theme init my-theme --template basic

• Essential color palette
• Typography scale
• Basic spacing system
• Simple components

Modern Template

saas-theme init my-theme --template modern

• Container queries
• CSS layers
• Logical properties
• Advanced color functions
• Responsive grids

Minimal Template

saas-theme init my-theme --template minimal

• Minimal color palette
• Essential typography
• Clean, simple design

Enterprise Template

saas-theme init my-theme --template enterprise

• Comprehensive design system
• Multiple brand variants
• Accessibility compliance
• Advanced theming features

Examples

Build a theme with modern features

saas-theme build ./theme.json \
  --output ./dist \
  --modern \
  --minify \
  --sourcemaps

Validate multiple themes

saas-theme validate ./themes/*.json --wcag AAA --strict

Watch and rebuild with hot reloading

saas-theme watch ./themes --output ./dist --modern &
saas-theme preview ./themes/main.json --hot --port 3000

Generate modern CSS features only

saas-theme modern ./theme.json \
  --container-queries \
  --css-layers \
  --output ./modern-features.css

Integration

Package.json Scripts

{
  "scripts": {
    "theme:build": "saas-theme build ./theme.json --output ./dist",
    "theme:watch": "saas-theme watch ./themes --output ./dist",
    "theme:validate": "saas-theme validate ./theme.json --strict",
    "theme:preview": "saas-theme preview ./theme.json --hot"
  }
}

CI/CD Pipeline

# .github/workflows/themes.yml
name: Theme Validation
on: [push, pull_request]
jobs:
  validate:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
      - run: npm install -g saas-theme-cli
      - run: saas-theme validate ./themes/*.json --strict --wcag AAA

Troubleshooting

Common Issues

Theme validation fails

# Check specific validation errors
saas-theme validate ./theme.json --verbose

# Fix common issues automatically
saas-theme lint ./theme.json --fix

Build errors

# Enable debug mode
DEBUG=saas-theme:* saas-theme build ./theme.json

# Check theme structure
saas-theme validate ./theme.json

Modern CSS features not working

# Ensure modern flag is enabled
saas-theme build ./theme.json --modern

# Check browser support
saas-theme modern ./theme.json --polyfills

License

MIT © SaaS Theme Team