node package manager
Stop wasting time. Easily manage code sharing in your team. Create a free org »

@erickmerchant/css

@erickmerchant/css

a cli to generate atomic css

It takes a css file with custom properties and generates a css file full of atomic css classes.

Install

npm install -g @erickmerchant/css

Example

css example/variables.css example/utilities.css
/* example/variables.css */
 
@custom-media --breakpoint-mobile (width < 40rem);
 
@custom-media --breakpoint-desktop (width >= 40rem);
 
:root {
  --box-sizing: false;
 
  --whitespace-1: 0.5rem;
  --whitespace-2: 1rem;
  --whitespace-3: 2rem;
  --whitespace-4: 4rem;
 
  --width-1: calc(100% / 3);
  --width-2: calc(100% / 3 * 2);
 
  --max-width: 40rem;
 
  --font-size-large: 1.125rem;
  --font-size-medium: 1rem;
  --font-size-small: 0.875rem;
 
  --border-radius: 0.2em;
  --border-width: 0.05em;
 
  --black: hsl(00%10%);
  --gray: hsl(00%50%);
  --white: hsl(00%90%);
 
  --red: hsl(35060%60%);
  --green: hsl(11060%60%);
  --blue: hsl(23060%60%);
}