Astro & Apollo starter kit: Media query selectors break after 2.0.1 update — incorrectly scoped with :where() and [data-astro-cid]

[pshemek]

To Reproduce

1. Install https://github.com/apostrophecms/starter-kit-astro-apollo and upgrade front-end packages to the latest versions (I use ncu -u && -rf node_modules && rm package-lock.json && npm install).
2. Run the frontend and backend in dev
3. Check some media queries behavior; to see the instant result on the home page, I added following to HeroWidget.astro style:

@media (max-width: 1024px) {
    .hero-split {
      flex-direction: column;
    }
  }

4. See that the media query doesn't work (not in preview but with real browser window)

Expected behavior

Media query declaration should work.

Describe the bug

I investigated the output CSS with help of LLM and it looks like that the transformation to container query doesn't handle well the CSS that Astro framework generates currently.

[EDIT]
I narrowed down the issue to the postcss-viewport-to-container-toggle 2.0.1 update which actually introduced :where() breaking media queries scoped in Astro components.

Details

The LLM's conclusion was:

Your media queries stopped working because Astro’s scoping compiler introduced :where() wrappers with [data-astro-cid] prefixes applied to the wrong elements (body), which breaks the selector specificity and prevents rules from matching.
So it’s not the @media or @container themselves that are broken — the selectors generated inside them are invalid/unmatchable.

[BoDonkey]

Wow, sorry I missed this. I have some repos that aren't sending me notifications for some reason. I'll get this reviewed soon. Thanks!

[BoDonkey]

I have this problem solved and we will push the fix out at the end of the month.