Nested defineVars inside defineVars

[tienlx97]

• Can I declare defineVars then use it inside defineVars

const [DARK] = '@media (prefers-color-scheme: dark)';

const color = stylex.defineVars({
  accent: {
    default: '#1763CF',
    [DARK]: '#1763CF',
  },
  accent2: 'red',
});

const tokens= stylex.defineVars({
  'badge-background-color-blue':  color.accent,
  'badge-background-color-red':  color.accent2,
})

[nmn]

Yes, this is a supported pattern. Create an issue if you run into issues with this.

Note: You still need to define all variables in .stylex.ts files and export the consts as named exports.

---

I would recommend rewriting your code as follows:

// <filename>.stylex.ts
const [DARK] = '@media (prefers-color-scheme: dark)';

export const colors = stylex.defineVars({
  accent: {
    default: '#1763CF',
    [DARK]: '#1763CF',
  },
  accent2: 'red',
});

export const tokens = stylex.defineVars({
  badgeBgColorBlue:  colors.accent,
  badgeBgColorRed':  colors.accent2,
});

The key names in the defineVars have no effect on the generated variables names (they are hashes), so you might as well use keys that are easier to type!

[nmn]

Another thing. In your example, if you don't intend to use the colors variables anywhere other than to define the values of tokens, you should probably just use consts

// <filename>.stylex.ts

const [DARK] = '@media (prefers-color-scheme: dark)';

const colors = {
  accent: {
    default: '#1763CF',
    [DARK]: '#1763CF',
  },
  accent2: 'red',
};

export const tokens = stylex.defineVars({
  badgeBgColorBlue:  colors.accent,
  badgeBgColorRed':  colors.accent2,
});

This should still work. But of course, colors can no longer be imported from some other file and used within a stylex.create.

[tienlx97]

Thankyou very much. I have another question. Can I pass styles value to children. But I only want call stylex at child:

const BaseTextInput = () => {
    return <BaseInput  xstyle={[styles1.root, style1.size, xstyle]}  /> // pass to children
}

const BaseInput = ({ xstyle }) => {
    return <input className={stylex(styles2.inputRoot, xstyle)} /> // render it with stylex()
}

[nmn]

Yes! Your code looks completely valid.

It's documented on the website, here: https://stylexjs.com/docs/learn/thinking-in-stylex/#low-cost-abstractions