Can Gulp-Sass preprocessor do this?

Question

Sass

If I write scss code like this:

First option

.header {
  padding: 10px;
}
.main {
  margin: 10px;
}
.footer {
  font-size: 10px;
}

@media (min-width: 320px) {
  .header {
    padding: 20px;
  }
  .main {
    margin: 20px;
  }
  .footer {
    font-size: 20px;
  }
}

@media (min-width: 660px) {
  .header {
    padding: 60px;
  }
  .main {
    margin: 10px;
  }
  .footer {
    font-size: 10px;
  }
}

then at the output through the run

gulpfile.js

function style() {
  return gulp.src('./source/sass/*.scss')
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({cascade: true}))
    .pipe(gulp.dest('./build/css'))
    .pipe(cleancss( {level: { 1: { specialComments: 0 } } }))
    .pipe(rename({ suffix: '.min', prefix : '' }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./build/css'))
    .pipe(browsersync.stream());
};

I get this in the .css file:

First output

.header {
  padding: 10px; }
.main {
  margin: 10px; }
.footer {
  font-size: 10px; }

@media (min-width: 320px) {
  .header {
    padding: 20px; }
  .main {
    margin: 20px; }
  .footer {
    font-size: 20px; } }

@media (min-width: 660px) {
  .header {
    padding: 60px; }
  .main {
    margin: 60px; }
  .footer {
    font-size: 60px; } }

So far everything is clear))
If I write scss like this:

Second option

.header {
  padding: 10px;

  @media (min-width: 320px) {
    padding: 20px;
  }

  @media (min-width: 660px) {
    padding: 60px;
  }
}

.main {
  margin: 10px;

  @media (min-width: 320px) {
    margin: 20px;
  }

  @media (min-width: 660px) {
    margin: 10px;
  }
}

.footer {
  font-size: 10px;

  @media (min-width: 320px) {
    font-size: 20px;
  }

  @media (min-width: 660px) {
    font-size: 10px;
  }
}

then I get the following output:

Second output

.header {
  padding: 10px; }
  @media (min-width: 320px) {
    .header {
      padding: 20px; } }
  @media (min-width: 660px) {
    .header {
      padding: 60px; } }

.main {
  margin: 10px; }
  @media (min-width: 320px) {
    .main {
      margin: 20px; } }
  @media (min-width: 660px) {
    .main {
      margin: 10px; } }

.footer {
  font-size: 10px; }
  @media (min-width: 320px) {
    .footer {
      font-size: 20px; } }
  @media (min-width: 660px) {
    .footer {
      font-size: 10px; } }

Now the actual question) Can I write according to the second option, but get the First output in the css file through the Gulp run?)) Is there such a plugin for gulp?

Answer 1

https://www.npmjs.com/package/gulp-group-css-media...
https://github.com/jakubpawlowicz/clean-css or rather mergeMedia
https://github.com/hail2u/node- css-mqpacker