set breakpoints and write media query vanilla-extract css

Question

Using vanilla-extract/css I want to set breakpoint and write media query css. This is what I have tried:

inside global css.

export const theme = createGlobalTheme(":root", {
    breakpoints: {
        medium: "screen and (min-width: 40em)",
        large: "screen and (min-width: 64.06em)",
    },
});

inside test.css.ts

export const testCss = style({
    background: "transparent",
    color: "grey",
    fontSize: "13px",
    "@media": {
        [theme.breakpoints.large]: {
            color: "red",
        },
    },
});

This code gives the error : Invalid media query: "@media var(--breakpoints-large__gr35lg1)"

Am I doing something wrong?

Answer 1

I solved this issue just by using var instead of creating gloabalTheme. I am not really sure why gloabalTheme method is not working though.

export const breakpoints = {
    medium: "screen and (min-width: 40em)",
    large: "screen and (min-width: 64.06em)",
} as const;