diff --git a/.eslintrc.js b/.eslintrc.js index 4ae09aba932081..5d7d0556d7d8d7 100644 --- a/.eslintrc.js +++ b/.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', }, }, diff --git a/packages/eslint-plugin/CHANGELOG.md b/packages/eslint-plugin/CHANGELOG.md index a9c1f3a2a14af5..d5df4223ed002e 100644 --- a/packages/eslint-plugin/CHANGELOG.md +++ b/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 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..b46d7bf6b7bf7d 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,15 @@ 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)' };`, + }, + { + 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', + }, + ], + }, ], } ); diff --git a/packages/eslint-plugin/rules/no-setting-ds-tokens.js b/packages/eslint-plugin/rules/no-setting-ds-tokens.js index 402ecf5c1e4c5d..9b609204047b58 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 - ) { + 'ObjectExpression > Property[key.value=/^--wpds-/]'( node ) { context.report( { node: node.key, messageId: 'disallowedSet',