Strange behavior when using stylex.defineVars on previously defined vars

[zaydek]

Say you have something like

const vars = stylex.defineVars({
  foo: ...,
})

And then you realize you want to compose those vars so you don't need to repeat yourself:

const vars = stylex.defineVars({
  foo: ...,
});
const derivedVars = stylex.defineVars({
  bar: `... ${vars.foo}`,
});

I found that doing something like this causes a lot of problems and is unpredictable. I can create a repro if necesarry but is this an unsupported pattern and if so -- how come?

I suspect I can do something like

const BAR = `... ${vars.foo}`;

But this might be an anti-pattern.

I also wonder if there's some other pattern like

const FOO = "--foo"

const vars = stylex.defineVars({
  [FOO]: ...,
});
const derivedVars = stylex.defineVars({
  bar: `... ${FOO}`,
});

Nevermind that didn't work either.

I'm guessing what's happening when you create a defineVars variable is that StyleX statically analyzes whether or not you're actually using the variable. If you're not, it omits a class or something which would explain why I'm getting strange behavior I can't quite explain. 🤔

For clarity, my use case is something like this:

const themeVars = stylex.defineVars({
  colorHairline: "color-mix(in hsl, transparent, white 10%)",
});
const themeVarsDerived = stylex.defineVars({
  boxShadowHairline: `inset 0 0 0 1px ${themeVars.colorHairline}`,
});

[zaydek]

OK I found the solution, it's quite subtle. Because I'm overwriting the dynamic variables to begin with, it appears StyleX needs to me to restate the derived variables too, not just the first-order variables I am references. So to be explicit, the following did not work:

const styles = stylex.create({
  dynamicTheme: (theme: UseThemeVarsEditorTheme) => ({
    [themeVars.focusRingOffset]: `${theme.focusRingOffset.value}px`,
    [themeVars.focusRingThickness]: `${theme.focusRingThickness.value}px`,
    [themeVars.focusRingColorAccent]: theme.focusRingColorAccent.value,
    [themeVars.colorAccent]: theme.colorAccent.value,
  }),
});

And finally, this works:

const styles = stylex.create({
  dynamicTheme: (theme: UseThemeVarsEditorTheme) => ({
    [themeVars.focusRingOffset]: `${theme.focusRingOffset.value}px`,
    [themeVars.focusRingThickness]: `${theme.focusRingThickness.value}px`,
    [themeVars.focusRingColorAccent]: theme.focusRingColorAccent.value,
    [themeVars.colorAccent]: theme.colorAccent.value,
+   [derivedThemeVars.colorAccentHover]: `oklch(from ${theme.colorAccent.value} calc(l + 0.05) c h)`,
+   [derivedThemeVars.colorAccentActive]: `oklch(from ${theme.colorAccent.value} calc(l + 0.10) c h)`,
  }),
});

I don't really understand why but I'm glad I can use the derived defineVars pattern still.

[zaydek]

OK sorry for spamming but it looks like this doesn't work great. In this case, if I have a variant that uses a derived theme var, I have to restate the derived theme vars too which basically destroys the feasability of this.

  button_themeSecondary: {
    // I only want to update the accent color
    [themeVars.colorAccent]: `color-mix(in hsl, ${themeVars.colorBase}, white 10%)`,
    // But I have to additionally restate the derived colors
    [themeVarsDerived.colorAccentHover]: `oklch(from ${themeVars.colorAccent} calc(l + 0.05) c h)`,
    [themeVarsDerived.colorAccentActive]: `oklch(from ${themeVars.colorAccent} calc(l + 0.10) c h)`,
  },

I'm guessing this has something to do with reactive variables in StyleX but I'm not sure. Is there a simple solution where I can create "atom" variables and then compose them so for example:

• vars.hairlineColor -> derivedVars.hairlineBoxShadow
• vars.baseColor -> defineVars.baseColorHover

Patterns like this.

[zaydek]

I see. This is most likely a misunderstanding of how CSS variables works:

• https://chatgpt.com/share/678eaf04-61dc-800d-acbc-9a60ea9712da
• https://claude.site/artifacts/60174ddc-09b0-4a71-bb38-41f74a0bd3ac

[nmn]

I think your question is missing the most important part of the equation which is what happens when you theme the variables.

This should work:

const vars = stylex.defineVars({
  foo: ...,
});
const derivedVars = stylex.defineVars({
  bar: `... ${vars.foo}`,
});

But it's important to understand that if you use a theme (or even stylex.create) to override vars.foo, derivedVars.bar will not reflect that new value. This is just how CSS variables work.

However, you can make it work if you reset derivedVars every time you override a value in vars.

You can do it like so:

const _theme1 = stylex.createTheme(vars, {
  foo: '<some new color>',
});
const resetDerivedVars = stylex.createTheme(derivedVars, {});

export const theme1 = [_theme1, resetDerivedVars];

Don't ever apply _theme1. Apply theme1, which also reassigns all the variables in derivedVars and will pick up the <some new color> value assigned in _theme1.

This pattern only work when one of the two defineVars being used is a set of constants. If you want to set themes for vars and definedVars, things get messy.

---

This is a know issue, but it isn't easy to fix because this is just how CSS variables work. They are not "reactive". They pick up the value where they are assigned and that value is available in the entire sub-tree below statically.

#761 is an attempt I made to fix this problem and make variable work "reactively" as most people expect them to. I assume defineConsts will make this problem redundant for the most part.

[zaydek]

Much appreciated @nmn. My use case is to leverage dynamic values so I don't know how much success I can have using createTheme but I'm glad I understand now. I didn't realize CSS variables are more like assignments than function calls, so I can see how this prevents my use case from working.

That being said, if it did work this way, it would be pretty profound provided there wasn't some other footgun. I am a little confused as to whether RSD supports "reactive variables" or not? I tried setup a RSD project yesterday twice -- once with Vite and once with PostCSS and couldn't get either to work. That's OK because I am not intent on using RSD, but was just curious if RSD attempts to solve this problem. Maybe you could help me with some confusion -- is RSD StyleX or is it based on StyleX?

[nmn]

I am a little confused as to whether RSD supports "reactive variables" or not?

RSD on the web is using StyleX as-is and will work the same way as I described.

RSD on React Native is a re-implementation that is aimed to match the same behaviour. If it doesn't that's a bug we need to fix so please let us know.

There is one difference, RSD assumes you're using the property-specificity configuration for StyleX. This will subtly change how styles and shorthand properties merge within your code.