stylable-webpack-plugin v1.1.7

Stylable Webpack Plugin

The Stylable Webpack Plugin (for Webpack version 4x) 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:

npm install stylable-webpack-plugin --save-dev

Install using yarn:

yarn add stylable-webpack-plugin --dev

Sample dev config:

// 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 and their default values.

Sample production configuration

new StylableWebpackPlugin({ 
    outputCSS: true, 
    includeCSSInJS: false,
    optimize: {
      removeUnusedComponents: true,
      removeComments: true,
      removeStylableDirectives: true,
      classNameOptimizations: true,
      shortNamespaces: true,
      minify: true
    }
})

Asset handling

CSS assets are handled by a url-loader + file-loader combination.

 module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 8192
            }
          }
        ]
      }
    ]
  }

Compatibilities with existing loading mechanisms

If you're using css_loader/extract make sure to exclude .st.css files from the process. You cannot use loaders with Stylable .st.css files

How it works (in case you're wondering)

The plugin transforms all Stylable files into JavaScript modules with CSS rendering capabilities.

Every bundle that contains Stylable modules is injected with a stylable-bootstrap-module as its entrypoint. This module is responsible for:

• Ensuring that all of the transformed modules are imported in the proper order.
• Initializing the runtime DOM renderer.

The resulting renderer orders the CSS by the depth of each module, calculated from its dependencies and component dependencies.

Stylable bootstrap module The stylable-bootstrap-module is a generated module injected into the bundle as its entrypoint and ensures all Stylable modules are injected into the runtime renderer.

Runtime DOM renderer The core Stylable runtime renderer in the browser is responsible for rendering stylesheets in the correct order in the DOM.