How do you load external constants?

[hyperknot]

I don't understand how to load external constants into StyleX vars. I mean it's totally natural to need it, for example in an Electron app, I want to share SIDEBAR_WIDTH between main and renderer, so I put this variable in shared/constant.ts.

Also, there are million other cases where one needs to share a constant between a JS logic and a CSS / StyleX value.

Currently, StyleX really doesn't allow this. I tried many combinations of files, imports, etc, but it just doesn't want me to do this.

 Only static values are allowed inside of a stylex.create() call.

For example, this is inside a tokens.stylex.ts, but the same message appears when I use it in a component as well.

import { SIDEBAR_WIDTH } from '../../shared/constants'

export const sizes = stylex.defineVars({
  sidebarWidth: SIDEBAR_WIDTH,
})

How do I solve this?

[hyperknot]

Asking LLMs to analyse the source code and the tests I could figure out how to use inline styles:

const sidebarStyles = stylex.create({
  root: (width) => ({
    width: width, // Dynamic value passed at runtime
    backgroundColor: 'blue', // Static value compiled to CSS
  }),
});

But why is it so hidden? The full documentation is trying to hide this. This is a very much realistic need, please don't hide it.

Also, how do you implement truly user customizable apps in StyleX? For example, user configurable sidebar width?

[necolas]

It's right here with all the other documentation of how to use styles https://stylexjs.com/docs/learn/styling-ui/defining-styles/#dynamic-styles

[hyperknot]

Thank you, I've looked everywhere, in more advanced sections / hidden places, except in the very first section.

[nmn]

You should consider using stylex.defineVars for simple style values.