add docs, improve cli

Author: typicode

.github/workflows/deploy.yml

@@ -0,0 +1,64 @@
+# Sample workflow for building and deploying a VitePress site to GitHub Pages
+#
+name: Deploy VitePress site to Pages
+
+on:
+  # Runs on pushes targeting the `main` branch. Change this to `master` if you're
+  # using the `master` branch as the default branch.
+  push:
+    branches: [main]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0 # Not needed if lastUpdated is not enabled
+      # - uses: pnpm/action-setup@v2 # Uncomment this if you're using pnpm
+      # - uses: oven-sh/setup-bun@v1 # Uncomment this if you're using Bun
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm # or pnpm / yarn
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+      - name: Install dependencies
+        run: npm ci # or pnpm install / yarn install / bun install
+      - name: Build with VitePress
+        run: npm run docs:build # or pnpm docs:build / yarn docs:build / bun run docs:build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: docs/.vitepress/dist
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    needs: build
+    runs-on: ubuntu-latest
+    name: Deploy
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -1,2 +1,3 @@
 node_modules
-lib
+lib
+docs/.vitepress/cache

README.md

@@ -2,168 +2,37 @@
 
 [![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)
 
-> Write atomic React components using only CSS! (JS-from-CSS™)
+> Write React components using CSS only
 
-## Why?
+MistCSS is a new, better and faster way to write visual components. ~~CSS-in-JS~~? Nope! JS-from-CSS 👍
 
-- 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.
+View the [site](https://typicode.github.io/mistcss) to learn more.
 
-## 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 using CSS.
-
-`src/components/Button.mist.css`
+Supports Next.js, Remix and TailwindCSS. More to come.
 
 ```css
-@scope (.btn) {
-  button:scope {
-    /* Default style */
-    font-size: 1rem;
-    border-radius: 0.25rem;
-
-    &[data-size='lg'] {
-      font-size: 1.5rem;
-    }
-
-    &[data-size='sm'] {
-      font-size: 0.75rem;
-    }
+@scope (.paragraph) {
+  p {
+    color: black;
 
-    &[data-danger] {
-      background-color: red;
-      color: white;
+    [data-error] {
+      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>
-
-      {/* 💥 TypeScript will catch the error here */}
-      <Button size="lgg">Submit</Button>
-    </main>
-  )
-}
-```
-
-### 3. Integrate it into your workflow
-
-Edit `package.json`:
-
-```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.
-
-### 4. TailwindCSS (optional)
-
-If you're using NextJS, you may need to add [support for nested declarations](https://tailwindcss.com/docs/using-with-preprocessors#nesting).
+```jsx
+import { Paragraph } from 'Paragraph.mist.css'
 
-Use Tailwind's `@apply` directive to style your CSS component. For example:
-
-```css
-&[data-danger] {
-  @apply bg-red-700 text-white;
-}
-```
-
-### 5. Ignoring generated files
-
-Edit `.gitignore`:
-
-```gitignore
-*.mist.css.tsx # Ignore compiled files
-```
-
-Edit `.prettierignore`:
-
-```gitignore
-*.mist.css.tsx # Ignore compiled files
-```
-
-Edit `eslint.config.js`:
-
-```js
-{
-  ignores: ['**/*.mist.css.tsx']
-}
-```
-
-Edit `.vscode/settings.json`:
-
-```json
-{
-  "files.exclude": {
-    "**/*.mist.css.tsx": true
-  }
-}
-```
-
-## 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 🌬️
+<Paragraph>I'm React component written in CSS only</Paragraph>
+<Paragraph error>I can accept props</Paragraph>
 ```
 
-## Roadmap
+## Documentation
 
-MistCSS is a new project, so expect **breaking changes** until `v1.0`.
+https://typicode.github.io/mistcss
 
-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.
+## Why the name?
 
-- [x] Release 🥳
-- [x] Add TailwindCSS support
-- [ ] Add Vite support
-- [ ] CLI and compiler improvements
-- [ ] v1.0
+C in CSS stands for cascade 🌊 → atomized water forms mist 🌫️ → MistCSS creates pure CSS atomic components 🌬️

docs/.vitepress/config.ts

@@ -0,0 +1,36 @@
+import { defineConfig } from 'vitepress'
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  title: 'MistCSS',
+  description: 'Write atomic React components using only CSS',
+  head: [
+    [
+      'link',
+      {
+        rel: 'icon',
+        href: 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="85">🌬️</text></svg>',
+      },
+    ],
+  ],
+  base: '/mistcss/',
+  themeConfig: {
+    // https://vitepress.dev/reference/default-theme-config
+    logo: '/logo.svg',
+    nav: [
+      { text: 'Guide', link: '/getting-started' },
+      { text: 'Sponsor', link: 'https://github.com/sponsors/typicode' },
+    ],
+
+    sidebar: [
+      { text: 'Getting Started', link: '/getting-started' },
+      { text: 'Integrate to your Workflow', link: '/workflow' },
+      { text: 'Roadmap', link: '/roadmap' },
+    ],
+
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/typicode/mistcss' },
+      { icon: 'twitter', link: 'https://twitter.com/typicode' },
+    ],
+  },
+})