Nested @media queries not in spec

[keithjgrant]

According to the docs, this supports using @media rules as a nested selector:

a, b {

    @media (min-width: 30em) {
        color: yellow;
    }
}

However, I don’t see this anywhere in the editor’s draft. I’m not sure if this was pulled from the spec or just added here as a bonus, but this should probably be called out in the documentation (or removed entirely if the intent is to follow the spec as closely as possible).

[jonathantneal]

Good question. @tabatkins, is there intent to allow for nested @media?

[tabatkins]

Yes, tho that's not part of my Nesting proposal per se; we already have the fact that at-rules are allowed to next inside of style rules (per spec), we just haven't yet defined any at-rules that are valid in there. But yeah, in an ideal world @media would nest like that.

[wbyoung]

@tabatkins @jonathantneal one thing that may be worth considering. Nesting media queries can become somewhat tricky. Given the following:

a, b {
    @media (min-width: 30em) {
        color: yellow;
        @media (max-width: 60em) {
            color: cyan;
        }
    }
}

This plugin appears to produce:

a, b {
}

@media (min-width: 30em) {
    a, b {
        color: yellow;
    }
}

@media (min-width: 30em) and (max-width: 60em) {
    a, b {
        color: cyan;
    }
}

That's all well and good, but these queries omit the optional type and negation prefix. So you can't really do something like:

a, b {
    @media (min-width: 30em) {
        color: yellow;
        @media not (max-width: 60em) {
            color: cyan;
        }
    }
}

Because the resulting CSS isn't really correct:

@media (min-width: 30em) and not (max-width: 60em) {
    a, b {
        color: cyan;
    }
}

I don't know what you want to do about this, but perhaps it may be best to have this plugin block multiple levels of media query nesting for now as the spec doesn't cover it and it can't always be done correctly.

[tabatkins]

Per the latest MQ draft, @media (min-width: 30em) and (not (max-width: 60em)) is valid, tho. When browsers update to support the full boolean logic, it'll all work out.

[wbyoung]

@tabatkins ok, thanks for pointing that out… hadn't seen that draft.

[jonathantneal]

Thanks @tabatkins. Are the additional wrapping parens required?

[tabatkins]

The ones around the not condition? Yes; to avoid any possible confusion from binding specificity, we opted to make all binding explicit - you need parens around the arguments to and/or, and the argument to not.

[DavidOliver]

Is it still expected that nesting @media rules will be part of an official CSS spec?

[jonathantneal]

at-rules are allowed to next inside of style rules (per spec), we just haven't yet defined any at-rules that are valid in there

Sigh. It has taken me years to finally realize that nesting media is not part of any spec.

I will need to pull this from the plugin, unless someone wants to take this up with the CSSWG. I will release a new version shortly deprecating the feature but not removing it — in 6.0.0. I’ll set a timer for 3 months to remove it in the subsequent 7.0.0 release.

Ideally, by then, some other spec exists to allow this functionality. I’m sorry for accidentally bundling this with the plugin.

[jonathantneal]

Deprecation published in v6.

[onetrev]

Sorry to add a comment to a closed item, just really disappointing this is not part of the proposed spec. :( Nesting @media to me is an essential part of any responsive and mobile first workflow -- it's even more useful than nested selectors I think. Anyway, so just to confirm, unless one wants to use PostCSS Nested and thus not follow spec, we just have to pull out all nested @media statements until (if ever) another spec is created for this functionality?

[martpet]

Does the plugin support nested media queries now? They appear to be in the spec:

https://www.w3.org/TR/css-nesting-1/#conditionals

[Antonio-Laguna]

@martpet it does

You can see the test here: https://github.com/csstools/postcss-nesting/blob/main/test/media.css#L5 and the output here https://github.com/csstools/postcss-nesting/blob/main/test/media.expect.css#L9