Webpack Options

The following options can be supplied to the included webpack plugin, e.g.

const { TreatPlugin } = require('treat/webpack-plugin');

module.exports = {
  plugins: [
    new TreatPlugin({
      // Plugin options go here...
    })
  ]
};

All configuration values are optional.

Some configuration defaults differ between production and development environments. This is inferred from your webpack mode setting.

Default: ['style-loader']
Type: Array of webpack loader configurations

Defines which loaders generated CSS should be passed through after css-loader. Strings (e.g. style-loader) and objects with options are supported.

Default: /.treat.(js|ts)$/
Type: Webpack condition

Configures which files are considered to be treat files.

Default (Production): '[hash:base64:5]'
Default (Development): '[name]-[local]_[hash:base64:5]'
Type: 'string'

Template string for naming CSS classes. Should always contain a hash option to avoid clashes.

Default (Production): '[hash:base64:4]'
Default (Development): '_[name]-[local]_[hash:base64:4]'
Type: string

Same as localIdentName, but for themes. Useful for debugging which classes belong to which theme. Can also be a function that receives your theme, which is useful for minifying theme classes, e.g. theme => themeNames.indexOf(theme.name).

Default (Production): true
Default (Development): false
Type: boolean

Configures whether to minify the generated CSS.

Default: Browserslist config, if present.
Type: Browserslist query

Configures which browsers to target when running generated CSS through autoprefixer.

Default: true
Type: boolean

Configures whether to output CSS in the resulting bundle. Useful for server rendered apps that have separate webpack builds for client and server code, only one of which needs to generate styles.

Default: false
Type: boolean

Enable hot module reloading for treat modules.

Note: This only enables HMR for the generated JavaScript. As treat forwards CSS to your outputLoaders you’ll need to refer to their docs for how to set up HMR for your CSS.