@strato-css/vite

Vite integration for Strato CSS framework. This plugin provides seamless integration with Vite applications.

Installation

pnpm add @strato-css/vite

Usage

Basic Setup

Add the plugin to your vite.config.ts:

import { defineConfig } from 'vite';
import strato from '@strato-css/vite';

export default defineConfig({
  plugins: [
    strato()
  ]
});

With Custom Options

import { defineConfig } from 'vite';
import strato from '@strato-css/vite';

export default defineConfig({
  plugins: [
    strato({
      // Presets
      presets: [
        // Import and use presets
      ],

      // Theme customization
      theme: {
        colors: {
          primary: '#3b82f6'
        }
      },

      // Additional rules
      rules: [
        // Custom rules
      ],

      // Shortcuts
      shortcuts: {
        // Custom shortcuts
      }
    })
  ]
});

Options

The plugin accepts all options from the Strato CSS generator:

• presets: Array of presets to use
• theme: Custom theme configuration
• rules: Additional utility rules
• shortcuts: Utility shortcuts
• variants: Custom variants

Examples

React + Vite

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import strato from '@strato-css/vite';

export default defineConfig({
  plugins: [
    react(),
    strato()
  ]
});

Vue + Vite

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import strato from '@strato-css/vite';

export default defineConfig({
  plugins: [
    vue(),
    strato()
  ]
});

Svelte + Vite

// vite.config.ts
import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import strato from '@strato-css/vite';

export default defineConfig({
  plugins: [
    svelte(),
    strato()
  ]
});

Features

• ⚡️ Fast HMR support
• 🔧 Full configuration support
• 📦 Tree-shaking
• 🎨 Preset system
• 🌙 Dark mode support
• 📱 Responsive utilities

Development

Testing

# Run all tests
pnpm test

# Run tests in watch mode
pnpm test --watch

# Run tests with UI
pnpm test:ui

# Run tests with coverage
pnpm test:coverage

Build

# Build the package
pnpm build

# Build in watch mode
pnpm dev

Type Checking

# Run TypeScript type checking
pnpm typecheck

License

MIT