LESS: is it possible to combine the same @media into one?

Question

css

There is approximately the following LESS structure:

.class1 {
    font-size: 20px;
        @ media (max-width: 400px) {
            font-size: 10px;
        }
}
.class2 {
    color: blue;
        @ media (max-width: 400px) {
            color: red;
        }
}

What will be the output of CSS:

.class1 {
    font-size: 20px;
}
@ media (max-width: 400px) {
    .class1 { font-size: 10px; }
}
.class2 {
    color: blue;
}
@ media (max-width: 400px) {
    .class2 { color: blue; }
}

Is it possible to make sure that all the same media-queries are collected in one? That is, to get the following:

.class1 {
    font-size: 20px;
}
.class2 {
    color: blue;
}
@ media (max-width: 400px) {
    .class1 { font-size: 10px; }
    .class2 { color: blue; }
}

Answer 1

This is what post processors do. For example, gulp-combine-media-queries