https://github.com/typicode/mistcss

Write atomic React components using only CSS! (JS-from-CSS™) 🌬️
https://github.com/typicode/mistcss

astro atomic component css css-in-js next nextjs react remix remix-run ui

Last synced: 22 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/typicode/mistcss
• Owner: typicode
• License: mit
• Created: 2024-02-25T17:52:23.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-04-04T21:40:08.000Z (7 months ago)
• Last Synced: 2024-04-14T13:10:04.766Z (7 months ago)
• Topics: astro, atomic, component, css, css-in-js, next, nextjs, react, remix, remix-run, ui
• Language: JavaScript
• Homepage: https://typicode.github.io/mistcss
• Size: 11.3 MB
• Stars: 580
• Watchers: 5
• Forks: 11
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# 💧 MistCSS

[![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)

> 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`

```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

```shell

mistcss ./src --target=react --watch

# It will create ./src/Button.mist.tsx

```

## 3. Get a type-safe component without writing TypeScript

`./src/App.tsx`

```jsx

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

export const App = () => (

  <>

    Save

    {/* TypeScript will catch the error */}

    Cancel

  >

)

```

MistCSS can generate ⚛️ **React**, 💚 **Vue**, 🚀 **Astro**, 🧠**Svelte** and 🔥 **Hono** components. You can use 🍃 **Tailwind CSS** to style them.

## Documentation

https://typicode.github.io/mistcss

## Supports

- [Next.js](https://nextjs.org/)

- [Remix](https://remix.run/)

- [React](https://react.dev/)

- [Vue](https://vuejs.org)

- [Svelte](https://svelte.dev/)

- [Astro](https://astro.build/)

- [Hono](https://hono.dev/)

- [Tailwind CSS](https://tailwindcss.com/)