Skip to content
💧 MistCSS

Quick Start

Install

Terminal window
npm install --save-dev mistcss

Assuming your components are in ./components:

package.json
{
  "scripts": {
    "mistcss:dev": "mistcss ./components --watch",
    "mistcss:build": "mistcss ./components"
  }
}

You may want to use concurrently to run mistcss:dev in parallel with your dev server.

When building, mistcss:build must be run first.

Write

Let’s say you want to write a button component. It should have a default style and accept variants:

./components/Button.mist.css
@scope (button.custom-button) {
  :scope {
    background: black;
    color: white;


    &[data-variant='primary'] {
      background: blue;
    }


    &[data-variant='secondary'] {
      background: gray;
    }
  }
}

Build

Terminal window
npm run mistcss:dev
# MistCSS will create ./components/Button.mist.tsx

Use

Use it in your app. No JS/TS were written ✨

App.tsx
import { CustomButton } from './Button.mist'


export const App = () => <CustomButton variant="primary">Save</CustomButton>