Группировка (оптимизация) классов и стилей CSS на выходе из WebPack 4?

Question

[Михаил Р.]

Приветствую!

Собираю проект через webpack 4 и на выходе получаю "полу-оптимизированный" css.

Выдержка из webpack.config.js

{
	test: /\.((s[ac]|c)ss)$/,
	use: [
		PLUGINS.mini_css_extract_plugin.loader,
		{
			loader: 'css-loader',
			options: {
				sourceMap: !isProduction
			}
		},

		{
			loader: 'postcss-loader',
			options: {
				ident: 'postcss',
				sourceMap: !isProduction,
				plugins: (() => {
					return isProduction ? [
						require('autoprefixer')({
							browsers: ['last 2 versions']
						}),
						require('cssnano')({
							preset: 'default'
						}),
						require("css-mqpacker")
					] : []
				})()
			}
		},

		{
			loader: 'sass-loader',
			options: {
				outputStyle: 'expanded',
				sourceMap: !isProduction
			}
		},
	]
},

1. Перед сборкой проекта имею следующий scss код:

.class_1 {
	width: 1px;
}

.class_2 {
	width: 1px;
}

.class_3 {
	width: 2px;
}

2. После сборки на выходе имею следующее:

.class_1, .class_2 {
	width: 1px
}

.class_3 {
	width: 2px
}

Вроде бы все замечательно и оптимизация классов произошла, НО! Пробуем изменить последовательность классов в scss и запустить сборку заново...

3. Перед сборкой проекта имею следующий scss код (поменял местами class_2 и class_3):

.class_1 {
	width: 1px;
}

.class_3 {
	width: 2px;
}

.class_2 {
	width: 1px;
}

4. После сборки на выходе имею следующее:

.class_1 {
	width: 1px
}

.class_3 {
	width: 2px
}

.class_2 {
	width: 1px
}

Хотелось бы оптимизировать все классы, а не только те, которые идут исключительно друг за другом.

Подскажите плагин (и его настройки), чтобы объединять названия классов, если у них одинаковые стили?

Спасибо!

UPD:
В связи с тем, что многих будоражит width: 2px; - заменим его на color: red;

На входе:

.class_1 {
	width: 1px;
}

.class_3 {
	color: red;
}

.class_2 {
	width: 1px;
}

На выходе:

.class_1 {
	width: 1px
}

.class_3 {
	color: red
}

.class_2 {
	width: 1px
}

Comments

[Сергей delphinpro]

Почему бы вам не оптимизировать свои стили еще на этапе разработки?
Например, использовать экстенды для одинаковых наборов стилей.

.class_1 {
  width: 1px
}

.class_3 {
  width: 2px
}

.class_2 {
  @extend .class_1;
}

[Михаил Р.]

Сергей delphinpro, думал над этим, но слишком много микро-менеджмента, особенно, если scss код переваливает за 10-20к строк...

[Сергей delphinpro]

Mike Ro, если проект большой, ему все равно нужна документация, хотя бы минимальная. Подобные вещи можно выносить в плейсхолдеры и документировать.

/// Этот стиль используется бла-бла-бла… (располагать в отдельном файлике)
%super-style { width: 1px; }

.class1 { @extend %super-style; }
.class2 { @extend %super-style; }

[AngReload]

Mike Ro, чел, то что ты хочешь изменит поведение CSS, смотри:
<div class="class2 class3">
у дива будет ширина 1 при таком

.class_1 { width: 1px; }
.class_3 { width: 2px; }
.class_2 { width: 1px; }

а при таком ширина станет равна 2

.class_1, .class_2 { width: 1px; }
.class_3 { width: 2px; }

Так что это небезопасная оптимизация.

[Михаил Р.]

Сергей delphinpro, как вариант, но это все равно ручной труд... а хочется автоматику :)

[Михаил Р.]

AngReload, что Вы прицепились к свойствам? Они были написаны для примера, чтобы наглядно объяснить проблемы в оптимизации css на выходе... ладно, дополнил вопрос, читайте.

[AngReload]

Mike Ro, я посмотрел несколько оптимизаторов, и они не попытались переставить классы. На самом деле реализовать это сложнее чем кажется, и по производительности будут очень большие затраты.

Answer 1

[alex]

Хотелось бы оптимизировать все классы

это называется не оптимизация, а «я нифига не понимаю че происходит»

до «оптимизации»
<div class="class_3 class_2"></div> // 1px

после «оптимизации» (которую вы ожидаете) ширина сломается, т.к. class_2 уедет вверх:
<div class="class_3 class_2"></div> // 2px

поэтому здесь ошибки нет никакой, все ок, оптимизатор ваш нормально отрабатывает.

Comments

[Михаил Р.]

На входе:

.class_1 {
	width: 1px;
}

.class_3 {
	color: red;
}

.class_2 {
	width: 1px;
}

На выходе:

.class_1 {
	width: 1px
}

.class_3 {
	color: red
}

.class_2 {
	width: 1px
}

поэтому здесь ошибки нет никакой, все ок, оптимизатор ваш нормально отрабатывает

здесь видимо ошибки тоже нет...

[alex]

Mike Ro, ваш плагин (как и многие другие) делает такую оптимизацию только для смежных деклараций, о чем явно написано в описании плагина. то что вы хотите, реализовать не так просто и связано это в первую очередь с производительностью. тем не менее есть вот это, но и там не без ложки дегтя

[Михаил Р.]

Alex, спасибо! То, что нужно!

Answer 2

[ar5]

Попробуй этот плагин https://github.com/NMFR/optimize-css-assets-webpac...
Оптимизирует финальную сборку. Под капотом тот же cssnano

Comments

[Михаил Р.]

Мою задачу не решает...