postcss/postcss-import

Incorrect media query concats

romainmenke opened this issue · 8 comments

romainmenke commented 
@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 commented

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

romainmenke commented

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 commented

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 commented

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 commented

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

  • 🎉1
romainmenke commented

Thank you for the reviews and the release 🙇

RyanZim commented

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 commented

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 :)

  • 👍1