ESLint: Broaden no-unknown-ds-tokens to all strings and catch dynamic construction#75905
Merged
ESLint: Broaden no-unknown-ds-tokens to all strings and catch dynamic construction#75905
no-unknown-ds-tokens to all strings and catch dynamic construction#75905Conversation
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
Two improvements to the
no-unknown-ds-tokensESLint rule:styleattributes.--wpds-*token names are dynamically constructed via template literal expressions.Why?
The previous rule only caught invalid tokens written directly in JSX
styleprops. Tokens defined in plain objects or variables (then passed intostyleindirectly) were invisible to the rule. For example:Additionally, dynamically constructed token names like
var(--wpds-dimension-gap-${size})can't be statically verified for validity, and will also prevent the token fallback build plugin from injecting fallbacks.How?
JSXAttribute[name.name="style"]ancestor constraint from the AST selector, so the rule matches--wpds-*in any string literal or template literal.dynamicTokenmessage).Testing Instructions
Try to modify a component file (e.g.
packages/ui/src/stack/stack.tsx) to add invalid tokens, or dynamically generated tokens. They should error now.