Variants don’t apply styles correctly with keys like “1/2”, “3/4"

[my-slab]

Bug report

Describe the bug

variants don’t apply styles correctly with rules like:

const failVariants = css({
  display: "grid",
  gap: "16px",
  padding: "8px",
  variants: {
    fraction: {
      "1/4": { gridTemplateColumns: "1fr 3fr" },
      "1/2": { gridTemplateColumns: "1fr 1fr" }
    }
  }
});

To Reproduce

CodeSandbox Example

Expected behavior

variants work with keys like, 1/4, 1/2.

Additional context

I know this article exists for naming theme tokens, but I’m not sure if those rules are meant to apply to variants too.

[LexSwed]

This is by design at the moment: https://stitches.dev/docs/tokens#naming-convention

[my-slab]

Yep, I saw that and the linked discussion in https://github.com/stitchesjs/stitches/issues/493#issuecomment-801241038, but as far as I can tell that only applies to theme tokens. Do these conventions apply to variants too?

[LexSwed]

Ah, sorry, my bad. I agree with you, seems like a bug, the class is generated correctly, but the styles aren't attached 👍

[hadihallak]

That's pretty much is a duplicate of https://github.com/stitchesjs/stitches/issues/923 and https://github.com/stitchesjs/stitches/issues/731 You can see more read more discussion about it in the latter

Will be closing this issue for now as we have https://github.com/stitchesjs/stitches/issues/923 to track it.