How to merge the contents of media mixins in sass?

Question

Sass

Example:

@mixin media-sm() {
    @media (min-width: 700px) {
        @content;
    }
}

h1{
   font-size: 40px;
   @include media-sm {
        font-size: 30px;
   }
}

h2{
   font-size: 20px;
   @include media-sm {
        font-size: 15px;
   }
}

It is convenient to use mixins to write adaptive styles in this way, directly in a particular class. But the result of generation is not happy.
In the generated file, each class is wrapped in a separate media query. Is it possible to somehow combine the contents of mixins under one media query, while maintaining the structure of the source code. Or suggest a better approach

Answer 1

Create postcss.config.js, and download via npm css-mqpacker (it belongs to PostCSS) and include it in postcss config.
Here is an example article: https://webdesign.tutsplus.com/ru/tutorials/using-...
Or... pogugli.com/?353838