@nemcss/postcss

PostCSS plugin for nemcss, a design-token-driven CSS custom properties and utility class generator

npm install -D @nemcss/postcss

Setup

This plugin reads your nemcss.config.json. Run npx nemcss init to scaffold one, or see the nemcss package for configuration details. PostCSS does not include HMR; use @nemcss/vite if you need hot module replacement.

// postcss.config.js
import { nemcss } from "@nemcss/postcss";

export default {
  plugins: [nemcss()],
};

/* your CSS input file */
@nemcss base;
@nemcss utilities;

@nemcss base; is replaced with a :root {} block of CSS custom properties. @nemcss utilities; is replaced with the utility classes used in your content files. The utilities directive is optional.

Options

| Option | Type | Default | Description | | ------------ | ---------- | ---------------------- | --------------------------------------------------------------------------------------------------------- | | configPath | string | "nemcss.config.json" | Path to the nemcss config file, relative to cwd. | | ignore | string[] | [] | Additional glob patterns to exclude from content scanning. node_modules and dist are always excluded. |

For the full configuration reference, see the documentation.

Editor support

The NemCSS VS Code extension provides autocomplete and hover docs for your tokens and utility classes via the built-in LSP.