Hi Habr! 3r3r1292.  3r? 31308. 3r3r1292.  3r? 31308. Not so long ago, I realized that working with CSS in all my applications is a pain for the developer and the user. 3r3r1292.  3r? 31308. 3r3r1292.  3r? 31308. Under the cut are my problems, a bunch of strange code and pitfalls on the way to the correct work with styles. 3r3r1292.  3r? 31308. 3r3r1292.  3r? 31308. 3r31285. online minifiers :
 3r? 31308. 3r3r1292.  3r? 31308. 3r31211. 3r31097. .component1__title {color: red}
.component2__title {color: green}
.component2__title_red {color: red}
3r31257. 3r31258. 3r3r1292.  3r? 31308. Why he could not? 3r3r1292.  3r? 31308. 3r3r1292.  3r? 31308. The minifier is afraid that due to a change in the style declaration mode, something will break in you. For example, if the project will have this code:
 3r? 31308. 3r3r1292.  3r? 31308. 3r31211. 3r31114. 3r31115. Some weird title
3r? 31308. 3r31257. 3r31258. 3r3r1292.  3r? 31308. Because of you, the headline will turn red, and the online minifiers will leave the correct order of the styles declared and it will be green. Of course, you know that the intersection of component1__title and component2__title will never happen, because they are in different components. But how to say about it to the minifier? 3r3r1292.  3r? 31308. 3r3r1292.  3r? 31308. Poryskav documentation, the ability to specify the context of the use of classes, I found only 3r3-31126. csso
. And there is no convenient solution for the webpack out of the box. To go further, we need a small bicycle. 3r3r1292.  3r? 31308. 3r3r1292.  3r? 31308. You need to combine the class names of each component into separate arrays and give it inside csso. Earlier, we generated minified class names using the following pattern: '[componentId]_[classNameId]'. So, class names can be combined simply by the first part of the name! 3r3r1292.  3r? 31308. 3r3r1292.  3r? 31308. Attach the straps and write your own plugin:
 3r? 31308. 3r3r1292.  3r? 31308. 3r31211. 3r31212. /* webpack.config.js * /
3r? 31308. const cssoLoader = require ('path /to /cssoLoader'); 3r? 31308. /* * /
3r? 31308. module.exports = {
/* * /
plugins:[
/* */
new cssoLoader(),
],
}; 3r? 31308. 3r31257. 3r31258. 3r3r1292.  3r? 31308. 3r31211. 3r31212. /* cssoLoader.js * /
3r? 31308. const csso = require ('csso'); 3r? 31308. const RawSource = require ('webpack-sources /lib /RawSource'); 3r? 31308. const getScopes = require ('./helpers /getScopes'); 3r? 31308. 3r? 31308. const isCssFilename = filename => /.css$/.test (filename); 3r? 31308. 3r? 31308. module.exports = class cssoPlugin {
apply (compiler) {
compiler.hooks.compilation.tap ('csso-plugin', (compilation) => {
compilation.hooks.optimizeChunkAssets.tapAsync ('csso-plugin', (chunks, callback) => {
chunks.forEach ( (chunk) => {3r3-331308. //Run through all CSS files 3r3-331308. chunk.files.forEach ((filename) => {3r31-3030. if (! isCssFilename (filename)) {
return; . const asset = compilation.assets[filename]; 3r3-331308. const source = asset.source (); 3r-331308. 3r3-331308. //Create ast from the CSS file 3r330308. //Get the array of arrays with the combined class names 3r3-331308. Const scopes = getScopes (ast); 3r3-331308. 3r3-331308. //Compress ast
8. const {ast: compressedAst} = csso.compress (ast, {3r-31308. Usage: {3r-?33?308. scopes,
},
}); 3r? 31308. const minifiedCss = csso.syntax.generate (compressedAst); 3r? 31308. 3r? 31308. compilation.assets[filename]= new RawSource (minifiedCss); 3r? 31308.}); 3r? 31308.}); 3r? 31308. 3r? 31308. callback (); 3r? 31308.}); 3r? 31308.}); 3r? 31308.}
}
3r? 31308. /* If you want support for sourceMap, asynchronous minification and other amenities, their implementation can be found here https://github.com/zoobestik/csso-webpack-plugin "* /
3r31257. 3r31258.
 3r? 31308. 3r31211. 3r31212. /* getScopes.js * /3r331318. /*
Here lies the function,
which combines class names into
arrays. depending on the component to which the class belongs r3r31308. * /
3r? 31308. const csso = require ('csso'); 3r? 31308. 3r? 31308. const getComponentId = (className) => {3r-31308. const tokens = className.split ('_'); 3r? 31308. 3r? 31308. //For all classes whose names are
//differ from[componentId]_[classNameId],
//return the same component identifier
if (tokens.length! == 2) {
return 'default'; 3r? 31308.}
3r? 31308. return tokens[0]; 3r? 31308.}; 3r? 31308. 3r? 31308. module.exports = (ast) => {3r3-31308. const scopes = {}; 3r? 31308. 3r? 31308. //Run through all the selectors of classes 3r3-31308. csso.syntax.walk (ast, (node) => {3r3-31308. if (node.type! == 'ClassSelector') {3r-31308. return; 3r3-31308.} 3r331308. 3r331318. const componentId = getComponentId (node.name); 3r3-331308. 3r3-331308. 3a3-331308. 3a3-331308. (node.name); 3r3–31308.} 3r3–31308.}); 3r? 31308. 3r? 31308. return Object.values ​​(scopes); 3r? 31308.}; 3r? 31308. 3r31257. 3r31258. 3r3r1292.  3r? 31308. And it was not so difficult, right? Usually, such minification additionally compresses CSS by 3-6%. 3r3r1292.  3r? 31308. 3r3r1292.  3r? 31308. 3r31265. Was it worth it? 3r31266. 3r3r1292.  3r? 31308. Of course. 3r3r1292.  3r? 31308. 3r3r1292.  3r? 31308. In my applications, a quick hot-reload finally appeared, and the CSS began to be broken down by chunks and weigh on average 40% less. 3r3r1292.  3r? 31308. 3r3r1292.  3r? 31308. This will speed up site loading and reduce the time it takes to parse styles, which will affect not only users, but also SEO. 3r3r1292.  3r? 31308. 3r3r1292.  3r? 31308. The article has greatly expanded, but I am glad that someone was able to roll it to the end. Thanks for your time! 3r3r1292.  3r? 31308. 3r3r1292.  3r? 31308. 3r31285. 3r31286.
3r3r1292.  3r? 31308. 3r31290. Materials used 3r31291. 3r3r1292.  3r? 31308. 3r31294.  3r? 31308. 3r31296. 3r31297. Reducing CSS bundle size 70% by
3r31299.  3r? 31308.
3r? 31308. 3r? 31308. 3r? 31308.
! function (e) {function t (t, n) {if (! (n in e)) {for (var r, a = e.document, i = a.scripts, o = i.length; o-- ;) if (-1! == i[o].src.indexOf (t)) {r = i[o]; break} if (! r) {r = a.createElement ("script"), r.type = "text /jаvascript", r.async =! ? r.defer =! ? r.src = t, r.charset = "UTF-8"; var d = function () {var e = a.getElementsByTagName ("script")[0]; e.parentNode.insertBefore (r, e)}; "[object Opera]" == e.opera? a.addEventListener? a.addEventListener ("DOMContentLoaded", d,! 1): e.attachEvent ("onload", d ): d ()}}} t ("//mediator.mail.ru/script/2820404/"""_mediator") () (); 3r? 31307. 3r? 31308.