postcss-design-system

PostCSS Design System

PostCSS plugin for generating CSS custom properties (variables) from a JSON theme file. The theme config can come from any CSS-in-JS library's <ThemeProvider>, just like styled-system's one for example. It can also work with Compositor Lab.

Examples

An example JSON theme file:

{
  "breakpoints": [30, 48, 74],
  "colors": {
    "white": "#FFFFFF",
    "black": "#000000"
  },
  "fonts": ["-apple-system, sans-serif"],
  "fontSizes": [14, 16, 18],
  "radii": [3, 6, 12],
  "space": [15, 20, 40]
}

CSS variables get injected into :root selector:

:root {
  --breakpoint0: 30em;
  --breakpoint1: 48em;
  --breakpoint2: 74em;
  --color-white: #ffffff;
  --color-black: #000000;
  --fontFamily0: -apple-system, sans-serif;
  --fontSize0: 14px;
  --fontSize1: 16px;
  --fontSize2: 18px;
  --borderRadius0: 3px;
  --borderRadius1: 6px;
  --borderRadius2: 12px;
  --space0: 15px;
  --space1: 20px;
  --space2: 40px;
}

Usage

postcss([
  require('postcss-design-system')({
    inputFile: './theme.json',
  }),
]);

See PostCSS docs for examples for your environment.