cli

@shift-css/cli

CLI tool for initializing Shift CSS in your project.

Installation

# Run directly with npx (recommended)
npx shift-css init

# Or install globally
npm install -g @shift-css/cli
shift-css init

Usage

shift-css init

Initialize Shift CSS in your project with the correct layer hierarchy.

npx shift-css init

What it does:

1. Scans your project for existing CSS frameworks
2. Asks about your project type (Greenfield or Hybrid)
3. Configures your brand color (presets or hex code)
4. Creates shift.config.json with your settings
5. Scaffolds your main stylesheet with proper cascade layers

Example Output

🎨 Shift CSS Init

◇ Scanning project...
│ Detected existing CSS: bootstrap

◆ What type of project is this?
│ ○ New project (Greenfield)
│ ● Existing project (Hybrid)

◆ Choose your brand color:
│ ● Plasma (Electric Blue - High-tech default)
│ ○ Laser (Cyber-Pink - Neon futurism)
│ ○ Acid (Toxic Green - Engineering edge)
│ ○ Void (Monochrome - Industrial minimal)
│ ○ Custom

ℹ Plasma → Blue (Hue: 260)

◆ Where should the stylesheet be created?
│ src/styles/shift.css

◇ Files to create
│ Config:      shift.config.json
│ Stylesheet:  src/styles/shift.css
│ Mode:        Hybrid

◆ Proceed with initialization?
│ Yes

✓ Created shift.config.json
✓ Created src/styles/shift.css

✨ Shift CSS initialized!

Color Presets

Curated themes optimized for Shift CSS:

Preset	Hue	Visual Identity
Plasma	260	Electric Blue - High-tech default
Laser	320	Cyber-Pink - Neon futurism
Acid	140	Toxic Green - Engineering edge
Void	0	Monochrome - Industrial minimal

Using Your Brand Color

Don't know OKLCH hues? Paste your hex code:

◆ Choose your brand color:
│ ● Custom

ℹ Hue guide: 20=Red, 90=Yellow, 140=Green, 260=Blue, 320=Purple

◆ Enter a hex code (#a855f7) or hue (0-360):
│ #a855f7

✓ Converted #a855f7 → Purple (Hue: 271)

The CLI auto-converts hex to OKLCH hue—use what you know, get the power of perceptually uniform colors.

Generated Files

shift.config.json

Configuration file storing your project settings:

{
  "hues": {
    "primary": 260,
    "secondary": 280,
    "accent": 45,
    "neutral": 260
  },
  "mode": "greenfield",
  "paths": {
    "stylesheet": "src/styles/shift.css"
  },
  "version": 1
}

Stylesheet (Greenfield mode)

@layer shift.tokens, shift.base, shift.components, shift.utilities;

@import "@shift-css/core/tokens";
@import "@shift-css/core/base";
@import "@shift-css/core/components";
@import "@shift-css/core/utilities";

/* Your custom styles below */

Stylesheet (Hybrid mode)

@layer legacy, shift.tokens, shift.base, shift.components, shift.utilities;

@import "@shift-css/core/tokens";
@import "@shift-css/core/base";
@import "@shift-css/core/components";
@import "@shift-css/core/utilities";

/* Legacy framework imports - add your existing CSS here */
@layer legacy {
  /* @import "bootstrap/dist/css/bootstrap.min.css"; */
}

/* Your custom styles below */

Architecture Modes

Greenfield

For new projects without existing CSS frameworks. Shift CSS has full control over the cascade.

Hybrid

For projects with existing CSS (Bootstrap, Tailwind, etc.). The @layer legacy block gives existing styles the lowest specificity, so Shift CSS can override them without !important.

Framework Detection

The CLI automatically detects:

Framework	Detection Method
Bootstrap	Filename + content patterns
Tailwind CSS	Filename + content patterns (--tw-)
Bulma	Filename + content patterns
Foundation	Filename + content patterns
Large CSS files	Files >10KB with common entry point names

Options

shift-css --help     # Show help
shift-css --version  # Show version

License

MIT