Using variables for defining media queries / @custom-media

[mihkeleidast]

Hi and thanks for a great tool!

I have a style block with a media query condition that I'd like to share as a variable (simple example):

 '@media': {
    [vars.media.reducedMotion]: {
      transition: 'none',
    },
  },

This currently fails with Error: Invalid media query: "@media var(--media-reducedMotion__gma9sq98)". I get the error - variables cannot be used like this in CSS yet, so this would be invalid right now anyway.

In PostCSS, there is a custom-media plugin. That plugin cannot replace the above usage out from the generated CSS because it needs the variable definitions beforehand, but the VE variable names are dynamic and also generated at build time.

I also tried using a predefined @custom-media and replacing that out with the PostCSS plugin, which works! But it is less ergonomic to use, as it is not type safe, and requires the additional PostCSS setup.

  '@media': {
    '(--media-reduced-motion)': {
      transition: 'none',
    },
  },

If variables are used for defining media queries, could vanilla-extract not replace it with a variable, rather with the resolved value, making usage like this valid?

[cahnory]

I think if variables are not intended to work in this case in CSS, variables should not be used in this case.

Why don't you use a simple object?

export const media = {
  reducedMotion: "(prefers-reduced-motion)",
} as const;

I'm new to vanilla-extract but I don't see any drawback to use constants instead of css variables in scenario where there's:

• no intent to override its value (like in your example, I don't think an element will set a diffferent value to --media-reducedMotion__gma9sq98)
• no intent to expose its value to third parties (like custom stylesheet, tampermonkey,…)