• Stars
    star
    788
  • Rank 57,762 (Top 2 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created 10 months ago
  • Updated 5 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

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

@scope (.paragraph) {
  p:scope {
    color: black;

    &[data-error] {
      color: red;
    }
  }
}

App.jsx

import { Paragraph } from 'Paragraph.mist'

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

    {/* 💥 TypeScript will catch errors */}
    <Paragraph eror>typo</Paragraph>
    <Paragraph type="button">invalid prop</Paragraph>
  </main>
)

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 🌬️

More Repositories

1

json-server

Get a full fake REST API with zero coding in less than 30 seconds (seriously)
JavaScript
72,441
star
2

husky

Git hooks made easy 🐶 woof!
JavaScript
32,250
star
3

lowdb

Simple and fast JSON database
JavaScript
21,308
star
4

hotel

🏩 A simple process manager for developers. Start apps from your browser and access them using local domains
JavaScript
9,975
star
5

jsonplaceholder

A simple online fake REST API server
HTML
5,017
star
6

tlapse

📷 Create a timelapse of your web development... or just automatically take screenshots of your hard work ;)
JavaScript
2,024
star
7

xv

🙅‍♀️ ✌️ fastest test runner
JavaScript
832
star
8

pegasus

Load JSON while still loading other scripts
JavaScript
703
star
9

katon

(use hotel instead)
JavaScript
684
star
10

steno

Super fast async file writer with atomic write ⚡
JavaScript
678
star
11

react-fake-props

🔮 Magically generate fake props for your React tests
JavaScript
627
star
12

fetchival

Easy window.fetch requests
JavaScript
520
star
13

lodash-id

Makes it easy to manipulate id-based resources with lodash or lowdb
JavaScript
472
star
14

react-lodash

⚛️ 🔧 Lodash as React components
JavaScript
356
star
15

stop-server

📱 Shut down your computer with your phone
JavaScript
349
star
16

demo

A demo repository for My JSON Server (Alpha)
334
star
17

pinst

🍺 dev only postinstall hooks (package.json)
JavaScript
258
star
18

please-upgrade-node

💁 Show a message to your users to upgrade Node instead of a stacktrace
JavaScript
239
star
19

jsop

JSON file reader/writer (powered by Object.observe)
JavaScript
207
star
20

husky-4-to-8

Quickly migrate your hooks from husky v4 to husky@latest
JavaScript
131
star
21

user-startup

Auto start commands when you log in (cross-platform)
JavaScript
125
star
22

cult

cult monitors gulpfile changes and reloads gulp
JavaScript
119
star
23

bg.nvim

Automatically sync your terminal background with your colorscheme 🎆
Lua
97
star
24

logan

Mini template system for the console and colors
JavaScript
81
star
25

minihost

Easily start and access servers
JavaScript
46
star
26

ghwn

Get desktop notifications for new issues, comments, stars... (no installation required)
HTML
42
star
27

shoutjs

Make your ShellJS commands explicit and get a beautiful output
JavaScript
30
star
28

homerun

Turn npm package scripts into CLI commands
JavaScript
23
star
29

server-ready

Know when a server is ready to receive requests
JavaScript
20
star
30

husky-init

JavaScript
20
star
31

backbone-pegasus

Load models and collections data while loading Backbone
JavaScript
20
star
32

server-ready-cli

Run commands only when a server is available
JavaScript
19
star
33

eslint-config

JavaScript
8
star
34

typicode.github.io

HTML
8
star