Очередной метод снизить объем SPA приложения (webpack)

Так уж случилось, что в последнее время мне приходится осваивать новые инструменты. Очередным таким инструментом стал webpack.
Инструмент интересный, но после переезда с Google Closure * для меня стало загадкой, почему webpack не ужимает имена классов, как это делает Google Closure Stylesheets.
За день, на коленке, мною был написан plugin который вполне не плохо реализовал этот функционал.
Более подробное описание ниже.

И так начнем с ТЗ. Это делается, во первых, для себя, во вторых, для тех кто еще не понял, что ту происходит, но каким-то образом попал на эту страницу.
Лично я люблю писать большие и красивые длинные имена классов, по которым сразу понятно, что происходит.
Например:

.header {
  position: fixed;
  top: 0;
  ...
}
.header a {
  display: block;
  float: right;
  ...
}
.sidebar {
  float:right;
  max-width: 30%;
  ...
}
.sidebar a {
  font-size: 16px;
  ....
}

Но можно же сократить header до h, a sidebar до s, таким образом сэкономив не мало байт не только в CSS, но и JS файлах, т.к. скорее всего ваш JS будет содержать селекторы по именам классов.
Однако, от такого сокращения будет страдать читаемость кода, а как следствие и скорость разработки. По этому надо создать инструмент для проведения данной замены автоматически.

Небольшое пояснение как это работает в Closure

Google Closure состоит из нескольких инструментов, один из которых Google Closure Stylesheets, который является и препроцессором и постпроцессором для таблиц стилей.
Как препроцессор он аналогичен всем своим собратьям, но больше всего он похож на SCSS/SASS.
Как постпроцессор он парсит имена классов создавая словарь замен и заменяет все имена классов на их короткие обозначения.
На пример, код выше станет:

.a {
  position: fixed;
  top: 0;
  ...
}
.a a {
  display: block;
  float: right;
  ...
}
.b {
  float:right;
  max-width: 30%;
  ...
}
.b a {
  font-size: 16px;
  ....
}

А словарь замен будет:

{
  "header": "a",
  "sidebar": "b"
}

На самом деле функционала там намного больше, но статья не о том.
Есть еще Closure Templates, неплохой шаблонизатор, в котором надо отметить все имена классов специальной директивой, что бы потом применить словарь замен к шаблонам.
Например:
{namespace test}

/**
* Test template
*
*/
{template .test}
<div class="{css header}">Header<a href="#">Home</a><a href="#">About</a><header>
...
<div class="{css sidebar}">Sidebar<header>

Так же не надо забывать, что у нас есть JS в котором тоже надо «доработать» имена всех CSS классов:

var header = goog.dom.getElementByClass(goog.getCssName('header'));
var sidebar = goog.dom.getElementByClass(goog.getCssName('sidebar'));

И только когда мы исправим все исходники и отправим их на компиляцию, вместе со словарем замен, то все заработает.
Главный недостаток этого метода, что словарь собран по CSS, т.е. если у вас есть класс который используется только для выборки DOM элемента из JS, то в словарь он может не попасть (а может и попасть, но оговорюсь, что данная статья не обзор Closure Tools).

Вернемся к плагину

Раскидывать везде функции, мне показалось не очень удобно, по этому я решил задавать имена классов по маске ___<%className%>__.
Таким образом стили придут к виду:

.___header__ {
  position: fixed;
  top: 0;
  ...
}
.___header__ a {
  display: block;
  float: right;
  ...
}
.___sidebar__ {
  float:right;
  max-width: 30%;
  ...
}
.___sidebar__ a {
  font-size: 16px;
  ....
}

А работа с DOM в JS, на примере jQuery:

  var header = $('.___header__');
  var sidebar = $('.___sidebar__');

На примере React:

function Header(props) {
  return (
    <div className="___header__">
      {props.children}
    </div>
  );
}

На примере Backbone:

module.exports = Backbone.View.extend({
  tagName: 'div',
  className: '___header__'
});

Оговорюсь сразу, что конструкции типа:

var genClassName = function(v) {
  return '___' + v + '__';
}
module.exports = Backbone.View.extend({
  tagName: 'div',
  className: genClassName('header')
});

работать не будут.
Так же как и стили:

[class*="bold"] {
  font-weight:bolder;
}

Первые шаги

Установив пакет:

npm install --save cssrename-webpack-plugin

И немного доработав webpack.config.js:

const CssRenameWebpackPlugin = require('cssrename-webpack-plugin');
...
module.exports = {
  ...
  plugins: [
    CssRenameWebpackPluginConfig,
     ...
  ]
};

В процессе сборки появится строчка:
«Profit: 355»
Которая будет сообщать о том сколько байт было сэкономлено.

Неудобства и их решения

Но если в животном разнообразном мире JS существует огромное количество библиотек, которые одним парсером не покрыть, то вот CSS в этом вопросе значительно гуманнее, и распарсить его (CSS) значительно проще.
В простейшем виде это будет одно регулярное выражение. По этому почему бы не добавить подобный loader который избавит нас от добавления нижних подчеркиваний хотя бы к CSS.

npm install --save cssrename-loader

Очередные мутации webpack.config.js:

module.exports = {
  module: {
    loaders: [
      {
        test: /.css$/,
        loader: "style-loader!css-loader!cssrename-loader"
      }
    ]
  }
};

То что получилось с тестовым проектом

Update:
Писать я хотел не об этом, но видимо надо добавить.
Далее рассмотрены только стили, выигрыш по JS и шаблонам так просто не посчитать.
Для Google Closure Stylesheets:

Пруф

Что «не пролезло» в Google Closure Stylesheets:
Для Atomic пришлось сделать две замены по регулярным выражениям:

\(((?:(?!\)).)*?)\) => --$1--
\. => --

Для BEM «не пролезло»:

@supports (display: -moz-box) {
    [class*=LineClamp] {
        display: block
    }
}

    @-webkit-keyframes bounce {
        0% {
            -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
            -webkit-filter: blur(5px);
            filter: blur(5px)
        }
        100%, 40% {
            -webkit-transform: translateY(0);
            transform: translateY(0)
        }
        60% {
            -webkit-transform: translateY(-10%);
            transform: translateY(-10%)
        }
    }
@keyframes bounce {
         0% {
             -webkit-transform: translateY(-100%);
             transform: translateY(-100%);
             -webkit-filter: blur(5px);
             filter: blur(5px)
         }
         100%, 40% {
             -webkit-transform: translateY(0);
             transform: translateY(0)
         }
         60% {
             -webkit-transform: translateY(-10%);
             transform: translateY(-10%)
         }
     }

Из Bootstrap «не пролезло»:

border-top: 4px solid 9;
@media all and (transform-3d),(-webkit-transform-3d)
@-ms-viewport {
    width: device-width
}

Из Хабра «не пролезло»:

@charset "UTF-8";

@-moz-document url-prefix() {
    .search-field__select {
        text-indent: .01px;
        text-overflow: ''
    }
}

Автор: edejin

Источник