Do not pollute root namespace and assign variables locally only

[olivierpascal]

Hello, is it possible to create vars that are locally scoped, and not assigned to :root?

I use a design system with a lot of components, and the root namespace is polluted by hundreds of vars that are either not used, or always overwritten with component themes.

Thanks.

[olivierpascal]

root.mov

[nmn]

You can set the values in a defineVars call to null and then only define their values with createTheme. You will need to use more type annotations though.

export const myVars = stylex.defineVars({
  primary: null as null | string,
  secondary: null as null | string,
});

export const blueTheme = stylex.createTheme(myVars, {
  primary: 'blue',
  secondary: 'grey',
});

---

Now the variables will not be defined for :root.