How to minimize css so that identical blocks are not duplicated?

Question

css

There is CSS:

@media screen and (max-width: 500px) {
    html {
      font-size: 8px; } }
 @media screen and (max-width: 500px) {
      .main-header .logo {
        display: none; } }

I would like to automatically merge such pieces into one block:

@media screen and (max-width: 500px) {
    html {
      font-size: 8px; }
    .main-header .logo {
        display: none; }}

gulp-cssnano does not do this, maybe there is another task for gulp?

Answer 1

gulp-group-css-media-queries

Answer 2

gulp-combine-mq