@strato-css/postcss

PostCSS integration for Strato CSS framework. This plugin processes utility classes and generates CSS.

Installation

pnpm add @strato-css/postcss

Usage

Basic Setup

Add the plugin to your postcss.config.js:

module.exports = {
  plugins: {
    '@strato-css/postcss': {}
  }
};

With Custom Options

module.exports = {
  plugins: {
    '@strato-css/postcss': {
      // Presets
      presets: [],

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

      // Additional rules
      rules: [],

      // Shortcuts
      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

With Tailwind CSS

module.exports = {
  plugins: {
    tailwindcss: {},
    '@strato-css/postcss': {}
  }
};

With Autoprefixer

module.exports = {
  plugins: {
    '@strato-css/postcss': {},
    autoprefixer: {}
  }
};

With CSS Nano

module.exports = {
  plugins: {
    '@strato-css/postcss': {},
    cssnano: {
      preset: 'default'
    }
  }
};

Complete Setup

module.exports = {
  plugins: {
    '@strato-css/postcss': {
      theme: {
        colors: {
          primary: '#3b82f6'
        }
      }
    },
    autoprefixer: {},
    cssnano: {
      preset: 'default'
    }
  }
};

Features

• ⚡️ Fast processing
• 🔧 Full configuration support
• 📦 Tree-shaking
• 🎨 Preset system
• 🌙 Dark mode support
• 📱 Responsive utilities
• 🔌 Easy integration with existing PostCSS workflows

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