facebook / facebook/stylex

`@stylexjs/valid-styles` lint rule prevents using `stylex.env` values as media-queries

Open
#1,764 0 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

`stylex.env` currently works well as a way to define shared media-queries; its values are interpolated early in the transform, and they behave just like literal strings. `enableMediaQueryOrder` works correctly (which is not currently the case for media-queries from `defineConsts`), and the emitted CSS works as intended.

However the lint-rule `valid-styles` from `@stylexjs/eslint-plugin` flags this as incorrect; it enforces that only literal strings can appear in object-key position.

### Expected behavior

The lint rule should not flag values from `stylex.env` as incorrect when used in object-key position; it should use its existing knowledge of `styleXDefaultImports` to recognise that a member-expression coming from exactly `stylex.env` is equivalent to a compile-time literal.

### Steps to reproduce

- In a fresh project, set up StyleX with an `env` object containing `responsive: { belowSmall: '@media (max-width: 600px)' }`.
- Enable the `valid-styles` rule from `@stylexjs/eslint-plugin`.
- Use `stylex.env.responsive.belowSmall` as a media-query key.
- Observe that the lint rule flags this as an error with the message `All keys in a stylex object must be static literal values.`

Image

```tsx
const styles = stylex.create({
hideBelowSmall: {
display: {
[stylex.env.responsive.belowSmall]: 'none',
},
},
});
```

### Test case

_No response_

### Additional comments

At Canva we're currently maintaining a short patch against `@stylexjs/eslint-plugin` to allow `stylex.env.*` member-expressions in this lint rule. We would be happy to open a PR and upstream these changes if there's appetite.

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.