Skip to content

Latest commit

 

History

27 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

PostCSS Design System Build Status

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.

About

PostCSS plugin for generating CSS variables from a JSON file

Resources

Stars

18 stars

Watchers

1 watching

Forks

Releases

Packages

Used by

Contributors

Languages