salty-css Commands for Astro Projects — Init, Generate, and Compile All Styles Ahead of Deploy

The Salty CLI handles the mechanical parts: initialising projects, scaffolding new component files, forcing a CSS build, and keeping all Salty packages in sync.

Installation

The Salty CSS CLI is bundled with the core package. You can use it with npx without installing it globally:

npx salty-css [command]

Available Commands

Initialize a Project

npx salty-css init [directory]

This command:

• Installs required packages
• Detects the framework in use (Next.js, Vite, Astro, etc.)
• Creates necessary config files
• Sets up the project structure

Options:

• directory: The target directory for initialization (defaults to current directory)

Example:

npx salty-css init

Generated artefacts. After init you should find:

• salty.config.ts next to your bundler config (next.config.ts, vite.config.ts, etc.).
• The Salty packages added to package.json and installed.
• The build plugin wired into your bundler config (e.g. withSaltyCss(nextConfig)).
• An empty saltygen/ directory (populated on first run).

Wrong framework picked up? init reads your package.json to decide which framework helpers to install. If you're in a monorepo, run it from the package's own root, not the workspace root. If it already wrote the wrong config, delete salty.config.ts and re-run — the safe path is always a clean re-init rather than hand-editing the generated files.

Generate Components

npx salty-css generate [filePath]

This command creates a new Salty CSS component file with boilerplate code.

Options:

• filePath: Path where the component should be created (e.g., src/components/button)
• --className: Custom class name for the component
• --name: Custom component name (defaults to filename)

Example:

npx salty-css generate src/components/card --name Card

Build Files

npx salty-css build [directory]

This command compiles Salty CSS files in your project. It's usually not needed if you're using Next.js, Vite, or Astro with the proper plugin, but it can be useful for debugging or advanced scenarios.

Options:

• directory: The target directory to build (defaults to current directory)

Example:

npx salty-css build src

Generated artefacts. A successful build produces, inside saltygen/:

• index.css — the single bundled stylesheet imported at runtime (with importStrategy: 'root') or referenced per-component (with importStrategy: 'component').
• salty.config.js — a compiled snapshot of your salty.config.ts used internally by the runtime.
• Per-component .css files — only when importStrategy: 'component' is set.

saltygen/ is regenerated from scratch on every build, so it's safe (and recommended) to add it to .gitignore.

Update Packages

npx salty-css update [version]

update has the alias up — npx salty-css up does the same thing.

This command updates all Salty CSS packages in your project to the specified version.

Options:

• version: Version to update to (defaults to "latest")
• --dir <dir>: Project directory to rebuild after updating
• -y, --yes: Skip confirmation prompts
• --legacy-peer-deps: Pass --legacy-peer-deps to npm (not recommended)

Example:

npx salty-css update         # equivalent to: npx salty-css up
npx salty-css update 1.2.3   # pin to a specific version

Linting

Beyond the CLI, Salty CSS ships an ESLint plugin and config that catch two common mistakes the compiler can't warn you about — unexported styled / className / keyframes / defineX calls, and variants mistakenly nested inside base. Setup and rule reference: ESLint.