@gustcss/vite

Vite plugin for GustCSS - Lightning-fast CSS utility generator.

Installation

npm install gustcss @gustcss/vite

Usage

Basic Setup

In your vite.config.js or vite.config.ts:

import { defineConfig } from 'vite'
import gustcss from '@gustcss/vite'

export default defineConfig({
  plugins: [
    gustcss({
      output: 'src/styles/utility.css',
    }),
  ],
})

Import Generated CSS

In your main entry file (e.g., src/main.js):

import './styles/utility.css'

Configuration

Using Plugin Options

export default defineConfig({
  plugins: [
    gustcss({
      content: ['./src/**/*.{js,ts,jsx,tsx,vue,astro}'],
      output: 'src/styles/utility.css',
      config: './gustcss.config.json', // Optional: path to config file
    }),
  ],
})

Using Config File

Create gustcss.config.json in your project root:

{
  "content": ["./src/**/*.{js,ts,jsx,tsx,vue,astro}"],
  "output": "src/styles/utility.css",
  "darkMode": "class",
  "theme": {
    "extend": {
      "colors": {
        "brand": "#3B82F6"
      }
    }
  }
}

Features

⚡️ Development Mode

• Watches your source files for changes
• Regenerates CSS automatically
• Hot Module Replacement (HMR) support

🚀 Production Build

• Generates optimized CSS at build time
• Only includes utilities used in your code
• No runtime overhead

How It Works

1. The plugin scans files specified in the content array
2. Extracts utility class names from your code
3. Generates CSS for those utilities on-demand
4. Outputs to the specified CSS file
5. Watches for changes in development mode

Framework Support

Works with all Vite-supported frameworks:

• ⚛️ React
• 🖖 Vue
• 🔺 Astro
• 💎 Solid
• 🔥 Svelte
• 📦 Vanilla JS

Example

Input (your component):

<div className="p-4 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
  Hello GustCSS!
</div>

Output (src/styles/utility.css):

.p-4 { padding: 1rem; }
.bg-blue-500 { background-color: #3b82f6; }
.text-white { color: #ffffff; }
.rounded-lg { border-radius: 0.5rem; }
.hover\:bg-blue-600:hover { background-color: #2563eb; }

Requirements

• Node.js >= 18.0.0
• Vite ^4.0.0 || ^5.0.0 || ^6.0.0

Related Packages

• gustcss - CLI tool
• @gustcss/postcss - PostCSS plugin

License

MIT