@wordpress/eslint-plugin 24.4.1-next.v.202603161435.0 → 24.5.0

package/README.md

@@ -82,9 +82,14 @@ The granular rulesets will not define any environment globals. As such, if they
 | [i18n-text-domain](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-text-domain.md)                                           | Enforce passing valid text domains.                                                             | ✓           |
 | [i18n-translator-comments](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-translator-comments.md)                           | Enforce adding translator comments.                                                             | ✓           |
 | [no-base-control-with-label-without-id](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-base-control-with-label-without-id.md) | Disallow the usage of BaseControl component with a label prop set but omitting the id property. | ✓           |
+| [no-dom-globals-in-constructor](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-dom-globals-in-constructor.md)                 | Disallow use of DOM globals in class constructors.                                              |             |
+| [no-dom-globals-in-module-scope](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-dom-globals-in-module-scope.md)               | Disallow use of DOM globals in module scope.                                                    |             |
+| [no-dom-globals-in-react-cc-render](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-dom-globals-in-react-cc-render.md)         | Disallow use of DOM globals in React class component render methods.                            |             |
+| [no-dom-globals-in-react-fc](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-dom-globals-in-react-fc.md)                       | Disallow use of DOM globals in the render cycle of a React function component.                  |             |
 | [components-no-missing-40px-size-prop](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/components-no-missing-40px-size-prop.md)   | Disallow missing `__next40pxDefaultSize` prop on `@wordpress/components` components.            | ✓           |
 | [components-no-unsafe-button-disabled](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/components-no-unsafe-button-disabled.md)   | Disallow using `disabled` on Button without `accessibleWhenDisabled`.                           | ✓           |
 | [no-i18n-in-save](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-i18n-in-save.md)                                             | Disallow translation functions in block save methods.                                           |             |
+| [no-unmerged-classname](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-unmerged-classname.md)                                 | Disallow unmerged `className` in components that spread rest props.                             |             |
 | [no-unguarded-get-range-at](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-unguarded-get-range-at.md)                         | Disallow the usage of unguarded `getRangeAt` calls.                                             | ✓           |
 | [no-unsafe-wp-apis](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-unsafe-wp-apis.md)                                         | Disallow the usage of unsafe APIs from `@wordpress/*` packages                                  | ✓           |
 | [use-recommended-components](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/use-recommended-components.md)                       | Encourage the use of recommended UI components in a WordPress environment.                      |             |

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/eslint-plugin",
-	"version": "24.4.1-next.v.202603161435.0+ab4981c4f",
+	"version": "24.5.0",
 	"description": "ESLint plugin for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -40,9 +40,9 @@
 		"@babel/eslint-parser": "7.25.7",
 		"@typescript-eslint/eslint-plugin": "^6.4.1",
 		"@typescript-eslint/parser": "^6.4.1",
-		"@wordpress/babel-preset-default": "^8.41.1-next.v.202603161435.0+ab4981c4f",
-		"@wordpress/prettier-config": "^4.41.1-next.v.202603161435.0+ab4981c4f",
-		"@wordpress/theme": "^0.8.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/babel-preset-default": "^8.43.0",
+		"@wordpress/prettier-config": "^4.43.0",
+		"@wordpress/theme": "^0.10.0",
 		"cosmiconfig": "^7.0.0",
 		"eslint-config-prettier": "^8.3.0",
 		"eslint-import-resolver-typescript": "^4.4.4",
@@ -78,5 +78,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "748f4e4564fcc0e6ae90200d90bb993a3cef5828"
+	"gitHead": "2cea90674d11aa521ec3f71652fb3a6a4c383969"
 }

package/rules/__tests__/no-dom-globals-in-constructor.js

