PostCSS @custom-media not being generated

[roycifer]

I have a fresh install of Slater where @custom-media is not being generated by PostCSS. The CSS source still has invalid media queries like (--800) which are defined in src/styles/global/var.css. Any ideas why and how to fix (or what I might be doing incorrectly)?

[iamkevingreen]

@roycifer so this seems to be something that's changed in the postCSS spec?, I am actually trying to add custom media to simple starter (unrelated to slater). Might need to adopt another pattern here but I am investigating.

[seandogg]

I ran npm update and npm install in my project, which brought me here.

After that (not sure if it's related), each @media (--1200) style of media query in my css stopped working. I ended up adopting this way of writing media queries because it's short and I'm lazy so I liked writing MQs like that.

I ran a find+replace in my project and easily updated them to traditional style MQs. But thought I'd holler here just to let you all know that this postCSS update may be breaking the starter theme

[iamkevingreen]

@seandogg I've actually not been able to get custom-media queries to work on any of my postCSS sites so still trying to figure that out, if you've seen any tickets/core or plugin related feel free to link. I've also updated my process to slightly more traditional media queries, I will leave this open until I either update the theme or find a solve for the postCSS issue.

[dav11d]

is this related?

https://github.com/csstools/postcss-preset-env/issues/175#issuecomment-622067335

[artshostak]

Can anyone help with the slater.config.js code structure to add @dav11d's previously mentioned fix?

postcssPresetEnv({
  features: {
    'custom-media-queries': true
  }
  ...
})