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

Open Beginner friendly
#1,764 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
72/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Quiet
Tech stack
eslint, javascript
Domain
tooling

Research direction

Start in the @stylexjs/eslint-plugin valid-styles rule and inspect how its existing styleXDefaultImports knowledge handles member expressions. Reproduce the shown stylex.create media-query case; done means stylex.env member expressions are accepted as static keys while unrelated dynamic keys still produce the existing error.

Written by the indexing model from the issue text.

Description

bug
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 
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.

Dominant language
JavaScript
Stars
10.3k
Forks
485
Avg merge
3d 19h
Merged PRs (30d)
17

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from facebook/stylex

All issues in facebook/stylex

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.