🍨 Sprinkles: hover condition breaks with some property keys

[MadeByMike]

Describe the bug

Using Sprinkles I want to add property keys similar to this:

properties: {
  width: {
    "1/2": "50%"
  }
}

It works fine except in combination with conditions like this:

conditions: {
    mobile: {},
    hover: { selector: "&:hover" }
},

Error is:

Selectors must target the ampersand character ('&'), which refers to the generated class name, e.g. '&:nth-child(2n)'

Looks to be a false positive, or something is mungeing the selector.

It could be all selectors with ampersands and it could be more characters in property keys than just / that cause this.

Note Don't be tempted to say change the property key (I will for now) but I think fractions are super sensible in a lot of cases. Another reason is I'm developing something to consumption by other devs and I'd like to stick kinda close to the tailwind naming conventions for some keys just to aid with familiarity and documentation.

Link to reproduction

https://codesandbox.io/s/winter-hill-j2tfb?file=/src/sprinkles.css.ts

System Info

Output of npx envinfo --system --npmPackages @vanilla-extract/css,@vanilla-extract/webpack-plugin,@vanilla-extract/esbuild-plugin,@vanilla-extract/vite-plugin,@vanilla-extract/sprinkles,webpack,esbuild,vite --binaries --browsers:

  System:
    OS: Linux 4.4 Ubuntu 20.04 LTS (Focal Fossa)
    CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor
    Memory: 4.84 GB / 15.95 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 12.16.3 - ~/.nvm/versions/node/v12.16.3/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v12.16.3/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v12.16.3/bin/npm

[markdalgleish]

Thanks for raising this! Releasing a fix now 👍

[markdalgleish]

Should be fixed in v0.5.1 of @vanilla-extract/css.