ESLint: Broaden no-unknown-ds-tokens to all strings and catch dynamic construction

packages/eslint-plugin/docs/rules/no-unknown-ds-tokens.md

@@ -2,7 +2,9 @@
 
 When using Design System tokens (CSS custom properties beginning with `--wpds-`), only valid public tokens should be used. Using non-existent tokens will result in broken styles since the CSS variable won't resolve to any value.
 
-This rule lints JSX inline styles. For CSS files, use the [corresponding Stylelint rule](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-theme/#stylelint-plugins) from the `@wordpress/theme` package.
+Additionally, token names must not be dynamically constructed (e.g. via template literal expressions), as they cannot be statically verified for correctness or processed automatically to inject fallbacks.
+
+This rule lints all string literals and template literals in JavaScript/TypeScript files. For CSS files, use the [corresponding Stylelint rule](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-theme/#stylelint-plugins) from the `@wordpress/theme` package.
 
 ## Rule details
 
@@ -12,16 +14,29 @@ Examples of **incorrect** code for this rule:
 <div style={ { color: 'var(--wpds-nonexistent-token)' } } />
 ```
 
+```js
+const token = 'var(--wpds-nonexistent-token)';
+```
+
 ```jsx
 <div style={ { color: 'var(--wpds-fake-color, var(--wpds-also-fake))' } } />
 ```
 
+```js
+// Dynamically constructed token names are not allowed.
+const token = `var(--wpds-dimension-gap-${ size })`;
+```
+
 Examples of **correct** code for this rule:
 
 ```jsx
 <div style={ { color: 'var(--wpds-color-fg-content-neutral)' } } />
 ```
 
+```js
+const token = 'var(--wpds-color-fg-content-neutral)';
+```
+
 ```jsx
 <div style={ { color: 'var(--my-custom-prop)' } } />
 ```

packages/eslint-plugin/rules/__tests__/no-unknown-ds-tokens.js

@@ -1,3 +1,4 @@
+/* eslint-disable @wordpress/no-unknown-ds-tokens */
 import { RuleTester } from 'eslint';
 import rule from '../no-unknown-ds-tokens';
 
@@ -27,6 +28,9 @@ ruleTester.run( 'no-unknown-ds-tokens', rule, {
 		{
 			code: '<div style={ { color: `var(--wpds-color-fg-content-neutral)` } } />',
 		},
+		{
+			code: `const token = 'var(--wpds-color-fg-content-neutral)';`,
+		},
 	],
 	invalid: [
 		{
@@ -56,5 +60,38 @@ ruleTester.run( 'no-unknown-ds-tokens', rule, {
 				},
 			],
 		},
+		{
+			code: `const token = 'var(--wpds-nonexistent-token)';`,
+			errors: [
+				{
+					messageId: 'onlyKnownTokens',
+				},
+			],
+		},
+		{
+			code: 'const token = `var(--wpds-nonexistent-token)`;',
+			errors: [
+				{
+					messageId: 'onlyKnownTokens',
+				},
+			],
+		},
+		{
+			code: 'const token = `var(--wpds-dimension-gap-${ size })`;',
+			errors: [
+				{
+					messageId: 'dynamicToken',
+				},
+			],
+		},
+		{
+			code: '<div style={ { gap: `var(--wpds-dimension-gap-${ size })` } } />',
+			errors: [
+				{
+					messageId: 'dynamicToken',
+				},
+			],
+		},
 	],
 } );
+/* eslint-enable @wordpress/no-unknown-ds-tokens */

packages/eslint-plugin/rules/no-unknown-ds-tokens.js

@@ -42,33 +42,40 @@ module.exports = /** @type {import('eslint').Rule.RuleModule} */ ( {
 	meta: {
 		type: 'problem',
 		docs: {
-			description: 'Prevent use of non-existing --wpds-* variables',
+			description: 'Prevent use of non-existing --wpds-* variables', // eslint-disable-line @wordpress/no-unknown-ds-tokens
 		},
 		schema: [],
 		messages: {
 			onlyKnownTokens:
 				'The following CSS variables are not valid Design System tokens: {{ tokenNames }}',
+			dynamicToken:
+				'Design System tokens must not be dynamically constructed, as they cannot be statically verified for correctness or processed automatically to inject fallbacks.',
 		},
 	},
 	create( context ) {
-		const disallowedTokensAST = `JSXAttribute[name.name="style"] :matches(Literal[value=${ wpdsTokensRegex }], TemplateLiteral TemplateElement[value.raw=${ wpdsTokensRegex }])`;
+		const dynamicTokensAST = `TemplateLiteral[expressions.length>0] TemplateElement[value.raw=${ wpdsTokensRegex }]`;
+		const staticTokensAST = `:matches(Literal[value=${ wpdsTokensRegex }], TemplateLiteral[expressions.length=0] TemplateElement[value.raw=${ wpdsTokensRegex }])`;
 		return {
+			[ dynamicTokensAST ]( node ) {
+				context.report( {
+					node: node.parent,
+					messageId: 'dynamicToken',
+				} );
+			},
 			/** @param {import('estree').Literal | import('estree').TemplateElement} node */
-			[ disallowedTokensAST ]( node ) {
+			[ staticTokensAST ]( node ) {
 				let computedValue;
 
 				if ( ! node.value ) {
 					return;
 				}
 
 				if ( typeof node.value === 'string' ) {
-					// Get the node's value when it's a "string"
 					computedValue = node.value;
 				} else if (
 					typeof node.value === 'object' &&
 					'raw' in node.value
 				) {
-					// Get the node's value when it's a `template literal`
 					computedValue = node.value.cooked ?? node.value.raw;
 				}