Bundler-plugins.md

Bundler plugins

Universal options

• minifyProperties - minify the property names of style objects. Unless you pass custom objects to style9() not generated by style9.create(), this is safe to enable and will lead to smaller JavaScript output but mangled property names. Consider enabling it in production. Default: false
• incrementalClassnames - use incremental names for classes(.a, .b) instead of a hash of the style value. This means that class names are not stable across builds, but leads to smaller JavaScript output. Default: false

Webpack

const Style9Plugin = require('style9/webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // Collect all styles in a single file - required
  optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: 'styles',
          type: 'css/mini-extract',
          // For webpack@4 remove type and uncomment the line below
          // test: /\.css$/,
          chunks: 'all',
          enforce: true,
        }
      }
    }
  },
  module: {
    rules: [
      {
        test: /\.(tsx|ts|js|mjs|jsx)$/,
        use: Style9Plugin.loader,
        options: {
          parserOptions?: BabelParserOpts;
          minifyProperties?: boolean;
          incrementalClassnames?: boolean;
        }
      },
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  },
  plugins: [
    new Style9Plugin(),
    new MiniCssExtractPlugin()
  ]
};

Rollup

import style9 from 'style9/rollup';

export default {
  // ...
  plugins: [
    style9({
      include?: (string | RegExp)[] | string | RegExp;
      exclude?: (string | RegExp)[] | string | RegExp;
      // fileName XOR name is required
      fileName: string; // will be emitted as fileName
      name: string; // will be emitted according to output.assetFileNames format
      parserOptions?: BabelParserOpts;
      minifyProperties?: boolean;
      incrementalClassnames?: boolean;
    })
  ]
};

Next.js

const withTM = require('next-transpile-modules')(['style9']);
// If you are using the latest version Next.js:
const withStyle9 = require('style9/next');
// If you are using Next.js below 12.0.5:
const withStyle9 = require('style9/next-legacy');

module.exports = withStyle9({
  parserOptions?: BabelParserOpts;
  minifyProperties?: boolean;
  incrementalClassnames?: boolean;
})(withTM());

Gatsby

module.exports = {
  plugins: [
    {
      resolve: 'style9/gatsby',
      options: {
        parserOptions?: BabelParserOpts;
        minifyProperties?: boolean;
        incrementalClassnames?: boolean;
      }
    }
  ]
}

Vite

import { defineConfig } from 'vite';
import style9 from 'style9/vite';
export default defineConfig({
  plugins: [
    // ...other plugins.
    style9()
  ]
});

Babel

When using the babel plugin you'll have to pass the generated CSS to the post-processor yourself. If compiling multiple files this should be done to the concatenated output of all babel transforms.

const babel = require('@babel/core');
const processCSS = require('style9/src/process-css');

const output = babel.transformFile('./file.js', {
  plugins: [['style9/babel', {
    minifyProperties?: boolean;
    incrementalClassnames?: boolean;
  }]]
});
const { css } = processCSS(output.metadata.style9 || '', options?: PostCSSOptions);