[eslint-plugin] Add rule to disallow dynamic styles that could be represented as conditional styles
- Dominant language
- JavaScript
- Stars
- 10.3k
- Forks
- 481
- Avg merge
- 3d 8h
- Merged PRs (30d)
- 13
Description
StyleX provides an API to define dynamic styles for the few edge-cases where the value or possible values of a style cannot be known statically when the code is being authored.
This means that values of dynamic styles has to be dynamically computed at runtime and a given set of possible values cannot be known ahead of time.
---
## The Task
There should be an ESLint rule that detects and disallows abuses of dynamic styles when static styles can be applied conditionally instead.
Here's a few possible patterns that should be disallowed:
### A dynamic styles where the argument is a boolean
```tsx
const styles = stylex.create({
root: (isHovered) => ({
color: isHovered ? 'grey' : 'black',
}),
});
```
This dynamic style can be expressed as conditional styles instead:
```tsx
const styles = stylex.create({
root: {
color: 'black',
},
rootHovered: {
color: 'grey',
},
});
```
### When the dynamic style function is always invoked with a static value
There may be a dynamic style function that is truly dynamic, however, if it is known to always be used locally with static values, then the dynamic style should be replaced with those static styles instead.
Contributor guide
Assessment
This issue has not been assessed yet.