Grouping Media Queries in Stylus

Question

Handling media queries with preprocessors is very cool, but I didn't found a way to group same rules to avoid repeated media queries rules like:

Example 1

@media only screen and (max-width: 600px) {
  body {
    background-color: #f00;
  }
}
@media only screen and (max-width: 600px) {
  .div1 {
    background-color: #0c0;
  }
}
@media only screen and (max-width: 600px) {
  .div2 {
    background-color: #00c;
  }
}

I to want to group the same rules into a single one like:

Example 2

@media only screen and (max-width: 600px) {
  body {
    background-color: #f00;
  }
  .div1 {
    background-color: #0c0;
  }
  .div2 {
    background-color: #00c;
  }
}

MY STYLUS CODE

This is how I am handling the media queries in Stylus:

media_queries = {
  mobile  : "only screen and (max-width: 600px)",
  tablet  : "only screen and (min-width: 601px) and (max-width: 800px)",
  desktop : "only screen and (min-width: 801px)"
}

And I have a function to call the media sizes:

for_breakpoint(breakpoints)
  conditions = ()
  for breakpoint in breakpoints
    push(conditions, media_queries[breakpoint])
  conditions = join(", ", conditions)
  @media conditions
    {block}

After that, I call it inside the rules I want to have a specific media query:

+for_breakpoint(mobile)
  .div1
    background-color red

But the problem is that i ends having a tons of repeated media queries like the ones on example 1. Is there a way to group them like the example 2?

Answer 1

Use plugin groupCssMediaQueries:

gulp.task('css', function() {
    gulp.src('./styl/*.styl')
        .pipe(stylus({
            use: nib()
        }))
        .pipe(groupCssMediaQueries())
        .pipe(gulp.dest('./public/css/'))
})