@strato-css/webpack

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

Installation

pnpm add @strato-css/webpack

Usage

Basic Setup

Add the plugin to your webpack.config.js:

const StratoCSS = require('@strato-css/webpack');

module.exports = {
  plugins: [
    new StratoCSS()
  ]
};

With Custom Options

const StratoCSS = require('@strato-css/webpack');

module.exports = {
  plugins: [
    new StratoCSS({
      // 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

React + Webpack

const path = require('path');
const StratoCSS = require('@strato-css/webpack');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new StratoCSS()
  ]
};

Vue + Webpack

const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');
const StratoCSS = require('@strato-css/webpack');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new StratoCSS()
  ]
};

Features

• ⚡️ Fast compilation
• 🔧 Full configuration support
• 📦 Tree-shaking
• 🎨 Preset system
• 🌙 Dark mode support
• 📱 Responsive utilities
• 🔄 Hot Module Replacement

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