airbnb / airbnb/eslint-plugin-react-with-styles
Rule proposal: css argument types
- Dominant language
- JavaScript
- Stars
- 48
- Forks
- 14
- PR merge metrics
- No merged PRs in 30d
Description
The `css()` function can only take arguments that are properties of the `styles` prop object, plain JavaScript objects, falsey values, or arrays of those types.
Bad:
``` jsx
function MyComponent({ styles }) {
return (
);
}
```
``` jsx
function MyComponent({ styles }) {
return (
);
}
```
``` jsx
function MyComponent({ styles }) {
return (
);
}
```
``` jsx
function MyComponent({ styles }) {
return (
);
}
```
``` jsx
function MyComponent({ styles, foo }) {
return (
);
}
```
``` jsx
function MyComponent({ styles, foo }) {
return (
);
}
```
Good:
``` jsx
function MyComponent({ styles }) {
return (
);
}
```
It might also make sense for this rule to validate the shape of the JavaScript objects passed to `css()` to ensure that they are flat objects appropriate for inline styles.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by locating the rule implementation and its tests, then compare how the css() arguments in the bad and good examples are currently analyzed. Define the accepted argument forms from the issue, decide whether object-shape validation is in scope, and add coverage showing that invalid values are reported while styles properties, plain objects, falsey values, and arrays are accepted.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- tooling
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100