Как минимизировать имена классов css в сборке webpack?

Question

[andrewayder]

Всем привет, я очень люблю длинные названия классов css к примеру
.my-super-puper-class__puperrest-class
разумеется при таком подходе в scss размер файла очень неоптимизированый даже после cssnano/cleanCss так как плагины не меняют названия классов.
Я хочу получить чтоб код который к примеру

.my-super-puper-class .more-puper-class__the-most-puper-class {
  cursor: help;
}

стал

/*имеет ли смысл оптимизатору сжимать имена до .a .b вместо .a .b__c ?*/
.a .b {
  cursor: help;
}

возможно ли это?

Answer 1

[profesor08]

Раз используешь sass, то твой код должен будет выглядеть как-то так:

.my-super-puper-class {
  .the-most-puper-class {
    cursor: help;
  }
}

Или вот так, но вот так лучше не делать. Так как потом будет не удобно это дебажить или править.

.my-super-puper-class {
  &__the-most-puper-class {
    cursor: help;
  }
}

Answer 2

[resibe]

У вас есть 2 главных пути, используя статический препроцессор (не сможет обработать js) и линкер css-loader (с js)
При подходе с лоадером вам понадобится https://github.com/neatsoftware/webpack-minimal-cl... и помните о подходе с использованием css-модулей
Настройка для webpack.config.js (так как я использою vue то здесь css:{/*плагины или правила css*/})

const MinimalClassnameGenerator = require("webpack-minimal-classnames");
module.exports = defineConfig({
css: {
    loaderOptions: {
      css: {
        modules: {
          getLocalIdent: MinimalClassnameGenerator({ length: 1 }),
        },
      },
    },
})

Примерчик модульного подхода

<template>
  <nav :class="$style['super-puper-class']">
  </nav>
</template>

<style lang="scss" scoped module>
.super-puper-class {
  background: yellow;
}
</style>

В случае когда вам нужно без js - с модулями не получится.
Но можно использовать
https://www.npmjs.com/package/posthtml-minify-clas...
Работу с которым я сейчас изучаю))