From 326f9b140ce54478fab5ed6671ece4dd8a6f7827 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Fri, 6 Mar 2026 05:08:26 +0900 Subject: [PATCH 1/4] ESLint no-setting-ds-tokens: Broaden to all object property keys --- .../docs/rules/no-setting-ds-tokens.md | 8 +++---- .../rules/__tests__/no-setting-ds-tokens.js | 22 +++++++++++++++++++ .../rules/no-setting-ds-tokens.js | 6 ++--- 3 files changed, 28 insertions(+), 8 deletions(-) diff --git a/packages/eslint-plugin/docs/rules/no-setting-ds-tokens.md b/packages/eslint-plugin/docs/rules/no-setting-ds-tokens.md index 71c37c97b0825a..fa4cb6de1fb67b 100644 --- a/packages/eslint-plugin/docs/rules/no-setting-ds-tokens.md +++ b/packages/eslint-plugin/docs/rules/no-setting-ds-tokens.md @@ -1,8 +1,8 @@ # Disallow setting Design System token CSS custom properties (no-setting-ds-tokens) -Design System tokens (CSS custom properties beginning with `--wpds-`) are meant to be consumed, not set. Setting these properties in inline styles can lead to unexpected behavior and breaks the Design System's theming capabilities. +Design System tokens (CSS custom properties beginning with `--wpds-`) are meant to be consumed, not set. Setting these properties can lead to unexpected behavior and breaks the Design System's theming capabilities. -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. +This rule lints all object property keys 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,8 +12,8 @@ Examples of **incorrect** code for this rule:
``` -```jsx -
+```js +const styles = { '--wpds-color-fg-content-neutral': 'red' }; ``` Examples of **correct** code for this rule: diff --git a/packages/eslint-plugin/rules/__tests__/no-setting-ds-tokens.js b/packages/eslint-plugin/rules/__tests__/no-setting-ds-tokens.js index ab2f22dd5d0401..2af13b8f052e84 100644 --- a/packages/eslint-plugin/rules/__tests__/no-setting-ds-tokens.js +++ b/packages/eslint-plugin/rules/__tests__/no-setting-ds-tokens.js @@ -24,6 +24,12 @@ ruleTester.run( 'no-setting-ds-tokens', rule, { { code: `
`, }, + { + code: `const styles = { '--my-custom-prop': 'value' };`, + }, + { + code: `const styles = { color: 'var(--wpds-color-fg-content-neutral)' };`, + }, ], invalid: [ { @@ -42,5 +48,21 @@ ruleTester.run( 'no-setting-ds-tokens', rule, { }, ], }, + { + code: `const styles = { '--wpds-color-fg-content-neutral': 'red' };`, + errors: [ + { + messageId: 'disallowedSet', + }, + ], + }, + { + code: `function getStyles() { return { '--wpds-font-size-md': '10px' }; }`, + errors: [ + { + messageId: 'disallowedSet', + }, + ], + }, ], } ); diff --git a/packages/eslint-plugin/rules/no-setting-ds-tokens.js b/packages/eslint-plugin/rules/no-setting-ds-tokens.js index 402ecf5c1e4c5d..c89cdfcd723e4e 100644 --- a/packages/eslint-plugin/rules/no-setting-ds-tokens.js +++ b/packages/eslint-plugin/rules/no-setting-ds-tokens.js @@ -3,7 +3,7 @@ module.exports = /** @type {import('eslint').Rule.RuleModule} */ ( { type: 'problem', docs: { description: - 'Disallow setting any CSS custom property beginning with --wpds- in inline styles', + 'Disallow setting any CSS custom property beginning with --wpds-', }, schema: [], messages: { @@ -14,9 +14,7 @@ module.exports = /** @type {import('eslint').Rule.RuleModule} */ ( { create( context ) { return { /** @param {import('estree').Property} node */ - 'JSXAttribute[name.name="style"] ObjectExpression > Property[key.value=/^--wpds-/]'( - node - ) { + 'Property[key.value=/^--wpds-/]'( node ) { context.report( { node: node.key, messageId: 'disallowedSet', From d1dc8793c31255a121f544d72ea30efa443d3e93 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Fri, 6 Mar 2026 05:16:55 +0900 Subject: [PATCH 2/4] Add changelog --- packages/eslint-plugin/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/eslint-plugin/CHANGELOG.md b/packages/eslint-plugin/CHANGELOG.md index f7acf9e52b3a36..025fa8046fa6e8 100644 --- a/packages/eslint-plugin/CHANGELOG.md +++ b/packages/eslint-plugin/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Enhancements + +- The `no-setting-ds-tokens` rule now checks all object property keys, not just those inside JSX `style` attributes ([#76212](https://github.com/WordPress/gutenberg/pull/76212)). + ## 24.3.0 (2026-03-04) ### New Features From 5f655f3f99ebad8746cbb17c329e873ac9967484 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Fri, 6 Mar 2026 06:08:02 +0900 Subject: [PATCH 3/4] Disable rule for theme package --- .eslintrc.js | 1 + 1 file changed, 1 insertion(+) diff --git a/.eslintrc.js b/.eslintrc.js index 149d230349c77c..b07dee0cf9ba80 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -557,6 +557,7 @@ module.exports = { { files: [ 'packages/eslint-plugin/**', 'packages/theme/**' ], rules: { + '@wordpress/no-setting-ds-tokens': 'off', '@wordpress/no-unknown-ds-tokens': 'off', }, }, From 29a710a57bccb26471d243e7d01cb8d3927eb9fe Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 12 Mar 2026 00:08:17 +0900 Subject: [PATCH 4/4] Address review feedback: scope selector to ObjectExpression, add tests --- .../rules/__tests__/no-setting-ds-tokens.js | 11 +++++++++++ packages/eslint-plugin/rules/no-setting-ds-tokens.js | 2 +- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/eslint-plugin/rules/__tests__/no-setting-ds-tokens.js b/packages/eslint-plugin/rules/__tests__/no-setting-ds-tokens.js index 2af13b8f052e84..b46d7bf6b7bf7d 100644 --- a/packages/eslint-plugin/rules/__tests__/no-setting-ds-tokens.js +++ b/packages/eslint-plugin/rules/__tests__/no-setting-ds-tokens.js @@ -30,6 +30,9 @@ ruleTester.run( 'no-setting-ds-tokens', rule, { { code: `const styles = { color: 'var(--wpds-color-fg-content-neutral)' };`, }, + { + code: `const { '--wpds-color-fg-content-neutral': neutralColor } = styles;`, + }, ], invalid: [ { @@ -64,5 +67,13 @@ ruleTester.run( 'no-setting-ds-tokens', rule, { }, ], }, + { + code: `const config = { inner: { '--wpds-color-fg-content-neutral': 'red' } };`, + errors: [ + { + messageId: 'disallowedSet', + }, + ], + }, ], } ); diff --git a/packages/eslint-plugin/rules/no-setting-ds-tokens.js b/packages/eslint-plugin/rules/no-setting-ds-tokens.js index c89cdfcd723e4e..9b609204047b58 100644 --- a/packages/eslint-plugin/rules/no-setting-ds-tokens.js +++ b/packages/eslint-plugin/rules/no-setting-ds-tokens.js @@ -14,7 +14,7 @@ module.exports = /** @type {import('eslint').Rule.RuleModule} */ ( { create( context ) { return { /** @param {import('estree').Property} node */ - 'Property[key.value=/^--wpds-/]'( node ) { + 'ObjectExpression > Property[key.value=/^--wpds-/]'( node ) { context.report( { node: node.key, messageId: 'disallowedSet',