first commit

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+lib

LICENSE

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

README.md

@@ -0,0 +1,127 @@
+# MistCSS 🌬️
+
+> Write atomic React components using only CSS! (JS-from-CSS™)
+
+## Why?
+
+- CSS is a beautiful language 💖, getting better every year 🚀.
+- Easily distinguish between pure visual/atomic components and more complex ones by their extension (`*.mist.css`).
+- Write less and focus on style to avoid context-switching with JS, reducing bugs.
+- Gain automatic type safety for your React components; MistCSS compiles to TSX.
+- Enjoy a zero-runtime experience.
+- Works with Next, Remix, Astro, ... any modern React framework
+
+## Install
+
+```shell
+npm install mistcss --save-dev
+```
+
+## Usage
+
+### 1. Create your first CSS component
+
+Assuming your React components are in `src/components`, let's create a basic Button component:
+
+```css
+@scope (.button) {
+  button:scope {
+    /* Default style */
+    font-size: 1rem;
+    /* ... */
+
+    [data-size='lg'] {
+      font-size: 1.5rem;
+      /* ... */
+    }
+
+    [data-size='sm'] {
+      font-size: 0.75rem;
+      /* ... */
+    }
+
+    [data-danger] {
+      color: red;
+      /* ... */
+    }
+  }
+}
+```
+
+Note: the class in `@scope` needs to be unique across your project. Plans are in place to automate this check.
+
+### 2. Compile to a React component
+
+```shell
+mistcss src/components/Button.mist.css
+# Creates Button.mist.css.tsx
+```
+
+Now, you can import your React component.
+
+```tsx
+import { Button } from '.components/Button.mist.css'
+
+export default function App() {
+  return (
+    <main>
+      <Button size="lg" danger>
+        OMG 😱 JS from CSS
+      </Button>
+      <Button size="large">Submit</Button> {/* 💥 TypeScript will catch the error here */}
+    </main>
+  )
+}
+```
+
+### 3. Integrate it into your workflow
+
+Edit `package.json`:
+
+```
+{
+	"scripts": {
+		"mistcss-dev": "mistcss ./src --watch",
+		"mistcss-build": "mistcss ./src"
+	}
+}
+```
+
+Use tools like [concurrently](https://github.com/open-cli-tools/concurrently) to run it alongside your other scripts in development.
+
+Edit `.gitignore`:
+
+```gitignore
+*.mist.css.tsx # Ignore compiled files
+```
+
+## The power of CSS
+
+Since MistCSS uses pure CSS, you can use **all** CSS features:
+
+- Container queries `@container`, ...
+- CSS variables `--primary-color`, ...
+- Media queries `@media (prefers-color-scheme: dark)`, ...
+- And more...
+
+This approach allows you to stay focused on styling without the mental switch to JS.
+
+## Origin of the name
+
+```
+The C in CSS stands for cascade 🌊
+Atomized water forms mist 🌫️
+MistCSS creates pure CSS atomic components 🌬️
+```
+
+## Roadmap
+
+MistCSS is a new project, so expect breaking changes until `v1.0`.
+
+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.
+
+- [x] Release 🥳
+- [ ] Add TailwindCSS support
+- [ ] Add Vite support
+- [ ] CLI and compiler improvements
+- [ ] v1.0

eslint.config.js

@@ -0,0 +1,3 @@
+import config from '@typicode/eslint-config'
+
+export default config

fixtures/Button.mist.css

@@ -0,0 +1,17 @@
+@scope (.button) {
+  button:scope {
+    font-size: 1rem;
+
+    [data-size='lg'] {
+      font-size: 1.5rem;
+    }
+
+    [data-size='sm'] {
+      font-size: 0.75rem;
+    }
+
+    [data-danger] {
+      color: red;
+    }
+  }
+}

fixtures/Button.mist.css.tsx

@@ -0,0 +1,16 @@
+// Generated by MistCSS, do not modify
+import './Button.mist.css'
+
+type Props = {
+  children: React.ReactNode
+  size: 'lg' | 'sm'
+  danger: boolean
+}
+
+export function Button({ children, size, danger, ...props }: Props) {
+  return (
+    <button {...props} data-size={size} data-danger={danger}>
+      {children}
+    </button>
+  )
+}

fixtures/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "jsx": "preserve",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "noEmit": true
+  },
+  "include": ["**/*.tsx"],
+  "exclude": ["node_modules"]
+}