at-media + at-keyframes not minified correctly

[firewizard]

Minifier break css when at-media & at-keyframes are used together.

This css:

@media (min-width: 0) and (max-width: 360px) {
    @keyframes loop {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(calc(-100% + 360px));
        }
    }
}

@media (min-width: 480px) {
    @keyframes loop {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(calc(-100% + 480px));
        }
    }
}

.a {
    color: red
}

when minified and then re-formatted, produces this result:

@media (min-width: 0) and (max-width: 360px) {
    @keyframes loop {
        0% {
            transform: translateX(0)
        }
        100% {
            transform: translateX(calc(-100% + 360px))
        }
    }@media (min-width: 480px) {
    @keyframes loop {
        0% {
            transform: translateX(0)
        }
        100% {
            transform: translateX(calc(-100% + 480px))
        }
    }
} .a {
      color: red
  }

Notice the missing "}". If there's only one at-media + at-keyframes block, it works well, if there are more, it breaks all of them except the last one.

[natxet]

Hi firewizard, can you make a pull request to fix this issue please? Thanks!

[firewizard]

That's the problem, I wasn't able to figure out a fix for this, otherwise I would've opened a PR instead of an issue.

[natxet]

;-) Sorry, I'm just maintaining this repo, I wish I could help, lets see if someone can figure it out!

[yess-webioza]

same problem with @supports block

@supports (-ms-overflow-style: none) { .ps { overflow: auto !important; } }

produces:

@supports (-ms-overflow-style: none){.ps { overflow:auto !important}

there's missing last curly bracket

[Ruud-Zuiderlicht]

Also see #29