facebook / facebook/stylex

eslint-plugin: values nested under imported-constant media keys are never validated (valid-styles / propLimits)

Open
#1,762 1 comment 0 reactions 0 assignees View on GitHub
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

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.