stylex icon indicating copy to clipboard operation
stylex copied to clipboard

Not omitting the `return` keyword when creating dynamic styles causes an error

Open k14lb3 opened this issue 5 months ago • 1 comments

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({
foo: () => ({ ... }),
});
image
const styles = stylex.create({
foo: () => {
return { ... };
},
});
image

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]

k14lb3 avatar Jan 08 '24 10:01 k14lb3

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 avatar Jan 08 '24 15:01 nedjulius

@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.

nmn avatar Jan 09 '24 05:01 nmn