style() not style!

Usage no npm install needed!

<script type="module">
  import styleLoaderTreeshakeable from '';



Import styles as a functions to support treeshaking.

import styles from "./Butler.mod.css";

-const Butler = props => <div className={styles.alfred}>I am Butler</div>;
+const Butler = props => <div className={styles().alfred}>I am Butler</div>;

This is a companion plugin for rollup-plugin-postcss-treeshakeable.



npm install style-loader-treeshakeable --save-dev

Add to webpack config

You'll need to replace style-loader with style-loader-treeshakeable

  test: /\.css$/,
  use: [
-    "style-loader",
+    "style-loader-treeshakeable",
      loader: "css-loader",
      query: { modules: true }


This plugin is only really useful if you are working on a library exposing components, produce your bundle with Rollup, develop with Webpack, use CSS modules and want to support treeshaking CSS of components your library consumers are not using.

The rollup-plugin-postcss-treeshakeable requires imported CSS to be a function. That's why this plugin serves as a replacement for style-loader which lets you write styles().foo instead of This enables the components that support treeshaking to be used by Rollup and Webpack.