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

• Fix importing CSS packages in frontmatter #3537 cc @matthewp
• Improve HMR handling for styles, persisted islands #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"],
				},
			},
		}),
	],
}

[matthewp]

Appears to be an underlying Vite issue. Here's a recreation here: https://stackblitz.com/edit/vitejs-vite-rhhiwt?file=index.html,package.json,style.css,postcss.config.js&terminal=dev

Should we document the workaround somewhere? Going to close this issue as it doesn't appear we can fix it.

[samducker]

Import from has been deprecated according to the PostCSS console logs I'm getting.

My most reliable workaround now is to import the variables into all scoped styles, not sure why it doesn't just work importing it into my layout.

@import "../../styles/variables.css";

I'm just using custom media queries but not open props.

[salvaft]

Is importing the stylesheet in every component the only workaround? Has someone found any other solution?
Indeed it is very tedious.

Thanks in advance.

[davidsandoz]

I'm facing the same problem. Should this issue be re-opened or another one created?

[samducker]

Would be awesome if we didn’t have to do this, yes I am having to import into each and every component.

…

On Thu, Apr 27 2023 at 4:26 pm, David Sandoz < ***@***.*** > wrote: I'm facing the same problem. Should this issue be re-opened or another one created? — Reply to this email directly, view it on GitHub ( #3648 (comment) ) , or unsubscribe ( https://github.com/notifications/unsubscribe-auth/AF7VYSZTI7XN6Q3GHSPCT3LXDKF2DANCNFSM5ZJJWLUQ ). You are receiving this because you commented. Message ID: <withastro/astro/issues/3648/1525898901 @ github. com>

[SalahAdDin]

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"],
				},
			},
		}),
	],
}

It does not work with NextJs.