Group media queries

[dhoko]

CSS next :

/* custom media query usage */
@media (--viewport-medium) {
  body { font-size: calc(var(--fontSize) * 1.2); }
}

/* custom media query usage */
@media (--viewport-medium) {
  p { font-size: calc(var(--fontSize) * 1.2); }
}

CSSnext generates

/* custom media query usage */
@media (max-width: 50em) {
  body { font-size: 1.2rem; }
}


/* custom media query usage */
@media (max-width: 50em) {
  p { font-size: 1.2rem; }
}

It would be nice if media queries could be grouped:

/* custom media query usage */
@media (max-width: 50em) {
  body { font-size: 1.2rem; }
  p { font-size: 1.2rem; }
}

No ?

[bloodyowl]

that would create some issues with rules priorities

[MoOx]

It's completly useless & dangerous
Gzip does the job.
If you really want to do a such thing you will be able to plug cssnext & some other plugin like. Please follow issue #3

[dhoko]

with a plugin it's ok, but yeah it can be dangerous 😿

[Mannaio]

@dhoko https://github.com/hail2u/node-css-mqpacker can do the job for you

[MoOx]

Like I said, bad practice ;)