Incorrect media query concats

[romainmenke]

@import "ignore.css" (min-width: 25em);

/* ignore.css */
@import "http://css-screen" screen;

Becomes :

@import "http://css-screen" (min-width: 25em) and screen;

Should be :

@import "http://css-screen" screen and (min-width: 25em);

---

It might be interesting to adopt our media query parser : https://github.com/csstools/postcss-plugins/tree/postcss-preset-env--v8/packages/media-query-list-parser#readme

It has a typed object model which makes it easier to avoid these issues.

---

Alternatively it is possible to "special case" these keywords :

• screen
• print
• all
• not

And then sorting the media query lists :

1. these keywords first
2. everything else later
3. join with and

[RyanZim]

Sorry, my CSS knowledge isn't good enough here, why does order matter here?

[romainmenke]

https://w3c.github.io/csswg-drafts/mediaqueries/#mq-syntax

The syntax description is fairly complex but as a rule things like screen can not appear after (min-width: 300px)

simplified : <modifier> <type> and <condition> and <condition>

valid :

@media screen {};
@media only screen {}
@media screen and (min-width: 300px) {}
@media not screen {}
@media not screen and (min-width : 300px) {}
@media screen and (min-width: 300px) and (min-height: 300px) {}

Not valid :

@media (min-width: 300px) and screen {}
@media (min-width: 300px) and not screen {}
...

[RyanZim]

It might be interesting to adopt our media query parser : https://github.com/csstools/postcss-plugins/tree/postcss-preset-env--v8/packages/media-query-list-parser#readme

How complicated would this be?

[romainmenke]

How complicated would this be?

Very, and given that no one has ever opened an issue about this I don't know if it is worth it.

[RyanZim]

In that case, I think I'll merge your regex hack and see if anyone complains 😉

[romainmenke]

Thank you for the reviews and the release 🙇

[RyanZim]

Thanks for all your contributions. BTW, you're now collaborator here; I'll still have to do releases, and we should probably still do PRs mostly, but you do have the merge bit.

[romainmenke]

Thank you for trusting me with this package 🎉

Yes I also prefer to do PR's, it so valuable to have another opinion on changes :)