Nested Vars/Themes

[Billzabob]

Describe the feature request

We have an existing theme object that looks like this:

export const DarkTheme: Theme = {
  text: {
    basicStrong: Colors.white100,
    basic: Colors.white90,
    basicSoft: Colors.white80,
    subStrong: Colors.white70,
  },
  fill: {
    surface: Colors.gray85,
    surfaceAlt: Colors.gray95,
    },
  },
  action: {
    primary: {
      strong: Colors.system.primary30,
      default: Colors.system.primary40,
    },
    danger: {
      strong: Colors.system.danger20,
      default: Colors.system.danger50,
    },
  }

We'd like to create a StyleX theme out of it but it seems to only support flat structures.

We'd like to be able to do something like this:

export const darkTheme = stylex.defineVars(DarkTheme)

Is there a way to do this that I'm missing?

And if there isn't, what's the expected way to handle this? Are we just going to have to flatten our theme structure?

[zaydek]

StyleX is pretty simple as far as the API goes. I think you would bascially want to consume this general idea as a flat data structure so for example actionPrimaryStrong. Might seem annoying but it's not that big of a deal plus the intellisense will show the complete name and not only up to the . which could be nice.

AFAIK there's no concept of nesting or hierarchies in StyleX.

[nmn]

stylex.defineVars lets you define variables with conditional values, which mean that nested objects are interpreted as conditional values. This makes supporting nested theming structures impossible.

const DARK = '@media (prefers-color-scheme: dark)';
const vars = stylex.defineVars({
  primary: { default: 'black', [DARK]: 'white' }
})

There is also a detail on how StyleX's compiler actually works which makes arbitrary nesting impossible to support. StyleX doesn't actually read the file where the themes are defined and uses the import statements alone to reconstruct the variable names. This makes StyleX compilation completely cache-able on a per-file basis.

That said, there is nothing stopping you from making multiple groups of variables and exporting them all from the same file:

const DarkTheme: Theme = { ... }

export const textVars = stylex.defineVars(DarkTheme.text);
export const fillVars = stylex.defineVars(DarkTheme.fill);
export const actionPrimaryVars = stylex.defineVars(DarkTheme.action.primary);
export const actionDangerVars = stylex.defineVars(DarkTheme.action.danger);

Just follow the [Rules when defining variables](https://stylexjs.com/docs/learn/theming/defining-variables/#rules-when-defining-variables} and you still have a lot of flexibility.