Webpack optimization of styles, classes?

Question

css

At the entrance there are such classes

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

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

How to get the output

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

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

UPD:
I tried to use postcss-merge-selectors but it works so crookedly that it hurts to watch

Answer 1

postcss-merge-selectors - I didn't delve into the essence of this plugin, but it seems to me that it works if your selectors are different, and the styles inside are the same, then it merges them.
in your case it is better to use extend

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

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

or in this way

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

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

.class_2 {
    @extend %position;
}

Answer 2

Because the display rule for your component is set by the css selector , not the key of its own style property .
This is how it will work:

var leftMenu = document.querySelector(".left-menu");
var displayValue = window.getComputedStyle(leftMenu,null).getPropertyValue("display");
console.log(displayValue === 'none');

Answer 3

leftMenu.style.display are inline styles. If you set styles via CSS, they will not appear in the style property of the element. They need to be read differently.

Answer 4

if(screen.height =< 1000 )