@Vladyslawx

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

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

.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 но он на столько криво работает что аж больно смотреть
  • Вопрос задан
  • 90 просмотров
Пригласить эксперта
Ответы на вопрос 1
inkShio
@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;
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы