MistCSS

Write atomic React components using only CSS! (JS-from-CSS)

React
typicode/mistcsstypicode.github.io/mistcssmistcss

README

MistCSS 🌬️


Node.js CI

Write React components using CSS only


MistCSS is a new, better and faster way to write visual components. CSS-in-JS? Nope! JS-from-CSS 👍

View the site to learn more.

Supports Next.js, Remix and TailwindCSS. More to come.

Paragraph.mist.css

  1. ```css
  2. @scope (.paragraph) {
  3.   p:
  4.     color: black;

  6.     &[data-error] {
  7.       color: red;
  8.     }
  9.   }
  10. }
  11. ```

App.jsx

  1. ```jsx
  2. import { Paragraph } from 'Paragraph.mist.css'

  4. export default const App = () => (
  5.   <main>
  6.     <Paragraph>I'm a React component written in CSS only</Paragraph>
  7.     <Paragraph error>props can be passed</Paragraph>

  9.     {/* 💥 TypeScript will catch errors */}
  10.     <Paragraph eror>typo</Paragraph>
  11.     <Paragraph type="button">invalid prop</Paragraph>
  12.   </main>
  13. )
  14. ```

Documentation


https://typicode.github.io/mistcss

Why the name?


C in CSS stands for cascade 🌊 → atomized water forms mist 🌫️ → MistCSS creates pure CSS atomic components 🌬️