CSS to vanilla-extract playground

import { globalFontFace, globalKeyframes, globalStyle, style } from "@vanilla-extract/css"

globalFontFace("Roboto", {
  src: "url(https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap)",
});

globalKeyframes("slidein", {
  "from": {
    transform: "translateX(0%)",
  },
  "to": {
    transform: "translateX(100%)",
  },
});

export const fizz = style({
});

export const bar = style({
  "@media": {
    "(min-width: 1200px)": {
      fontSize: "10rem",
    },
  },
});

export const buzz = style({
  "selectors": {
    [`${fizz} &`]: {
      backgroundColor: "blue",
      fontSize: "5rem",
    },
  },
});

export const foo = style({
  backgroundColor: "blue",
  "@media": {
    "(min-width: 1200px)": {
      fontSize: "5rem",
      color: "red",
    },
  },
});

globalStyle("input", {
  "@media": {
    "(min-width: 1200px)": {
      fontSize: "5rem",
    },
  },
});