Minify class names using css-module?

Question

webpack

Hello, I decided to try minifying the css class names for a bit of obfuscation and minification.
To do this, I use css-modules with the setting

getLocalIdent: MinimalClassnameGenerator({ length: 1 })
//где  MinimalClassnameGenerator — https://github.com/neatsoftware/webpack-minimal-classnames

and css class names are indeed minified, but in the js bundle I found this

const N = { class: "super-puper-class" },
 $style: {
              "super-puper-class": "J",

Which suggests that the names were minified only on the css side and their js designations did not change, this option does not change much and I would like the real minimization of the names, and not by half, has anyone come across something similar ... Did you manage to find a solution while nothing could be found in https://github.com/webpack-contrib/css-loader#auto (

Answer 1

Magic doesn't exist, friend.
What does the webpack loader actually do? It takes some file as input, does something with it and produces a js-module (as a string) with the result + some side effects.
Accordingly, the css-loader for modules does (exaggerated) 2 things:
1. Generates a js module with an object of the form from the input css

{ [ключ - настоящее имя класса]: [значение - минифицированное] }

and gives the result to js.
2. Replaces real names in css with minified ones and saves them separately.
To get what you want, you need to add a loader for .js files that will remove all css module imports from the code (but keeping the results) and replace all view calls $style.classNamewith values ​​from these modules.
Googled it, someone must have written something like that.)
Well, in any case, for this to work, you need a guarantee that you don’t have any dynamics in the code for working with css modules, i.e. something like this: , guaranteed to break any of those things. $style[somevar + '__bold']