@@ -0,0 +1,103 @@
+/**
+ * External dependencies
+ */
+import { RuleTester } from 'eslint';
+
+/**
+ * Internal dependencies
+ */
+import rule from '../no-dom-globals-in-constructor';
+
+const ruleTester = new RuleTester( {
+	parserOptions: {
+		ecmaVersion: 2020,
+		sourceType: 'module',
+		ecmaFeatures: { jsx: true },
+	},
+} );
+
+ruleTester.run( 'no-dom-globals-in-constructor', rule, {
+	valid: [
+		{
+			code: `class Foo {
+				method() { document.title = "test"; }
+			}`,
+		},
+		{
+			code: `class Foo {
+				constructor() { this.name = "test"; }
+			}`,
+		},
+	],
+	invalid: [
+		{
+			code: `class Foo {
+				constructor() { document.title = "test"; }
+			}`,
+			errors: [
+				{
+					messageId: 'defaultMessage',
+					data: { name: 'document' },
+				},
+			],
+		},
+		{
+			code: `class Foo {
+				constructor() { window.addEventListener("resize", () => {}); }
+			}`,
+			errors: [
+				{
+					messageId: 'defaultMessage',
+					data: { name: 'window' },
+				},
+			],
+		},
+	],
+} );
+
+// TypeScript-specific tests for shouldSkipReference.
+const tsRuleTester = new RuleTester( {
+	parser: require.resolve( '@typescript-eslint/parser' ),
+	parserOptions: {
+		ecmaVersion: 2020,
+		sourceType: 'module',
+		ecmaFeatures: { jsx: true },
+	},
+} );
+
+tsRuleTester.run( 'no-dom-globals-in-constructor (TypeScript)', rule, {
+	valid: [
+		{
+			// TSTypeReference — type annotation using a DOM global.
+			code: `class Foo {
+				constructor( el: HTMLElement ) { this.el = el; }
+			}`,
+		},
+		{
+			// TSInterfaceHeritage — extending a DOM interface.
+			code: 'interface MyEl extends HTMLElement {}',
+		},
+		{
+			// TSTypeQuery — typeof in type position.
+			code: 'type Win = typeof window;',
+		},
+		{
+			// TSQualifiedName — DOM global as left side of a qualified type name.
+			code: 'type DocType = typeof window.document;',
+		},
+	],
+	invalid: [
+		{
+			// Value-level usage should still be flagged even in TS files.
+			code: `class Foo {
+				constructor() { document.title = "test"; }
+			}`,
+			errors: [
+				{
+					messageId: 'defaultMessage',
+					data: { name: 'document' },
+				},
+			],
+		},
+	],
+} );

package/rules/__tests__/no-dom-globals-in-module-scope.js

@@ -0,0 +1,160 @@
+/**
+ * External dependencies
+ */
+import { RuleTester } from 'eslint';
+
+/**
+ * Internal dependencies
+ */
+import rule from '../no-dom-globals-in-module-scope';
+
+const ruleTester = new RuleTester( {
+	parserOptions: {
+		ecmaVersion: 2020,
+		sourceType: 'module',
+		ecmaFeatures: { jsx: true },
+	},
+} );
+
+ruleTester.run( 'no-dom-globals-in-module-scope', rule, {
+	valid: [
+		{
+			code: 'function foo() { window.scrollTo(0, 0); }',
+		},
+		{
+			code: 'if (typeof window !== "undefined") {}',
+		},
+		{
+			code: 'const isClient = typeof document !== "undefined";',
+		},
+		{
+			code: 'function effect() { const el = document.createElement("div"); }',
+		},
+		{
+			// Function scope in a script file should not be flagged.
+			code: 'function foo() { window.scrollTo(0, 0); }',
+			parserOptions: { ecmaVersion: 2020, sourceType: 'script' },
+		},
+		// Shared globals (browser + node) should NOT be flagged.
+		{
+			code: 'console.log("hello");',
+		},
+		{
+			code: 'setTimeout(() => {}, 100);',
+		},
+		{
+			code: 'const u = new URL("https://example.com");',
+		},
+		{
+			code: 'fetch("/api/data");',
+		},
+	],
+	invalid: [
+		{
+			code: 'const width = window.innerWidth;',
+			errors: [
+				{
+					messageId: 'defaultMessage',
+					data: { name: 'window' },
+				},
+			],
+		},
+		{
+			code: 'const el = document.createElement("div");',
+			errors: [
+				{
+					messageId: 'defaultMessage',
+					data: { name: 'document' },
+				},
+			],
+		},
+		{
+			code: 'navigator.userAgent;',
+			errors: [
+				{
+					messageId: 'defaultMessage',
+					data: { name: 'navigator' },
+				},
+			],
+		},
+		{
+			code: 'localStorage.getItem("key");',
+			errors: [
+				{
+					messageId: 'defaultMessage',
+					data: { name: 'localStorage' },
+				},
+			],
+		},
+		{
+			code: 'sessionStorage.setItem("key", "value");',
+			errors: [
+				{
+					messageId: 'defaultMessage',
+					data: { name: 'sessionStorage' },
+				},
+			],
+		},
+		{
+			code: 'history.pushState({}, "", "/new");',
+			errors: [
+				{
+					messageId: 'defaultMessage',
+					data: { name: 'history' },
+				},
+			],
+		},
+		{
+			code: 'location.href = "/";',
+			errors: [
+				{
+					messageId: 'defaultMessage',
+					data: { name: 'location' },
+				},
+			],
+		},
+	],
+} );
+
+// TypeScript-specific tests for shouldSkipReference.
+const tsRuleTester = new RuleTester( {
+	parser: require.resolve( '@typescript-eslint/parser' ),
+	parserOptions: {
+		ecmaVersion: 2020,
+		sourceType: 'module',
+		ecmaFeatures: { jsx: true },
+	},
+} );
+
+tsRuleTester.run( 'no-dom-globals-in-module-scope (TypeScript)', rule, {
+	valid: [
+		{
+			// TSTypeReference — type annotation using a DOM global.
+			code: 'const el: HTMLElement = null as any;',
+		},
+		{
+			// TSInterfaceHeritage — extending a DOM interface.
+			code: 'interface MyEl extends HTMLElement {}',
+		},
+		{
+			// TSTypeQuery — typeof in type position.
+			code: 'type Win = typeof window;',
+		},
+		{
+			// TSQualifiedName — DOM global as left side of a qualified type name.
+			code: 'type DocType = typeof window.document;',
+		},
+	],
+	invalid: [
+		{
+			// Value-level usage should still be flagged even in TS files.
+			code: 'const width = window.innerWidth;',
+			errors: [
+				{
+					messageId: 'defaultMessage',
+					data: { name: 'window' },
+				},
+			],
+		},
+	],
+} );

