Design Systems CLI: Multi-Build CSS

Wire frame designs for a design system
Photo by Halacious on Unsplash

What We Had

// Example directory structure for built design system component.dist/
esm/
index.js
commonjs/
index.js
main.css
import { Example } from '@ds/example';
import '@ds/example/dist/main.css';

A New Set of Constraints

Progress

Example

// Example directory structure for built design system component.components/
Button/
src/
index.ts
theme.ts
postcss/
main/
postcss.config.js
foo/
postcss.config.js
bar/
postcss.config.js
dist/
esm/
index.js // Automatically imports main.css
commonjs/
index.js
main.css // Includes Foo and Bar themes
foo.css // Includes only Foo themes
bar.css // Includes only Bar themes

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store