🐛 BUG: Astro 1-beta42 re-introduces a PostCSS Preset Env's Custom Media Queries bug

[djmtype]

What version of astro are you using?

1.0.0-beta.46

Are you using an SSR adapter? If so, which one?

none

What package manager are you using?

npm

What operating system are you using?

mac

Describe the Bug

I'm using Open-Props library which relies heavily on the PostCSS Import plugin and the PostCSS Preset Env plugin. This bug is not exclusive to Open-Props BTW.

It utilizes media query ranges and custom media queries. Those properties can be seen here: https://github.com/argyleink/open-props/blob/main/src/props.media.css

The following example no longer works in Astro 1-beta 42 and later, but works as expected in Astro 1-beta 41.

body {
  @media (--sm-n-above) {
    background-image: var(--gradient-3);
  }
}

The workaround would be to include the custom media query definition(s) (This file) in every single Astro component wherever custom media queries are used. However, that would be entirely tedious, redundant and bloated because the bug only persists during development, and not at build.

In the Stackblitz example, expand the viewport beyond 480px wide, and there should be a gradient background, however, the background remains white. This is the bug.

Uncomment @custom-media --sm-n-above (width >= 480px) as a workaround to see that PostCSS Env's custom media queries do work.

This bug is tricky because if you comment out @custom-media --sm-n-above (width >= 480px) once again, everything will continue working.

However, kill and restart the server and you'll see the issue again.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-3pb6hh?file=src%2Fpages%2Findex.astro

Participation

• [ ] I am willing to submit a pull request for this issue.

[bholmesdev]

Thanks for the thorough issue @djmtype! I see two changes from beta.42 that could be to blame here:

• #3537 cc @matthewp
• #3492 cc @natemoo-re

Can confirm this issue occurs in CSS files imported via frontmatter as well (reproduction)

[djmtype]

Honestly, just found it more reliable to add this configuration to postcss.config.js.

const postcssPresetEnv = require("postcss-preset-env")

module.exports = {
	plugins: [
		postcssPresetEnv({
			stage: 0,
			features: {
				"custom-media-queries": {
					importFrom: ["./node_modules/open-props/src/props.media.css"],
				},
			},
		}),
	],
}