package/rules/__tests__/no-dom-globals-in-react-cc-render.js

@@ -0,0 +1,98 @@
+/**
+ * External dependencies
+ */
+import { RuleTester } from 'eslint';
+
+/**
+ * Internal dependencies
+ */
+import rule from '../no-dom-globals-in-react-cc-render';
+
+const ruleTester = new RuleTester( {
+	parserOptions: {
+		ecmaVersion: 2020,
+		sourceType: 'module',
+		ecmaFeatures: { jsx: true },
+	},
+} );
+
+ruleTester.run( 'no-dom-globals-in-react-cc-render', rule, {
+	valid: [
+		{
+			code: `class Foo {
+				render() { const x = 1; return <div>{x}</div>; }
+			}`,
+		},
+		{
+			code: `class Foo {
+				componentDidMount() { window.scrollTo(0, 0); }
+				render() { return <div />; }
+			}`,
+		},
+		{
+			code: `class Foo {
+				render() { return "not jsx"; }
+			}`,
+		},
+	],
+	invalid: [
+		{
+			code: `class Foo {
+				render() { const w = window.innerWidth; return <div>{w}</div>; }
+			}`,
+			errors: [
+				{
+					messageId: 'defaultMessage',
+					data: { name: 'window' },
+				},
+			],
+		},
+	],
+} );
+
+// TypeScript-specific tests for shouldSkipReference.
+const tsRuleTester = new RuleTester( {
+	parser: require.resolve( '@typescript-eslint/parser' ),
+	parserOptions: {
+		ecmaVersion: 2020,
+		sourceType: 'module',
+		ecmaFeatures: { jsx: true },
+	},
+} );
+
+tsRuleTester.run( 'no-dom-globals-in-react-cc-render (TypeScript)', rule, {
+	valid: [
+		{
+			// TSTypeReference — type annotation using a DOM global.
+			code: `class Foo {
+				render() { const el: HTMLElement = this.ref; return <div />; }
+			}`,
+		},
+		{
+			// TSInterfaceHeritage — extending a DOM interface.
+			code: 'interface MyEl extends HTMLElement {}',
+		},
+		{
+			// TSTypeQuery — typeof in type position.
+			code: 'type Win = typeof window;',
+		},
+		{
+			// TSQualifiedName — DOM global as left side of a qualified type name.
+			code: 'type DocType = typeof window.document;',
+		},
+	],
+	invalid: [
+		{
+			// Value-level usage should still be flagged even in TS files.
+			code: `class Foo {
+				render() { const w = window.innerWidth; return <div>{w}</div>; }
+			}`,
+			errors: [
+				{
+					messageId: 'defaultMessage',
+					data: { name: 'window' },
+				},
+			],
+		},
+	],
+} );

package/rules/__tests__/no-dom-globals-in-react-fc.js

