update docs

README.md

@@ -43,8 +43,6 @@ https://typicode.github.io/mistcss
 
 ## Supports
 
-Bring your favorite tools:
-
 - [Next.js](https://nextjs.org/)
 - [Remix](https://remix.run/)
 - [React](https://react.dev/)

docs/src/content/docs/integration/frameworks.mdx

@@ -2,22 +2,28 @@
 title: Frameworks
 ---
 
-## React
-
 By default, `mistcss` will generate React components that you can use in Next.js or Remix
 
+## React
+
 ```sh
 mistcss ./components
 ```
 
-## Hono
+## Vue
 
 ```sh
-mistcss ./components --target=hono
+mistcss ./components --target=vue
 ```
 
 ## Astro
 
 ```sh
 mistcss ./components --target=astro
-```
+```
+
+## Hono
+
+```sh
+mistcss ./components --target=hono
+```

docs/src/content/docs/intro.mdx

@@ -14,12 +14,14 @@ Unlike other tools, __MistCSS doesn't modify your CSS__, leaving you free to __u
 
 As a consequence, __you don't have to learn a new API__ to start using it nor have to install a code editor extension. __It's just CSS__.
 
-Bring your favorite tools:
+Supports:
 
 - [Next.js](https://nextjs.org/)
 - [Remix](https://remix.run/)
 - [React](https://react.dev/)
 - [Vue](https://vuejs.org)
 - [Astro](https://astro.build/)
 - [Hono](https://hono.dev/)
-- [Tailwind CSS](https://tailwindcss.com/)
+- [Tailwind CSS](https://tailwindcss.com/)
+
+__Bonus__: if you need to switch from one framework to another, you won't have to rewrite your components. Simply change MistCSS compilation target.

src/bin.ts

@@ -10,9 +10,10 @@ import { globby } from 'globby'
 import { parse } from './parser.js'
 import { render as reactRender } from './renderers/react.js'
 import { render as astroRender } from './renderers/astro.js'
+import { render as vueRender } from './renderers/vue.js'
 
 type Extension = '.tsx' | '.astro'
-type Target = 'react' | 'hono' | 'astro';
+type Target = 'react' | 'hono' | 'astro' | 'vue';
 
 function createFile(mist: string, target: Target, ext: Extension) {
  try {
@@ -30,6 +31,9 @@ function createFile(mist: string, target: Target, ext: Extension) {
  case 'astro':
  result = astroRender(name, data[0])
  break
+ case 'vue':
+ result = vueRender(name, data[0])
+ break
  }
  fs.writeFileSync(mist.replace(/\.css$/, ext), result)
  }
@@ -46,7 +50,7 @@ function createFile(mist: string, target: Target, ext: Extension) {
 function usage() {
  console.log(`Usage: mistcss <directory> [options]
  --watch, -w Watch for changes
- --target, -t Render target (react, hono, astro) [default: react]
+ --target, -t Render target (react, vue, astro, hono) [default: react]
 `)
 }
 
@@ -81,7 +85,7 @@ if (!(await fsPromises.stat(dir)).isDirectory()) {
 }
 
 const { target } = values;
-if (target !== 'react' && target !== 'hono' && target !== 'astro') {
+if (target !== 'react' && target !== 'hono' && target !== 'astro' && target !== 'vue') {
  console.error('Invalid render option')
  usage()
  process.exit(1)
@@ -102,6 +106,10 @@ switch (target) {
  ext = '.astro'
  console.log('Rendering Astro components')
  break
+ case 'vue':
+ ext = '.tsx'
+ console.log('Rendering Vue components')
+ break
  default:
  console.error('Invalid target option')
  usage()