ESLint: Broaden no-setting-ds-tokens to all object property keys

.eslintrc.js

@@ -558,6 +558,7 @@ module.exports = {
 		{
 			files: [ 'packages/eslint-plugin/**', 'packages/theme/**' ],
 			rules: {
+				'@wordpress/no-setting-ds-tokens': 'off',
 				'@wordpress/no-unknown-ds-tokens': 'off',
 			},
 		},

packages/eslint-plugin/CHANGELOG.md

@@ -6,6 +6,10 @@
 
 -   Added [`use-recommended-components`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/eslint-plugin/docs/rules/use-recommended-components.md) rule to encourage the use of recommended UI components in a WordPress environment ([#76222](https://github.com/WordPress/gutenberg/pull/76222)).
 
+### 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

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:
 <div style={ { '--wpds-color-fg-content-neutral': 'red' } } />
 ```
 
-```jsx
-<div style={ { '--wpds-font-size-md': '10px', color: 'blue' } } />
+```js
+const styles = { '--wpds-color-fg-content-neutral': 'red' };
 ```
 
 Examples of **correct** code for this rule:

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

@@ -24,6 +24,15 @@ ruleTester.run( 'no-setting-ds-tokens', rule, {
 		{
 			code: `<div style={ { margin: '10px' } } />`,
 		},
+		{
+			code: `const styles = { '--my-custom-prop': 'value' };`,
+		},
+		{
+			code: `const styles = { color: 'var(--wpds-color-fg-content-neutral)' };`,
+		},
+		{
+			code: `const { '--wpds-color-fg-content-neutral': neutralColor } = styles;`,
+		},
 	],
 	invalid: [
 		{
@@ -42,5 +51,29 @@ 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',
+				},
+			],
+		},
+		{
+			code: `const config = { inner: { '--wpds-color-fg-content-neutral': 'red' } };`,
+			errors: [
+				{
+					messageId: 'disallowedSet',
+				},
+			],
+		},
 	],
 } );

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
-			) {
+			'ObjectExpression > Property[key.value=/^--wpds-/]'( node ) {
 				context.report( {
 					node: node.key,
 					messageId: 'disallowedSet',