Position of nested media query can cause invalid CSS

[brycewray]

I am using Hugo 0.117.0, one dependency of which is v2.12.7 of minify. While locally testing the relatively new CSS nesting standard (now supported by the current versions of Chrome, Firefox, and Safari), I have observed that the inclusion of a nested @media query causes minify to eliminate the required whitespace surrounding the + and - operators within a clamp() statement if the statement follows the media query within the same class or element. (I couldn't reproduce the same problem with calc().)

Examples

This CSS doesn't have the problem:

.myClass {
  & h1 {
    font-size: clamp(2.5rem, 1rem + 3vw, 3.5rem);
  }
  @media screen and (min-width: 1024px) {
    width: 40%;
  }
}

As of now, minify turns the first CSS into:

.myClass{& h1 { font-size: clamp(2.5rem, 1rem + 3vw, 3.5rem); } @media screen and (min-width: 1024px) { width: 40%; }};

But this CSS does have the problem:

.myClass {
  @media screen and (min-width: 1024px) {
    width: 40%;
  }
  & h1 {
    font-size: clamp(2.5rem, 1rem + 3vw, 3.5rem);
  }
}

As of now, minify turns the second CSS into:

.myClass{@media screen and (min-width:1024px){width: 40%; } & h1 { font-size: clamp(2.5rem,1rem+3vw,3.5rem); } }}}

cc: @bep @jmooring

[tdewolff]

Thanks for the issue. The CSS minifier does not support this syntax yet, but now it handles the "error" better. This should be fixed now!

[brycewray]

Thanks for the issue. The CSS minifier does not support this syntax yet, but now it handles the "error" better. This should be fixed now!

@tdewolff Thanks! Which version of minify?

[tdewolff]

I've just released v2.12.9