Discussion: Supporting CSS variables / custom properties

[Matt Hamlin]

Opening this issue as a discussion on how the system-props package could support generating CSS variables / custom properties - I haven't given this much thought yet but wanted to jot down a few initial ideas!

My first concept was around aligning on defining a theme object that uses the var(--X) references as theme values, e.g.:

let theme = {
  colors: {
    primary: `var(--primary)`
  }
};

(essentially what the early versions of this package was doing [has since been updated however]).

However this could be less than ideal for a few reasons:

• It's clunky / non-standard currently
• If you need to read the underlying value of the var (e.g. to compute contrast), you need to do some weird logic
  • This is even worse than less than ideal because it won't work in non-browser environments!

The benefits however here being that it should _just work_™️ out of the box!

My second idea (and something I'm tinkering with a bit) is to enable dependency injection and allow consumers to provide their own get function to createSystem which can be used in place of memoizedGet across the codebase. This is kind of clunky however, as developers may need to replicate a decent amount of logic possibly. Plus I'm sure there will be some edge cases that need to be accounted for (e.g. get used in places that you don't want to return a CSS variable for).

Maybe get is the wrong "unit" to expose and allow for this change however, maybe a new transform codepath can get introduced that gets called with:

• value (the result of resolving the prop value against theme, e.g. after get(...)
• theme
• path
• prop name (maybe?)
• scale
• ... more?

and is expected to return the raw css value generated. This could default to essentially a pass through:

function defaultTransform(
  value: string,
/*
  theme: any,
  path: string,
  propName: string,
  scale: string,
  ...
*/
): string {
  return value;
}

Again, this is all sort of top of mind, thinking out loud on supporting CSS variables within system-props, curious if anyone else has other interesting ideas!

[Matt Hamlin]

I started hacking on a fork / POC that was heavily inspired by this library that generates a CSS variable / custom property output instead of getting the value from theme: https://github.com/ds-pack/simple-props (still a work in progress, doesn't support media queries or pseudo props yet).