css-token-extract

Extract CSS custom properties (variables) from any CSS/SCSS file and output them as JSON, SCSS map, or Tailwind CSS config.

Install

npm install -g css-token-extract

Usage

css-token-extract <files...> [options]

Options

| Flag | Description | Default | |------|-------------|---------| | -f, --format <format> | Output format: json, scss, tailwind | json | | -o, --output <file> | Write output to file (default: stdout) | stdout | | --map-name <name> | SCSS map variable name (for scss format) | tokens | | --scss-vars | Also extract SCSS $variable definitions | false | | --compact | Compact JSON output (no indentation) | false | | --exclude <pattern> | Exclude files matching pattern | — | | -q, --quiet | Suppress per-file progress output | false |

Examples

Extract to JSON

css-token-extract styles.css
css-token-extract src/tokens.css --format json
css-token-extract src/tokens.css --format json --compact

Input (tokens.css):

:root {
  --color-primary: #3b82f6;
  --color-secondary: #6366f1;
  --font-size-sm: 0.875rem;
  --spacing-4: 1rem;
  --border-radius-md: 0.375rem;
}

Output (JSON):

{
  "color-primary": "#3b82f6",
  "color-secondary": "#6366f1",
  "font-size-sm": "0.875rem",
  "spacing-4": "1rem",
  "border-radius-md": "0.375rem"
}

Extract to SCSS Map

css-token-extract src/tokens.css --format scss --map-name design-tokens

Output (SCSS):

$design-tokens: (
  'color-primary': #3b82f6,
  'color-secondary': #6366f1,
  'font-size-sm': 0.875rem,
  'spacing-4': 1rem,
  'border-radius-md': 0.375rem
);

Extract to Tailwind Config

css-token-extract src/tokens.css --format tailwind -o tailwind.config.js

Output (tailwind.config.js):

/** @type {import('tailwindcss').Config} */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "primary": "var(--color-primary)",
        "secondary": "var(--color-secondary)"
      },
      "fontSize": {
        "sm": "var(--font-size-sm)"
      },
      "spacing": {
        "4": "var(--spacing-4)"
      },
      "borderRadius": {
        "md": "var(--border-radius-md)"
      }
    }
  }
};

Multiple Files

css-token-extract src/base.css src/components.css --format json

SCSS Variables

css-token-extract src/variables.scss --format scss --scss-vars

Design Token Grouping (Tailwind Format)

The tailwind format automatically groups tokens by prefix:

| Prefix | Tailwind key | |--------|-------------| | --color-* | theme.extend.colors | | --font-size-* | theme.extend.fontSize | | --font-family-* | theme.extend.fontFamily | | --font-weight-* | theme.extend.fontWeight | | --spacing-*, --space-*, --gap-* | theme.extend.spacing | | --radius-*, --rounded-* | theme.extend.borderRadius | | --line-height-* | theme.extend.lineHeight | | --opacity-* | theme.extend.opacity | | --z-index-* | theme.extend.zIndex | | everything else | theme.extend.other |

License

MIT