Inline Webpack CSS Modules classNames, reducing bundle size. https://npm.im/constant-locals-loader

*constant-locals-loader.md

constant-locals-loader for Webpack

This loader optimizes the output of mini-css-extract-plugin and/or css-loader, entirely removing the potentially large CSS classname mappings normally inlined into your bundle when using CSS Modules.

Run npm install constant-locals-loader, then make these changes in your Webpack config:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
+         'constant-locals-loader',
          {
            loader: MiniCSSExtractPlugin.loader,
            options: {
+             esModule: true,
            },
          },
          {
            loader: 'css-loader',
            options: {
              modules: true,
+             localsConvention: 'camelCaseOnly',
+             esModule: true,
            },
          },
        ],
      },
    ],
  },
  plugins: [new MiniCSSExtractPlugin({})],
};

constant-locals-loader.js

/**
 * Copyright 2020 Google Inc. All Rights Reserved.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *     http://www.apache.org/licenses/LICENSE-2.0
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

// This tweak allows Webpack to completely dissolve intermediary className mappings.
// The hashed/prefixed versions of imported classNames (style.foo) get inlined where they are used.
// Example output improvement: https://gist.github.com/64b04c7d8fff564e3047226493597cc8
module.exports = function(code) {
  return code.replace(/export\s+default\s*(\{[^}]+\})\s*;?/, (s, json) => {
    try {
      const obj = JSON.parse(json);
      let out = '';
      for (let key in obj) {
        // generated CSS classes don't contain characters that require escapement
        let val = obj[key];
        out += `export const ${key} = "${val}";`;
      }
      return out;
    } catch (e) {
      return s;
    }
  });
};

package.json

{
  "name": "constant-locals-loader",
  "version": "0.1.0",
  "main": "constant-locals-loader.js",
  "repo": "gist:3436591071d",
  "homepage": "https://gist.github.com/developit/3436591071d6b8f12dc87ca53c20dfa6",
  "scripts": { "prepack": "mv *constant-locals-loader.md README.md", "postpack": "mv README.md *constant-locals-loader.md" },
  "author": "Jason Miller <jason@developit.ca>",
  "license": "Apache-2.0"
}