Webpack оптимизация стилей, классов?

Question

[Владислав]

На входе есть вот такие классы

.class_1 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.class_2 {
    position: absolute;
    top: 0;
    bottom: 0;
}

Как получить на выходе

.class_1, .class_2 {
    position: absolute;
    top: 0;
    bottom: 0;
}

.class_1 {
    right: 0;
    left: 0;
}

UPD:

Пробовал использовать postcss-merge-selectors но он на столько криво работает что аж больно смотреть

Comments

[VegasChickiChicki]

А в чем вопрос?

[Rustam Bainazarov]

VegasChickiChicki, в автоматизации склейки одинаковых свойств с сохранением каскадности.

Answer 1

[inkShio]

postcss-merge-selectors - в суть этого плагина не вникал, но мне кажется о работает если у тебя селекторы разные, а стили внутри одинаковые тогда он их склеивает.

в твоем случае лучше использовать extend

.class_1 {
    @extend .class_2;
    right: 0;
    left: 0;
}

.class_2 {
    position: absolute;
    top: 0;
    bottom: 0;
}

или в таком варианте

%position {
    position: absolute;
    top: 0;
    bottom: 0;
}

.class_1 {
    @extend %position;
    right: 0;
    left: 0;
}

.class_2 {
    @extend %position;
}