[V4-beta.9] Allow @media inside @theme

[stijns96]

We normally create responsive variables. This is not possible in V4.

Error: @themeblocks must only contain custom properties or@Keyframes.

[stijns96]

I can imagine that @theme is just for creating the variable itself and overriding this needs to be done outside of @theme.

@theme {
  --margin-block-container: --spacing(4);
}

:root {
  @media (width >= theme(--breakpoint-md)) {
    --margin-block-container: --spacing(8);
  }
}

[stijns96]

Although... I still have to wrap it into the @layer theme as well.

@theme {
  --margin-block-container: --spacing(4);
}

@layer theme {
  :root {
    @media (width >= theme(--breakpoint-md)) {
      --margin-block-container: --spacing(8);
    }
  }
}