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

[hen-x]

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.

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.