# 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

```javascript
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

```javascript
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

```javascript
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

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

## 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.

```javascript
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);
```