eslint-plugin: values nested under imported-constant media keys are never validated (valid-styles / propLimits)
- Dominant language
- JavaScript
- Stars
- 10.3k
- Forks
- 481
- Avg merge
- 3d 8h
- Merged PRs (30d)
- 13
Description
When a conditional style key comes from an imported `defineConsts`/`defineVars` token — e.g.
```ts
import { breakpoints } from './tokens.stylex'; // defineConsts({ mobile: '@media (max-width: 760px)' })
const styles = stylex.create({
row: {
padding: { default: 8, [breakpoints.mobile]: 20 },
},
});
```
`stylex-valid-styles` returns early on the token key (the `isStylexResolvedVarsToken` branch, around line 382 of `lib/stylex-valid-styles.js` in 0.19.0) and never descends into the nested object, so the nested values are exempt from both validity checks and `propLimits`. The same object written with an inline `'@media (max-width: 760px)'` key is fully validated.
This means adopting shared breakpoint constants — the pattern the docs encourage and proposals like #725 promote — silently shrinks lint coverage: every value moved under a token media key drops out of `propLimits` enforcement.
Expected: resolve the token key and treat it like a literal at-rule key, or at minimum descend into the nested object and validate its values against the outer property.
Observed with `@stylexjs/eslint-plugin` 0.19.0.
Contributor guide
Assessment
This issue has not been assessed yet.