facebook / facebook/stylex

ESLint valid-styles rule rejects nested conditions inside stylex.when.*() computed keys

Open
#1,614 3 comments 0 reactions 0 assignees View on GitHub
bug
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

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.