[Blocked] Lint rule to enforce all stylex styles are used within JSX

[nmn]

A somewhat simple lint rule that enforces that all references to the styles created with stylex.create are only referenced within a JSX expression.

In the case of string element, it must always be in a {...stylex.props} and in the case of custom components, it can also be passed as a regular prop.

That's it. That's the whole lint rule.

PS. stylex.create declarations within an export statement should be considered valid.

[necolas]

Are you saying that this pattern would be linted against?

const stylesA = stylex.create({})
const stylesB = stylex.create({})

// Not in jsx
const style = [ stylesA, stylesB ]

[nmn]

@necolas Yes. The intention is to encourage developers to use && and other conditional queries directly within stylex.props, but this is definitely more on the stylistic side of things.

[necolas]

It's not uncommon to use arrays to combine styles or themes like this though. And it doesn't seem to have a downside. In fact, in some cases it can improve perf because the array is not recreated on every render. It's the manual version of what I proposed in https://github.com/facebook/stylex/issues/737 - a further optimization to that pattern would be to memoize the return value of the function so it is stable across renders. And it's also how people are likely to combine style and theme partials outside of components.

const colors = stylex.createTheme(colors, {...})
const spacing = stylex.createTheme(colors, {...})
export const theme = [ colors, spacing ]

[nmn]

@necolas The specific use-case is when all styles are defined and used locally within the file. In such scenarios, stylex.props can be compiled away.

Also, this would rule would not apply to themes and to exports.

But yes, in other cases this rule might just be annoyance though. Let me think if it's possible to make this rule more narrow and only discourage unnecessary indirection. It might also be possible to further improve the compiler to optimise more cases of stylex.props instead.

Marking as blocked until we resolve these concerns.