Skip to content

Commit cd59ab0

Browse files
typicodetypicode
committed
first commit
0 parents  commit cd59ab0

15 files changed

+3639
-0
lines changed

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
lib

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2024 typicode
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

+127
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
# MistCSS 🌬️
2+
3+
> Write atomic React components using only CSS! (JS-from-CSS™)
4+
5+
## Why?
6+
7+
- CSS is a beautiful language 💖, getting better every year 🚀.
8+
- Easily distinguish between pure visual/atomic components and more complex ones by their extension (`*.mist.css`).
9+
- Write less and focus on style to avoid context-switching with JS, reducing bugs.
10+
- Gain automatic type safety for your React components; MistCSS compiles to TSX.
11+
- Enjoy a zero-runtime experience.
12+
- Works with Next, Remix, Astro, ... any modern React framework
13+
14+
## Install
15+
16+
```shell
17+
npm install mistcss --save-dev
18+
```
19+
20+
## Usage
21+
22+
### 1. Create your first CSS component
23+
24+
Assuming your React components are in `src/components`, let's create a basic Button component:
25+
26+
```css
27+
@scope (.button) {
28+
button:scope {
29+
/* Default style */
30+
font-size: 1rem;
31+
/* ... */
32+
33+
[data-size='lg'] {
34+
font-size: 1.5rem;
35+
/* ... */
36+
}
37+
38+
[data-size='sm'] {
39+
font-size: 0.75rem;
40+
/* ... */
41+
}
42+
43+
[data-danger] {
44+
color: red;
45+
/* ... */
46+
}
47+
}
48+
}
49+
```
50+
51+
Note: the class in `@scope` needs to be unique across your project. Plans are in place to automate this check.
52+
53+
### 2. Compile to a React component
54+
55+
```shell
56+
mistcss src/components/Button.mist.css
57+
# Creates Button.mist.css.tsx
58+
```
59+
60+
Now, you can import your React component.
61+
62+
```tsx
63+
import { Button } from '.components/Button.mist.css'
64+
65+
export default function App() {
66+
return (
67+
<main>
68+
<Button size="lg" danger>
69+
OMG 😱 JS from CSS
70+
</Button>
71+
<Button size="large">Submit</Button> {/* 💥 TypeScript will catch the error here */}
72+
</main>
73+
)
74+
}
75+
```
76+
77+
### 3. Integrate it into your workflow
78+
79+
Edit `package.json`:
80+
81+
```
82+
{
83+
"scripts": {
84+
"mistcss-dev": "mistcss ./src --watch",
85+
"mistcss-build": "mistcss ./src"
86+
}
87+
}
88+
```
89+
90+
Use tools like [concurrently](https://github.com/open-cli-tools/concurrently) to run it alongside your other scripts in development.
91+
92+
Edit `.gitignore`:
93+
94+
```gitignore
95+
*.mist.css.tsx # Ignore compiled files
96+
```
97+
98+
## The power of CSS
99+
100+
Since MistCSS uses pure CSS, you can use **all** CSS features:
101+
102+
- Container queries `@container`, ...
103+
- CSS variables `--primary-color`, ...
104+
- Media queries `@media (prefers-color-scheme: dark)`, ...
105+
- And more...
106+
107+
This approach allows you to stay focused on styling without the mental switch to JS.
108+
109+
## Origin of the name
110+
111+
```
112+
The C in CSS stands for cascade 🌊
113+
Atomized water forms mist 🌫️
114+
MistCSS creates pure CSS atomic components 🌬️
115+
```
116+
117+
## Roadmap
118+
119+
MistCSS is a new project, so expect breaking changes until `v1.0`.
120+
121+
If you like this idea and want to help, please consider having your company [sponsor](https://github.com/typicode/mistcss) it 🙇. This project is not backed by a large company.
122+
123+
- [x] Release 🥳
124+
- [ ] Add TailwindCSS support
125+
- [ ] Add Vite support
126+
- [ ] CLI and compiler improvements
127+
- [ ] v1.0

‎eslint.config.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import config from '@typicode/eslint-config'
2+
3+
export default config

‎fixtures/Button.mist.css

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
@scope (.button) {
2+
button:scope {
3+
font-size: 1rem;
4+
5+
[data-size='lg'] {
6+
font-size: 1.5rem;
7+
}
8+
9+
[data-size='sm'] {
10+
font-size: 0.75rem;
11+
}
12+
13+
[data-danger] {
14+
color: red;
15+
}
16+
}
17+
}

‎fixtures/Button.mist.css.tsx

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// Generated by MistCSS, do not modify
2+
import './Button.mist.css'
3+
4+
type Props = {
5+
children: React.ReactNode
6+
size: 'lg' | 'sm'
7+
danger: boolean
8+
}
9+
10+
export function Button({ children, size, danger, ...props }: Props) {
11+
return (
12+
<button {...props} data-size={size} data-danger={danger}>
13+
{children}
14+
</button>
15+
)
16+
}

‎fixtures/tsconfig.json

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"compilerOptions": {
3+
"jsx": "preserve",
4+
"lib": ["dom", "dom.iterable", "esnext"],
5+
"target": "esnext",
6+
"module": "esnext",
7+
"moduleResolution": "bundler",
8+
"noEmit": true
9+
},
10+
"include": ["**/*.tsx"],
11+
"exclude": ["node_modules"]
12+
}

0 commit comments

Comments
 (0)