`@stylexjs/valid-styles` lint rule prevents using `stylex.env` values as media-queries
- 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.`
```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
Assessment
This issue has not been assessed yet.