@shift-css/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:

• Scans your project for existing CSS frameworks
• Asks about your project type (Greenfield or Hybrid)
• Configures your brand color (presets or hex code)
• Creates shift.config.json with your settings
• 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