Using CSS Forge

CLI Usage

# Basic usage
cssforge

# Watch mode
cssforge --watch

# Custom paths and output
cssforge --config ./foo/bar/custom-path.ts --css ./dist/design-tokens.css --ts ./dist/design-tokens.ts --json ./dist/design-tokens.json --style-dictionary ./dist/design-tokens.sd.json --mode all

# Style Dictionary JSON with final values (default)
cssforge --mode style-dictionary --style-dictionary ./dist/design-tokens.sd.json

# Keep CSS variables as values for usage matching
cssforge --mode style-dictionary --style-dictionary ./dist/design-tokens.sd.json --style-dictionary-value-mode css-reference

Programmatic Usage

You can also use CSS Forge programmatically:

import { generateCSS, generateStyleDictionaryJSON } from "@hebilicious/cssforge";

// Generate CSS string
const css = generateCSS(config);

// Write final values for Style Dictionary
const resolvedTokens = generateStyleDictionaryJSON(config);

// Keep var(--token) as each token's value for usage matching
const usageTokens = generateStyleDictionaryJSON(config, { valueMode: "css-reference" });

Best Practices

• Version Control: Commit your generated CSS files
• CSS Layers: Use @layer to manage specificity
• Config First: Always edit the config file, never edit the generated files