Cannot use dynamic values in CSS media queries

[dddlr]

Describe the bug

Dynamic values (e.g. props) in CSS media queries currently do not result in correct CSS output. This is due to the use of CSS variables, which are not supported within media queries.

To Reproduce

import { styled } from '@compiled/react';
import React from 'react';

export const StyledText = styled.span<{ mediaMaxWidth?: string }>`
  @media (max-width: ${(props) => props.mediaMaxWidth}) {
    width: 80vw;
  }
`;

const App = <StyledText mediaMaxWidth="650px">Styled text</StyledText>;

Expected behavior

CSS variables are not currently supported in media queries, so the output CSS should look something like this:

@media (max-width: 650px) {
    ._1hma11y2 { width: 80vw; }
}

<span class="_1hma11y2">Styled text</span>

Actual behaviour

This CSS is generated:

@media (max-width:var(--_1enk3bj)) {
    ._1hma11y2 { width:80vw; }
}

<span class="_1hma11y2" style="--_1enk3bj:650px;">Styled text</span>

No error is generated, but the browser will never apply width: 80vw to the element.

Additional context

1. Compiled's object notation does not support this use case either - something like this would give an error:

const StyledText = styled.span<{ mediaMaxWidth?: string }>({
  [`@media (max-width: ${(props) => props.mediaMaxWidth || "650px"})`]: {
    width: '80vw'
  }
});

2. If standardised, env() would address the problem of var() not working in media queries. We could potentially switch from var() to env() in the future depending on how the latter gets standardised. See here: https://stackoverflow.com/a/47212942