make classnames short

umputun · May 6, 2021 · b3beca1 · b3beca1
1 parent 1ee571a
commit b3beca1
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 2 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -87,6 +87,7 @@
     "html-webpack-plugin": "^5.2.0",
     "husky": "^4.3.6",
     "identity-obj-proxy": "^3.0.0",
+    "incstr": "^1.2.3",
     "jest": "^26.6.3",
     "jest-fetch-mock": "^3.0.3",
     "jest-localstorage-mock": "^2.4.6",

diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js
@@ -9,6 +9,7 @@ const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const RefreshPlugin = require('@prefresh/webpack');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+const incstr = require('incstr');
 const babelConfig = require('./.babelrc.js');
 
 const NODE_ID = 'remark42';
@@ -19,6 +20,29 @@ const DEVSERVER_BASE_PATH = process.env.DEVSERVER_BASE_PATH || 'http://127.0.0.1
 const PUBLIC_FOLDER_PATH = path.resolve(__dirname, 'public');
 const CUSTOM_PROPERTIES_PATH = path.resolve(__dirname, './app/custom-properties.css');
 
+const genId = incstr.idGenerator();
+const modulesMap = {};
+
+function getLocalIdent(loaderContext, _, localName, options) {
+  if (!options.context) {
+    options.context = loaderContext.rootContext;
+  }
+
+  const filepath = path.relative(options.context, loaderContext.resourcePath).replace(/\\/g, '/');
+
+  if (!modulesMap[filepath]) {
+    modulesMap[filepath] = { id: genId(), genId: incstr.idGenerator(), classNames: {} };
+  }
+
+  const m = modulesMap[filepath];
+
+  if (!m.classNames[localName]) {
+    m.classNames[localName] = m.genId();
+  }
+
+  return `${m.id}_${m.classNames[localName]}`;
+}
+
 /**
  * Generates excludes for babel-loader
  *
@@ -130,9 +154,10 @@ module.exports = (_, { mode, analyze }) => {
       {
         loader: 'css-loader',
         options: {
+          importLoaders: 1,
           modules: {
-            mode: 'local',
             localIdentName: '[name]__[local]_[hash:5]',
+            getLocalIdent: isDev ? undefined : getLocalIdent,
           },
         },
       },
@@ -195,7 +220,7 @@ module.exports = (_, { mode, analyze }) => {
 
   const config = {
     entry,
-    devtool: 'source-map',
+    devtool: isDev ? 'source-map' : false,
     resolve,
   };