Can you use strings for var keys?

[brandonpittman]

The official sprinkles parses var object keys that are strings, "1/2", "accent-hover", "0.5" for example, just fine. Rainbow Sprinkles just passes along such keys as the values of vars when they're consumed.

[roginfarrer]

I don't think this is a test case I've tried. Can you make a codesandbox or stackblitz that reproduces the issue?

[brandonpittman]

@roginfarrer

https://codesandbox.io/p/sandbox/vigilant-sound-jzzf5s?file=%2Fpages%2Findex.tsx&selection=%5B%7B%22endColumn%22%3A21%2C%22endLineNumber%22%3A18%2C%22startColumn%22%3A21%2C%22startLineNumber%22%3A18%7D%5D

Here I added accent-hover and 1/2 as var keys. Rainbow Sprinkles creates the types—they show up as hints in the editor—but the actual value put into the styles is just something like $accent-hover. The value is thrown away.

[sebtoombs]

I've found the source of this problem - it's the VALUE_REGEX used to match values to scale keys.

I've encountered this problem as well - scale keys cannot contain hyphens (-) or periods which are supported in Vanilla-Extract/sprinkles.

The issue lies in this regex: const VALUE_REGEX = /(-)?\B\$(\w+)/g;
(https://github.com/wayfair/rainbow-sprinkles/blob/main/packages/rainbow-sprinkles/src/utils.ts#L11)

which only allows values containing "word characters" (which hyphen, period etc are not).

I've opened a PR to address this, hope it helps! 🙏 #113