treat

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.

outputLoaders

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.

test

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

Configures which files are considered to be treat files.

localIdentName

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.

themeIdentName

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

minify

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

Configures whether to minify the generated CSS.

browsers

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

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

outputCSS

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.

hmr

Default: false
Type: boolean

Requires at least webpack v4.43.0

Enable hot module reloading for treat modules.

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

// Example setup for MiniCSSExtractPlugin module.exports = { plugins: [ new TreatPlugin({ hmr: process.env.NODE_ENV === 'development', outputLoaders: [{ loader: MiniCssExtractPlugin.loader, options: { hmr: process.env.NODE_ENV === 'development', reloadAll: true, // Required for treat HMR to work }, }] }), new MiniCssExtractPlugin() ] };