Webpack optimization styles classes?

At the entrance there is here 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 he is so crooked is that, as much as it hurts to watch
March 25th 20 at 13:42
1 answer
March 25th 20 at 13:44
postcss-merge-selectors - in the essence of this plugin did not penetrate, but I think it works if you have different selectors and styles the same inside then he glues 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 version

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

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

.class_2 {
 @extend %position;
}

Find more questions by tags WebpackSassCSS