[Answered] Functions always generate Dynamic styles.

[aspizu]

const styles = stylex.create(
  padding: (size: "0.5rem"|"1rem") => {
    padding: size
  }
)

This should be replaced with static classes at compile-time, as the type is constrained to enumeration of constants. Not sure if already possible.

[nmn]

I've considered this before and even investigated what it would take to implement something like this. I came to the conclusion that this was not viable, as there are a lot of edge-cases. The biggest being the inherent lack of Safety in typescript. (any allows you to bypass any type).

For the reason, there is an explicit warning against over-using dynamic styles. It's not something you should be using for "convenience". They should only be used when the style value is truly dynamic.

Instead, your should be doing something like this:

const padding = stylex.create({
  "0.5rem": { padding: "0.5rem" },
  "1rem": { padding: "1rem" },
});


// Usage
<div {...stylex.props(padding["0.5rem"])} />
<div {...stylex.props(padding["1rem"])} />

There is a little bit of repetition, but, eventually, this is good for readability. We also like the clear rule that functions always result in inline styles, but objects never do. This makes behaviour predictable.

[aspizu]

and what about stuff like this?

const styles = stylex.create({
  padding: (px) => {
    padding: `${px}px`
  }
})

[nmn]

Your forgot the parens around the return object:

const styles = stylex.create({
  padding: (px) => ({
    padding: `${px}px`
  }),
});

Yeah, this works, but you don't need to add the 'px' to the number.

This also works:

const styles = stylex.create({
  padding: (px: number) => ({
    padding: px
  }),
});

Numbers can be used for padding and they're interpreted as px values.

[aspizu]

Sure this works, but it would be implemented as inline styles, right? I would like to see the usage of this function to be replaced at compile-time.

[aspizu]

I had once mentioned the idea of syntax-sugar for defining stylex, civet is a language which compiles into typescript.
which allows doing stuff like this,

styles :=
  stylex.create
    padding: (px) =>
      padding: `${px}px`

[nmn]

Sure this works, but it would be implemented as inline styles, right?

Yes, as I said before, a function always generate styles that set inline styles and I already provided an alternative.

---

I'm not sure why you brought up Civet. Since it is a language that compiles to Typescript it should be possible to use StyleX anyway by compiling to TS first and feeding that to the StyleX compiler.