make classnames short

frontend/package-lock.json

@@ -7473,6 +7473,12 @@
       "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
       "dev": true
     },
+    "incstr": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/incstr/-/incstr-1.2.3.tgz",
+      "integrity": "sha512-ySi29Lzdc3QnB1LzZgRf5kl59m5tPucNagrAyJJ9rWz4+Pa6IxAHSNyUHYvEvaj6QPwWAY2/thi3Rxt45qi3HQ==",
+      "dev": true
+    },
     "indent-string": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",

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",

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,
   };