Combine / group together multiple css classes into one?

Question

css

https://vue-loader.vuejs.org/guide/css-modules.htm...
https://webpack.js.org/loaders/css-loader/
Working with css modules, I thought this is what comes out as a result of obfuscation something like this

<section class="classHash classHash classHash classHash"></section>

I would like to combine all classes into one as done in instagram

<section class="classHash"></section> // большая часть классов такие

That is, all class parameters are combined into one.
How to implement this?
Is there already a package or config for webpack, vue.js?
Or drink yourself?
If you do it yourself, most likely you will need to dig css-loader and finish it.

Answer 1

A different approach to the implementation of design styles! Both the first option and the second one are quite acceptable and have the right to exist. Depending on the level and complexity of the project, it is precisely the need to use different methods.
I will not write a lot of words, I will try to collect them into sentences, I will answer briefly:
1) Splitting styles is often necessary if the project is large and using the style repeatedly to avoid dubbing (here we are talking about optimization) split styles. Usually crushing goes: color, font, fill, indents, location.
2) If the project is not big and you don't have the same block often, then one style is always enough.
Not a single service will automatically make your service, there may be cyclicity - and this will lead to recursion of building the result.
I don't know if I got the idea across! tried :)