facebook / facebook/stylex

[eslint-plugin] Add rule to disallow dynamic styles that could be represented as conditional styles

Open
#727 4 comments 0 reactions 0 assignees View on GitHub
enhancement help wanted
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.