@gustcss/postcss

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

Installation

npm install gustcss @gustcss/postcss postcss

Usage

Basic Setup

In your postcss.config.js:

module.exports = {
  plugins: [
    require('@gustcss/postcss')({
      content: ['./src/**/*.{js,ts,jsx,tsx}'],
    }),
  ],
}

In Your CSS

Add the @gustcss directive in your CSS file:

@gustcss;

/* Your custom styles */

The plugin will scan your source files and generate utility classes on-demand.

Configuration

Using Plugin Options

module.exports = {
  plugins: [
    require('@gustcss/postcss')({
      content: ['./src/**/*.{js,ts,jsx,tsx}'],
      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}"],
  "output": "dist/utility.css",
  "darkMode": "class",
  "theme": {
    "extend": {
      "colors": {
        "brand": "#3B82F6"
      }
    }
  }
}

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. Injects the generated CSS into your build

Example

Input (your HTML/JSX):

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

Output (generated CSS):

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

Requirements

• Node.js >= 18.0.0
• PostCSS ^8.0.0

Related Packages

• gustcss - CLI tool
• @gustcss/vite - Vite plugin

License

MIT