@stylable/webpack-plugin


@stylable/webpack-plugin (for webpack ^5.30.0) is the main build utility for Stylable. It supports both development and production modes, providing various configurations that can be tweaked according to your specific needs. It enables loading Stylable files (.st.css) from local projects or imported from a 3rd party source (for example, NPM node modules).

Getting started

Install @stylable/webpack-plugin as a dev dependency in your local project.

Install using npm:
``bash
npm install @stylable/webpack-plugin --save-dev
`

Install using yarn:
`bash
yarn add @stylable/webpack-plugin --dev
`

Sample dev config:
`js
// webpack.config.js
module.exports = {
…
plugins: [new StylableWebpackPlugin()]
…
};
`


Plugin Configuration Options


Some of the default values given to configuration parameters depend on what environment mode is currently active in webpack (development or production).
Below you can see the various possible configuration parameters.

`ts
interface StylableWebpackPluginOptions {
/**
* Filename of the output bundle when emitting css bundle
* supports
* - [contenthash] replacer - "stylable.[contenthash].css" - based on file content hash
* - [name] replacer - "[name].css" - based on entry name - is not supported in "extractMode: 'single'" with multiple entries
*/
filename?: string;
/**
* Determine the way css is injected to the document
* js - every js module contains the css and inject it independently
* css - emit bundled css asset to injected via link
* mini-css - inject css modules via webpack mini-css-extract-plugin (can support dynamic splitting but order is not deterministic, requires minimum version 1.3.9)
* none - will not generate any output css (usually good for ssr bundles)
*/
cssInjection?: 'js' | 'css' | 'mini-css' | 'none';
/**
* Determine the runtime stylesheet id kind used by the cssInjection js mode
* This sets the value of the st_id attribute on the stylesheet element
* default for dev - 'module'
* default for prod - 'namespace'
*/
runtimeStylesheetId?: 'module' | 'namespace';
/**
* Config how error and warning reported to webpack by stylable
* auto - Stylable warning will emit Webpack warning and Stylable error will emit Webpack error
* strict - Stylable error and warning will emit Webpack error
* loose - Stylable error and warning will emit Webpack warning
*/
diagnosticsMode?: 'auto' | 'strict' | 'loose';
/**
* Target of the js module
* oldie - ES3 compatible
* modern - ES2105 compatible
*/
target?: 'oldie' | 'modern';
/**
* Set the