ESLint valid-styles rule rejects nested conditions inside stylex.when.*() computed keys
- Dominant language
- JavaScript
- Stars
- 10.3k
- Forks
- 481
- Avg merge
- 3d 8h
- Merged PRs (30d)
- 13
Description
### Describe the issue
The stylex-valid-styles ESLint rule rejects a media query (or other condition) nested inside a stylex.when.ancestor() / stylex.when.descendant() / etc.
computed key, even though the Babel compiler handles it correctly and produces valid CSS.
### Expected behavior
The ESLint rule should accept stylex.when.*() as a condition key even when its value is a nested condition object, matching the compiler behavior.
@stylexjs/eslint-plugin — all versions since stylex.when support was added (#1270).
### Steps to reproduce
```tsx
import * as stylex from '@stylexjs/stylex';
const styles = stylex.create({
icon: {
transitionDuration: {
default: vars.slow,
[stylex.when.ancestor(":active")]: vars.fast, // OK
[stylex.when.ancestor(":hover")]: {
default: null,
"@media (hover: hover)": vars.fast, // ERROR
},
},
},
});
```
### Test case
_No response_
### Additional comments
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.