Nested media queries problem about include-media HOT 6 CLOSED

I believe we could add further checking to make sure the generated media queries actually make sense but I am not eager to do it for simplicity reasons. I strongly believe it is not the responsibility of include-media to make sure the generated media queries actually match anything.

Maybe a plugin then.

from include-media.

I've yet to come across a real case, where this sort of nested media queries really makes sense.
If you have full control over your stylesheet, this will never be needed, as you can abstract anything into a range between two breakpoints. On the contrary, the example is ambiguous as I would have thought that the inner statements overwrite the outer ones because that's how the cascade works.

from include-media.

@nirazul I can agree that this example is ambiguous, as I'm understanding it differently, as the browsers are computing it - in a way that all conditions separated by and need to me met.

Another good example of it is this:

@media (min-width: 769px) and (max-width: 1024px) and (max-width: 321px) {
  width: 60%;
}

That will never be applied as max-width: 321px + min-width: 769px exclude themselves. In this case that rule should be removed from the css.

For the case in which it might occur is quite simple. Imagine that you got a mixin that got some include-media call inside and nest it inside another include-media closure. You do not have the visibility what is happening until the end css will be generated.
You can parametrise the mixin to allow generating code for each media query inside it but it will be prone to error and hard to maintain.

I agree with @hugogiraudel as it should be a part of another plugin / post generation step thou.

from include-media.

I think that instead of "rewrite" your media query if it contains some parts that exclude themselves, it should just warn you about it. Because it you end with such excluding media query, I bet it's because you made a mistake. And in this case, it must be a plugin.

from include-media.

To solve the issue that was mentioned I created a separate plugin as @hugogiraudel suggested. It is in PostCSS https://github.com/panec/postcss-mq-optimize

from include-media.

That's pretty cool, thanks for that. I'll close this then! 🎉

from include-media.