Awesome
💧 MistCSS
Create components with 50% less code
MistCSS is a new, better and faster way to write visual components. CSS-in-JS? Nope! JS-from-CSS 👍
All major frameworks are supported.
1. Write your component in CSS only
./src/Button.mist.css
@scope (button.custom-button) {
:scope {
background: black;
color: white;
/* 👇 Define component's props directly in your CSS */
&[data-variant="primary"] {
background: blue;
}
&[data-variant="secondary"] {
background: gray;
}
}
}
2. Run MistCSS codegen
mistcss ./src --target=react --watch
# It will create ./src/Button.mist.tsx
3. Get a type-safe component without writing TypeScript
./src/App.tsx
import { CustomButton } from './Button.mist'
export const App = () => (
<>
<CustomButton variant="primary">Save</CustomButton>
{/* TypeScript will catch the error */}
<CustomButton variant="tertiary">Cancel</CustomButton>
</>
)
MistCSS can generate ⚛️ React, 💚 Vue, 🚀 Astro and 🔥 Hono components. You can use 🍃 Tailwind CSS to style them.
Documentation
https://typicode.github.io/mistcss