@@ -0,0 +1,125 @@
+/**
+ * External dependencies
+ */
+import { RuleTester } from 'eslint';
+
+/**
+ * Internal dependencies
+ */
+import rule from '../no-dom-globals-in-react-fc';
+
+const ruleTester = new RuleTester( {
+	parserOptions: {
+		ecmaVersion: 2020,
+		sourceType: 'module',
+		ecmaFeatures: { jsx: true },
+	},
+} );
+
+ruleTester.run( 'no-dom-globals-in-react-fc', rule, {
+	valid: [
+		{
+			code: 'function notAComponent() { window.scrollTo(0, 0); }',
+		},
+		{
+			code: 'function Component() { return <div />; }',
+		},
+		{
+			code: `function Component() {
+				useEffect(() => { window.scrollTo(0, 0); });
+				return <div />;
+			}`,
+		},
+		{
+			// DOM global inside a nested callback (event handler) inside FC
+			// is allowed — the handler runs at event time, not render time.
+			code: `function Component() {
+				const onClick = () => { document.title = "clicked"; };
+				return <button onClick={onClick} />;
+			}`,
+		},
+	],
+	invalid: [
+		{
+			code: `function Component() {
+				window.addEventListener("resize", () => {});
+				return <div />;
+			}`,
+			errors: [
+				{
+					messageId: 'defaultMessage',
+					data: { name: 'window' },
+				},
+			],
+		},
+		{
+			code: `const Header = () => {
+				const w = document.body.clientWidth;
+				return <header>{w}</header>;
+			}`,
+			errors: [
+				{
+					messageId: 'defaultMessage',
+					data: { name: 'document' },
+				},
+			],
+		},
+		{
+			code: `const Icon = ( { name } ) => <span className={ window.iconPrefix + name } />;`,
+			errors: [
+				{
+					messageId: 'defaultMessage',
+					data: { name: 'window' },
+				},
+			],
+		},
+	],
+} );
+
+// TypeScript-specific tests for shouldSkipReference.
+const tsRuleTester = new RuleTester( {
+	parser: require.resolve( '@typescript-eslint/parser' ),
+	parserOptions: {
+		ecmaVersion: 2020,
+		sourceType: 'module',
+		ecmaFeatures: { jsx: true },
+	},
+} );
+
+tsRuleTester.run( 'no-dom-globals-in-react-fc (TypeScript)', rule, {
+	valid: [
+		{
+			// TSTypeReference — type annotation using a DOM global.
+			code: `function Component( { el }: { el: HTMLElement } ) {
+				return <div />;
+			}`,
+		},
+		{
+			// TSInterfaceHeritage — extending a DOM interface.
+			code: 'interface MyEl extends HTMLElement {}',
+		},
+		{
+			// TSTypeQuery — typeof in type position.
+			code: 'type Win = typeof window;',
+		},
+		{
+			// TSQualifiedName — DOM global as left side of a qualified type name.
+			code: 'type DocType = typeof window.document;',
+		},
+	],
+	invalid: [
+		{
+			// Value-level usage should still be flagged even in TS files.
+			code: `function Component() {
+				const w = window.innerWidth;
+				return <div>{w}</div>;
+			}`,
+			errors: [
+				{
+					messageId: 'defaultMessage',
+					data: { name: 'window' },
+				},
+			],
+		},
+	],
+} );

package/rules/__tests__/no-i18n-in-save.js

@@ -90,7 +90,6 @@ function render() {
 			errors: [
 				{
 					messageId: 'noI18nInSave',
-					type: 'CallExpression',
 				},
 			],
 		},
@@ -103,7 +102,6 @@ function save() {
 			errors: [
 				{
 					messageId: 'noI18nInSave',
-					type: 'CallExpression',
 				},
 			],
 		},
@@ -116,7 +114,6 @@ const save = () => {
 			errors: [
 				{
 					messageId: 'noI18nInSave',
-					type: 'CallExpression',
 				},
 			],
 		},
@@ -129,7 +126,6 @@ const save = function() {
 			errors: [
 				{
 					messageId: 'noI18nInSave',
-					type: 'CallExpression',
 				},
 			],
 		},
@@ -142,7 +138,6 @@ export default function save() {
 			errors: [
 				{
 					messageId: 'noI18nInSave',
-					type: 'CallExpression',
 				},
 			],
 		},
@@ -157,7 +152,6 @@ const settings = {
 			errors: [
 				{
 					messageId: 'noI18nInSave',
-					type: 'CallExpression',
 				},
 			],
 		},
@@ -170,7 +164,6 @@ const settings = {
 			errors: [
 				{
 					messageId: 'noI18nInSave',
-					type: 'CallExpression',
 				},
 			],
 		},
@@ -183,7 +176,6 @@ function save() {
 			errors: [
 				{
 					messageId: 'noI18nInSave',
-					type: 'CallExpression',
 				},
 			],
 		},
@@ -197,7 +189,6 @@ function save() {
 			errors: [
 				{
 					messageId: 'noI18nInSave',
-					type: 'CallExpression',
 				},
 			],
 		},
@@ -211,7 +202,6 @@ function save() {
 			errors: [
 				{
 					messageId: 'noI18nInSave',
-					type: 'CallExpression',
 				},
 			],
 		},
@@ -228,7 +218,6 @@ function save() {
 			errors: [
 				{
 					messageId: 'noI18nInSave',
-					type: 'CallExpression',
 				},
 			],
 		},
@@ -243,11 +232,9 @@ function save() {
 			errors: [
 				{
 					messageId: 'noI18nInSave',
-					type: 'CallExpression',
 				},
 				{
 					messageId: 'noI18nInSave',
-					type: 'CallExpression',
 				},
 			],
 		},
@@ -262,7 +249,6 @@ function save() {
 			errors: [
 				{
 					messageId: 'noI18nInSave',
-					type: 'CallExpression',
 				},
 			],
 		},

package/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',
+				},
+			],
+		},
 	],
 } );