Support variables with \s in their names?

[robotriot]

Problem Statement

Currently there's an unspoken support for token objects that follow traditional JS variable naming. However, for our design system we've opted for a human-readable taxonomy which means our tokens are non-traditional. Eg Background Subtle or Background Subtle - Elevated .

Proposed Solution

I poked around and it seems like the regex being used is the limiting factor here. I'm wondering if you've considered making the regex more generic and to really only care about the initial $ in the variable name? I've poked around with changing it to include spaces for example and everything appears to work fine.

This is what i've changed the variable regex to (-)?\B\$([\w\s\-.]+), which so far so good 🤷🏼 . There are probably things I haven't considered but it allows me to do this :)

      <Box
        as="div"
        backgroundColor="$Background Subtle"
        padding={{xsmall: '$Macro Small', large: '21px'}}
      />

Alternatives Considered

Another thing I could do is remap our tokens to something RS expects and hide that from consumers. It's a bit ham-handed but would probably work.

Additional Context

Existing components already use these strings so it'd be a massive change to completely overhaul how we use tokens.

[roginfarrer]

Hey there, I'm sorry I never followed up on this. I wasn't sure how I wanted to respond to it. I understand the need to support prior use of tokens, but I don't think having spaces in variable names is a good idea, and it seems like too small of an edge case to be worth supporting in this library.

You've probably found a workaround or alternative at this point, but if anyone reads this in the future: I'd recommend either forking the library or using something like patch-package to add this. The surface area in a git patch should be small enough to support, and I think the types should continue to work? Dunno for sure.

Good luck!