mistcss
v0.5.2
Published
[![Node.js CI](https://github.com/typicode/mistcss/actions/workflows/node.js.yml/badge.svg)](https://github.com/typicode/mistcss/actions/workflows/node.js.yml)
Downloads
595
Readme
💧 MistCSS
Write components using CSS only
MistCSS is a new, better and faster way to write visual components. ~~CSS-in-JS~~? Nope! JS-from-CSS 👍
Write your component in CSS only
@scope (button.custom-button) {
:scope {
background: black;
color: white;
&[data-variant="primary"] {
background: blue;
}
&[data-variant="secondary"] {
background: gray;
}
}
}
Get a type-safe component without writing TypeScript
import { CustomButton } from './Button.mist'
export const App = () => (
<CustomButton variant="primary">Save</CustomButton>
)
MistCSS can generate ⚛️ React, 🚀 Astro and 🔥 Hono components. You can use 🍃 Tailwind CSS to style them.
Documentation
https://typicode.github.io/mistcss