How to access defineVars type information at runtime?

[zaydek]

Somewhat relevant to #867.

I am wondering if it's possible to do something like the following:

// vars.stylex.ts
export const myVars = defineVars({
  foo: stylex.types.color("red");
});

// Foo.ts
import { myVars } from "./vars.stylex.ts"

myVars.foo.type // "<color>"

I know this doesn't work because myVars.foo is simply a string e.g. var(--x8h3im5), but is there some other method I can use to know what stylex.types type was used to define the variable in TS?

So for example, maybe myVars.foo instance of stylex.Color or myVars.foo.type or myVars.foo.syntax or something like this? This would make it easier to build tools that understand the underyling type of a variable without making guesses based on its computed value.

A couple of ideas:

Expose something like the following:

• myVars.foo.type // E.g. Color
• myVars.foo.syntax // E.g. <color>
• myVars.foo[Symbol] // E.g. ColorSymbol
• Prefix the variable name var(--color__x8h3im5)

Right now I simply suffix the name of the variable with the camel case name type such as strokeWidthLength indicating the semantic name is strokeWidth and the type is Length but there's no underlying mechanic to ensure the types sync up.

Thanks.

[nmn]

There is no runtime information about the type of the variable and I don't think we'd add it. The TS types already exist and you should able to write other types to leverage that.

Can you give me a bit more detail on what you're trying to do?

---

Prefix the variable name

If you need runtime information, you can always prefix your own variables or group them by type.

colorVars.foo, lengthVar.foo, etc.

[nmn]

All of this seems a bit redundant. You control what variables go into the the "defineVars" so you don't need to generate the form dynamically at all. Just hardcode it.

If you're trying to create a tool that lets your users author different variables, then you should be using a custom Babel step.

[zaydek]

Yes. I previously attempted the hard coding path. However, I found I was writing a lot of error prone code that could simply be derived. I was guessing StyleX doesn't already enable my use case, so thanks for clarifying.

To be clear, when you say hard code it, do you mean something like this or did you have a different idea in mind?

    ...
    // Theme
    size: useEditorState({
      type: EditorStateTypeEnum.Number,
      name: "size",
      description: "The size of the avatar.",
      initialValue: getCSSVarAsNumberPx(avatarVars.size),
      parameters: { type: EditorNumberTypeEnum.Px, min: 0, max: 4 ** 4 },
    }),
    badgeSize: useEditorState({
      type: EditorStateTypeEnum.Number,
      name: "badgeSize",
      description: "The size of the badge.",
      initialValue: getCSSVarAsNumberPercent(avatarVars.badgeSize),
      parameters: { type: EditorNumberTypeEnum.Percent, min: 0, max: 100 },
    }),
    badgeCutoutSize: useEditorState({
      type: EditorStateTypeEnum.Number,
      name: "badgeCutoutSize",
      description: "The size of the badge cutout.",
      initialValue: getCSSVarAsNumberPx(avatarVars.badgeCutoutSize),
      parameters: { type: EditorNumberTypeEnum.Px, min: 0, max: 4 ** 2 },
    }),
    ...

This is what I did previously but it was just getting too chaotic.

I guess this would be simpler, and likely closer to what the hypothetical Babel plugin would do for me:

// vars.stylex.ts

export const vars = defineVars({
  foo: stylex.types.length(42),
  bar: stylex.types.percentage(42),
  ...
})

export const varsMetadata = {
  foo: "length",
  bar: "percentage",
  ...
}

I don't have any experience with Babel but I agree that would probably be more elegant and straight forward.

[zaydek]

OK, does this look sort of like the general shape of a possible solution? A Babel plugin I could implement that makes inferences based on the code and emits some metadata, accessible at runtime? https://gist.github.com/zaydek/8c4ac65010cffabd64963bb14433d194. This is o1 based on our convo, with some nudging.

The working idea is maybe I could expose something like vars.metadata.<varName>.type that mirrors all the keys defined on vars. That being said, I don't know if the presence of .metadata would cause problems. Anyway, the intent is to access type information at runtime without messing any of StyleX's internals.

Thanks.

[nmn]

Yes something like this is what I was suggesting:

export const vars = defineVars({
  foo: stylex.types.length(42),
  bar: stylex.types.percentage(42),
  ...
})

export const varsMetadata = {
  foo: "length",
  bar: "percentage",
  ...
}

[zaydek]

OK great, will look into it and follow up when it makes sense. Thanks again! (Closing this).