stylex
stylex copied to clipboard
Not omitting the `return` keyword when creating dynamic styles causes an error
The problem
Not omitting the return
keyword when creating dynamic styles causes a Styles must be represented as JavaScript objects, not ArrowFunctionExpression
error.
Synxtax | Type |
---|---|
const styles = stylex.create({ |
|
const styles = stylex.create({ |
Expected behavior
I think they should behave the same since they have the same return type?
Environment (include versions). Did this work in previous versions?
@stylexjs/[email protected]
I think it's done so intentionally to reduce the complexity of dynamic styles. Having an explicit return introduces additional complications for the compiler due to the available body of the function.
I might be wrong.
@nedjulius is correct. We do not want complex logic within dynamic style functions. Instead the values should be calculated within your component and the final style values should be passed into the function.
Also it's a maintenance burden to compile functions at compile time. We do not use eval
and any functions used for styles need to be simple enough for us to parse and evaluate statically at compile time.