CSS Variables not supported in media queries for breakpoint tokens

[josh-bagwell]

🐛 Bug Report

Expected Behavior

Breakpoint tokens currently do not work as intended.

This is due to css variables not being supported inside of media queries currently.

The below will not work:

[`@media screen and (max-width: ${cssVar(system.breakpoints.m)})`]: {}

But this will:

[`@media screen and (max-width: 48rem)`]: {}

Actual Behavior

What ends up happening is the value for the breakpoint is not used since css variables are not supported by media queries.

[RayRedGoose]

Value should be in px