@wordpress/eslint-plugin 25.0.1-next.v.202604201441.0 → 25.2.0

package/README.md

@@ -127,7 +127,9 @@ The granular rulesets will not define any environment globals. As such, if they
 | [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-unsafe-render-order](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-unsafe-render-order.md)                               | Prevent unsafe `render` composition orders that silently remove semantics.                      | ✓           |
 | [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-non-module-stylesheet-imports](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-non-module-stylesheet-imports.md)           | Disallow importing non-module stylesheets from JavaScript files.                                |             |
 | [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                                  | ✓           |
@@ -135,6 +137,7 @@ The granular rulesets will not define any environment globals. As such, if they
 | [no-unused-vars-before-return](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-unused-vars-before-return.md)                   | Disallow assigning variable values if unused before a return.                                   | ✓           |
 | [no-wp-process-env](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-wp-process-env.md)                                         | Disallow legacy usage of WordPress variables via `process.env` like `process.env.SCRIPT_DEBUG`. | ✓           |
 | [react-no-unsafe-timeout](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/react-no-unsafe-timeout.md)                             | Disallow unsafe `setTimeout` in component.                                                      |             |
+| [use-import-as](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/use-import-as.md)                                                 | Enforce configured `as` names for specific named imports and unlocked private APIs.             |             |
 | [valid-sprintf](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/valid-sprintf.md)                                                 | Enforce valid sprintf usage.                                                                    | ✓           |
 | [wp-global-usage](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/wp-global-usage.md)                                             | Enforce correct usage of WordPress globals like `globalThis.SCRIPT_DEBUG`.                      |             |
 
@@ -144,6 +147,7 @@ If you are upgrading from a previous version that used `.eslintrc.*` files:
 
 1. Replace your `.eslintrc.*` file with an `eslint.config.mjs` file.
 2. Change `extends` arrays to import + spread:
+
     ```js
     // Old (.eslintrc.js)
     module.exports = {
@@ -154,14 +158,17 @@ If you are upgrading from a previous version that used `.eslintrc.*` files:
     import wordpress from '@wordpress/eslint-plugin';
     export default [ ...wordpress.configs.recommended ];
     ```
+
 3. Convert `overrides` to separate config objects with `files` patterns.
 4. Replace `env` with `languageOptions.globals` using the [`globals`](https://www.npmjs.com/package/globals) package.
 5. Delete your `.eslintignore` file and move patterns into an `ignores` config object.
 6. Update rule prefixes in inline comments: `eslint-comments/*` has been renamed to `@eslint-community/eslint-comments/*`. For example:
+
     ```diff
     - /* eslint-disable eslint-comments/no-unlimited-disable */
     + /* eslint-disable @eslint-community/eslint-comments/no-unlimited-disable */
     ```
+
 7. Remove any `/* eslint-env */` comments — they are no longer supported in ESLint v10. Use `languageOptions.globals` in your config instead.
 
 For a comprehensive walkthrough with examples and troubleshooting, see the [Gutenberg ESLint v10 migration guide](https://github.com/WordPress/gutenberg/blob/HEAD/docs/how-to-guides/eslint-v10-migration.md). See also the [ESLint migration guide](https://eslint.org/docs/latest/use/configure/migration-guide) for general flat config details.

package/configs/babel-parser-compat.js

@@ -1,16 +1,14 @@
-/* eslint-disable jsdoc/check-tag-names -- Package names containing @ are not JSDoc tags */
 /**
  * Wrapper around @babel/eslint-parser that ensures compatibility with
  * ESLint v10+. ESLint v10 expects `scopeManager.addGlobals()` which is
  * available in eslint-scope v9 bundled with ESLint v10, but
- * @babel/eslint-parser v7 uses an older eslint-scope that does not have
+ * `@babel/eslint-parser` v7 uses an older eslint-scope that does not have
  * this method. This wrapper patches the scope manager when needed.
  *
  * TODO: Remove this wrapper when upgrading to @babel/eslint-parser v8+,
  * which adds native ESLint v10 support (requires @babel/core v8).
  * See https://github.com/babel/babel/issues/17791
  */
-/* eslint-enable jsdoc/check-tag-names */
 const babelParser = require( '@babel/eslint-parser' );
 
 module.exports = {

package/configs/custom.js

@@ -16,6 +16,7 @@ module.exports = [
 			'@wordpress/no-unguarded-get-range-at': 'error',
 			'@wordpress/no-global-active-element': 'error',
 			'@wordpress/no-global-get-selection': 'error',
+			'@wordpress/no-unsafe-render-order': 'error',
 			'@wordpress/no-setting-ds-tokens': 'error',
 			'@wordpress/no-unknown-ds-tokens': 'error',
 			'@wordpress/no-unsafe-wp-apis': 'error',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/eslint-plugin",
-	"version": "25.0.1-next.v.202604201441.0+dab6d8c07",
+	"version": "25.2.0",
 	"description": "ESLint plugin for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -44,9 +44,9 @@
 		"@babel/eslint-parser": "^7.28.6",
 		"@eslint-community/eslint-plugin-eslint-comments": "^4.4.0",
 		"@eslint/compat": "^2.0.0",
-		"@wordpress/babel-preset-default": "^8.44.1-next.v.202604201441.0+dab6d8c07",
-		"@wordpress/prettier-config": "^4.44.1-next.v.202604201441.0+dab6d8c07",
-		"@wordpress/theme": "^0.11.1-next.v.202604201441.0+dab6d8c07",
+		"@wordpress/babel-preset-default": "^8.46.0",
+		"@wordpress/prettier-config": "^4.46.0",
+		"@wordpress/theme": "^0.13.0",
 		"cosmiconfig": "^7.0.0",
 		"eslint-config-prettier": "^10.0.0",
 		"eslint-import-resolver-typescript": "^4.4.4",
@@ -57,7 +57,7 @@
 		"eslint-plugin-playwright": "^2.1.0",
 		"eslint-plugin-prettier": "^5.0.0",
 		"eslint-plugin-react": "^7.37.0",
-		"eslint-plugin-react-hooks": "^5.0.0",
+		"eslint-plugin-react-hooks": "7.1.1",
 		"globals": "^16.0.0",
 		"requireindex": "^1.2.0",
 		"typescript-eslint": "^8.0.0"
@@ -83,5 +83,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c788005ba4ee2a34851c1217c51602656aa7c3a6"
+	"gitHead": "51264e33b95fadff9a06b68141e674ce9cde9675"
 }

package/rules/__tests__/no-non-module-stylesheet-imports.js

@@ -0,0 +1,39 @@
+import { RuleTester } from 'eslint';
+import rule from '../no-non-module-stylesheet-imports';
+
+const ruleTester = new RuleTester( {
+	languageOptions: {
+		sourceType: 'module',
+		ecmaVersion: 6,
+	},
+} );
+
+ruleTester.run( 'no-non-module-stylesheet-imports', rule, {
+	valid: [
+		{ code: "import './component';" },
+		{ code: "import styles from './style.module.css';" },
+		{ code: "import styles from './style.module.scss';" },
+		{ code: "import styles from './style.module.sass';" },
+		{ code: "import theme from './style.module.css?inline';" },
+		{ code: "import './style.module.css';" },
+		{ code: "import './style.module.scss?inline';" },
+	],
+	invalid: [
+		{
+			code: "import './style.css';",
+			errors: [ { messageId: 'noNonModuleStylesheet' } ],
+		},
+		{
+			code: "import './style.scss';",
+			errors: [ { messageId: 'noNonModuleStylesheet' } ],
+		},
+		{
+			code: "import './style.sass';",
+			errors: [ { messageId: 'noNonModuleStylesheet' } ],
+		},
+		{
+			code: "import styles from './style.scss';",
+			errors: [ { messageId: 'noNonModuleStylesheet' } ],
+		},
+	],
+} );

package/rules/__tests__/no-setting-ds-tokens.js

@@ -35,6 +35,18 @@ ruleTester.run( 'no-setting-ds-tokens', rule, {
 		{
 			code: `const { '--wpds-color-fg-content-neutral': neutralColor } = styles;`,
 		},
+		{
+			code: `const css = '--my-custom-prop: red;';`,
+		},
+		{
+			code: 'const css = `--my-custom-prop-${ suffix }: red;`;',
+		},
+		{
+			code: 'const css = `--my-custom-prop: red;`;',
+		},
+		{
+			code: '<style>{ `--my-custom-prop-${ suffix }: red;` }</style>',
+		},
 	],
 	invalid: [
 		{
@@ -77,5 +89,45 @@ ruleTester.run( 'no-setting-ds-tokens', rule, {
 				},
 			],
 		},
+		{
+			code: `const css = '--wpds-color-fg-content-neutral: red;';`,
+			errors: [
+				{
+					messageId: 'disallowedSet',
+				},
+			],
+		},
+		{
+			code: 'const css = `--wpds-color-fg-content-neutral: red;`;',
+			errors: [
+				{
+					messageId: 'disallowedSet',
+				},
+			],
+		},
+		{
+			code: 'const css = `--wpds-color-fg-content-neutral: ${ value };`;',
+			errors: [
+				{
+					messageId: 'disallowedSet',
+				},
+			],
+		},
+		{
+			code: 'const css = `--wpds-color-${ suffix }: red;`;',
+			errors: [
+				{
+					messageId: 'disallowedSet',
+				},
+			],
+		},
+		{
+			code: '<style>{ `--wpds-color-${ suffix }: red;` }</style>',
+			errors: [
+				{
+					messageId: 'disallowedSet',
+				},
+			],
+		},
 	],
 } );

package/rules/__tests__/no-unknown-ds-tokens.js

@@ -44,6 +44,15 @@ ruleTester.run( 'no-unknown-ds-tokens', rule, {
 		{
 			code: `const style = { '--wpds-color-fg-content-neutral': 'red' };`,
 		},
+		{
+			code: `const css = '--wpds-color-fg-content-neutral: red;';`,
+		},
+		{
+			code: 'const css = `--wpds-color-fg-content-neutral: red;`;',
+		},
+		{
+			code: 'const css = `--wpds-color-fg-content-neutral: ${ value };`;',
+		},
 	],
 	invalid: [
 		{
@@ -147,6 +156,17 @@ ruleTester.run( 'no-unknown-ds-tokens', rule, {
 				},
 			],
 		},
+		{
+			code: `const css = '--wpds-nonexistent-token: red;';`,
+			errors: [
+				{
+					messageId: 'onlyKnownTokens',
+					data: {
+						tokenNames: "'--wpds-nonexistent-token'",
+					},
+				},
+			],
+		},
 		{
 			code: `const token = '--wpds-color-fg-content-neutral';`,
 			errors: [
@@ -202,5 +222,39 @@ ruleTester.run( 'no-unknown-ds-tokens', rule, {
 				},
 			],
 		},
+		{
+			code: `const css = '--wpds-color-fg-content-neutral: red; color: --wpds-color-bg-surface-neutral;';`,
+			errors: [
+				{
+					messageId: 'bareToken',
+					data: {
+						tokenNames: "'--wpds-color-bg-surface-neutral'",
+					},
+				},
+			],
+		},
+		{
+			code: `const css = '--wpds-color-fg-content-neutral: red; background: --wpds-color-fg-content-neutral;';`,
+			errors: [
+				{
+					messageId: 'bareToken',
+					data: {
+						tokenNames: "'--wpds-color-fg-content-neutral'",
+					},
+				},
+			],
+		},
+		{
+			code: `const css = '--wpds-other-nonexistent-token: red; color: var(--wpds-nonexistent-token);';`,
+			errors: [
+				{
+					messageId: 'onlyKnownTokens',
+					data: {
+						tokenNames:
+							"'--wpds-other-nonexistent-token', '--wpds-nonexistent-token'",
+					},
+				},
+			],
+		},
 	],
 } );

package/rules/__tests__/no-unsafe-render-order.js

@@ -0,0 +1,136 @@
+import { RuleTester } from 'eslint';
+import rule from '../no-unsafe-render-order';
+
+const ruleTester = new RuleTester( {
+	languageOptions: {
+		sourceType: 'module',
+		ecmaVersion: 6,
+		parserOptions: {
+			ecmaFeatures: {
+				jsx: true,
+			},
+		},
+	},
+} );
+
+ruleTester.run( 'no-unsafe-render-order', rule, {
+	valid: [
+		{
+			code: `
+				import { Dialog, VisuallyHidden } from '@wordpress/ui';
+
+				<VisuallyHidden render={ <Dialog.Title /> }>
+					Title
+				</VisuallyHidden>;
+			`,
+		},
+		{
+			code: `
+				import { Text, Link } from '@wordpress/ui';
+
+				<Text render={ <Link href="#" /> }>Read more</Text>;
+			`,
+		},
+		{
+			code: `
+				import { Popover } from '@wordpress/ui';
+				import { VisuallyHidden } from 'some-other-package';
+
+				<Popover.Title render={ <VisuallyHidden /> }>
+					Title
+				</Popover.Title>;
+			`,
+		},
+		{
+			code: `
+				import { Link } from '@wordpress/ui';
+
+				<Link href="#">Read more</Link>;
+			`,
+		},
+		{
+			code: `
+				import { Link } from '@wordpress/ui';
+				import { VisuallyHidden } from 'some-other-package';
+
+				<Link href="#" render={ <VisuallyHidden /> }>
+					Read more
+				</Link>;
+			`,
+		},
+	],
+	invalid: [
+		{
+			code: `
+				import { Dialog, VisuallyHidden } from '@wordpress/ui';
+
+				<Dialog.Title render={ <VisuallyHidden /> }>
+					Title
+				</Dialog.Title>;
+			`,
+			errors: [ { messageId: 'visuallyHiddenOrder' } ],
+		},
+		{
+			code: `
+				import { Dialog as UIDialog, VisuallyHidden as Hidden } from '@wordpress/ui';
+
+				<UIDialog.Title render={ <Hidden /> }>
+					Title
+				</UIDialog.Title>;
+			`,
+			errors: [ { messageId: 'visuallyHiddenOrder' } ],
+		},
+		{
+			code: `
+				import { VisuallyHidden } from '@wordpress/ui';
+
+				<CustomThing render={ <VisuallyHidden /> }>
+					Hidden content
+				</CustomThing>;
+			`,
+			errors: [ { messageId: 'visuallyHiddenOrder' } ],
+		},
+		{
+			code: `
+				import { Link, Text } from '@wordpress/ui';
+
+				<Link href="#" render={ <Text /> }>
+					Read more
+				</Link>;
+			`,
+			errors: [ { messageId: 'linkTextOrder' } ],
+		},
+		{
+			code: `
+				import { Link as UILink, Text as UIText } from '@wordpress/ui';
+
+				<UILink href="#" render={ <UIText /> }>
+					Read more
+				</UILink>;
+			`,
+			errors: [ { messageId: 'linkTextOrder' } ],
+		},
+		{
+			code: `
+				import * as Field from '../index';
+				import { VisuallyHidden } from '../../../visually-hidden';
+
+				<Field.Label render={ <VisuallyHidden /> }>Name</Field.Label>;
+			`,
+			options: [ { checkLocalImports: true } ],
+			errors: [ { messageId: 'visuallyHiddenOrder' } ],
+		},
+		{
+			code: `
+				import { Link } from '../index';
+				import { Text } from '../../text';
+
+				<Link href="#" render={ <Text /> }>
+					Read more
+				</Link>;
+			`,
+			options: [ { checkLocalImports: true } ],
+			errors: [ { messageId: 'linkTextOrder' } ],
+		},
+	],
+} );

package/rules/__tests__/use-import-as.js

@@ -0,0 +1,271 @@
+/**
+ * External dependencies
+ */
+import { RuleTester } from 'eslint';
+
+/**
+ * Internal dependencies
+ */
+import rule from '../use-import-as';
+
+const ruleTester = new RuleTester( {
+	languageOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2022,
+	},
+} );
+
+const options = [
+	{
+		'@wordpress/components': {
+			Badge: 'WCBadge',
+			VisuallyHidden: 'WCVisuallyHidden',
+		},
+	},
+];
+
+const withSuggestions = ( message, output, desc ) => ( {
+	message,
+	suggestions: [
+		{
+			desc,
+			output,
+		},
+	],
+} );
+
+ruleTester.run( 'use-import-as', rule, {
+	valid: [
+		// With no config, the rule is a no-op.
+		{
+			code: "import { VisuallyHidden } from '@wordpress/components';",
+		},
+
+		// Unrelated packages are not affected.
+		{
+			code: "import { VisuallyHidden } from '@wordpress/ui';",
+			options,
+		},
+		{
+			code: "import { Button } from '@wordpress/components';",
+			options,
+		},
+
+		// Default and namespace imports are not affected.
+		{
+			code: "import Components from '@wordpress/components';",
+			options,
+		},
+		{
+			code: "import * as Components from '@wordpress/components';",
+			options,
+		},
+
+		// Configured `as` names are allowed.
+		{
+			code: "import { VisuallyHidden as WCVisuallyHidden } from '@wordpress/components';",
+			options,
+		},
+		{
+			code: 'import { "VisuallyHidden" as WCVisuallyHidden } from \'@wordpress/components\';',
+			options,
+		},
+		{
+			code: "import { Button, VisuallyHidden as WCVisuallyHidden } from '@wordpress/components';",
+			options,
+		},
+		{
+			code: `
+				import { privateApis as componentsPrivateApis } from '@wordpress/components';
+				import { unlock } from '../../lock-unlock';
+
+				const { Badge: WCBadge } = unlock( componentsPrivateApis );
+			`,
+			options,
+		},
+		{
+			code: `
+				import { privateApis } from '@wordpress/components';
+				import { unlock } from '../../lock-unlock';
+
+				const { Badge: WCBadge } = unlock( privateApis );
+			`,
+			options,
+		},
+		{
+			code: `
+				import { privateApis } from '@wordpress/components';
+				import { unlock as open } from '../../lock-unlock';
+
+				const { Badge: WCBadge = fallbackBadge } = open( privateApis );
+			`,
+			options,
+		},
+		{
+			code: `
+				import { privateApis as uiPrivateApis } from '@wordpress/ui';
+				import { unlock } from '../../lock-unlock';
+
+				const { Badge } = unlock( uiPrivateApis );
+			`,
+			options,
+		},
+		{
+			code: `
+				import { privateApis } from '@wordpress/components';
+				import { unlock } from '../../lock-unlock';
+
+				const { [ badgeKey ]: Badge } = unlock( privateApis );
+			`,
+			options,
+		},
+		{
+			code: `
+				import { privateApis } from '@wordpress/components';
+				import { unlock } from '../../lock-unlock';
+
+				function test() {
+					function unlock( value ) {
+						return value;
+					}
+
+					const { Badge } = unlock( privateApis );
+
+					return Badge;
+				}
+			`,
+			options,
+		},
+	],
+
+	invalid: [
+		{
+			code: "import { VisuallyHidden } from '@wordpress/components';",
+			options,
+			errors: [
+				withSuggestions(
+					'`VisuallyHidden` from `@wordpress/components` must be imported as `WCVisuallyHidden`.',
+					"import { VisuallyHidden as WCVisuallyHidden } from '@wordpress/components';",
+					'Import as `WCVisuallyHidden`.'
+				),
+			],
+		},
+		{
+			code: "import { VisuallyHidden as Hidden } from '@wordpress/components';",
+			options,
+			errors: [
+				withSuggestions(
+					'`VisuallyHidden` from `@wordpress/components` must be imported as `WCVisuallyHidden`.',
+					"import { VisuallyHidden as WCVisuallyHidden } from '@wordpress/components';",
+					'Import as `WCVisuallyHidden`.'
+				),
+			],
+		},
+		{
+			code: 'import { "VisuallyHidden" as Hidden } from \'@wordpress/components\';',
+			options,
+			errors: [
+				withSuggestions(
+					'`VisuallyHidden` from `@wordpress/components` must be imported as `WCVisuallyHidden`.',
+					'import { "VisuallyHidden" as WCVisuallyHidden } from \'@wordpress/components\';',
+					'Import as `WCVisuallyHidden`.'
+				),
+			],
+		},
+		{
+			code: "import { Button, VisuallyHidden } from '@wordpress/components';",
+			options,
+			errors: [
+				withSuggestions(
+					'`VisuallyHidden` from `@wordpress/components` must be imported as `WCVisuallyHidden`.',
+					"import { Button, VisuallyHidden as WCVisuallyHidden } from '@wordpress/components';",
+					'Import as `WCVisuallyHidden`.'
+				),
+			],
+		},
+		{
+			code: `
+				import { privateApis as componentsPrivateApis } from '@wordpress/components';
+				import { unlock } from '../../lock-unlock';
+
+				const { Badge } = unlock( componentsPrivateApis );
+			`,
+			options,
+			errors: [
+				withSuggestions(
+					'`Badge` from `@wordpress/components` must be imported as `WCBadge`.',
+					`
+				import { privateApis as componentsPrivateApis } from '@wordpress/components';
+				import { unlock } from '../../lock-unlock';
+
+				const { Badge: WCBadge } = unlock( componentsPrivateApis );
+			`,
+					'Destructure as `WCBadge`.'
+				),
+			],
+		},
+		{
+			code: `
+				import { privateApis } from '@wordpress/components';
+				import { unlock } from '../../lock-unlock';
+
+				const { Badge: HiddenBadge } = unlock( privateApis );
+			`,
+			options,
+			errors: [
+				withSuggestions(
+					'`Badge` from `@wordpress/components` must be imported as `WCBadge`.',
+					`
+				import { privateApis } from '@wordpress/components';
+				import { unlock } from '../../lock-unlock';
+
+				const { Badge: WCBadge } = unlock( privateApis );
+			`,
+					'Destructure as `WCBadge`.'
+				),
+			],
+		},
+		{
+			code: `
+				import { privateApis } from '@wordpress/components';
+				import { unlock } from '../../lock-unlock';
+
+				const { Badge: HiddenBadge = fallbackBadge } = unlock( privateApis );
+			`,
+			options,
+			errors: [
+				withSuggestions(
+					'`Badge` from `@wordpress/components` must be imported as `WCBadge`.',
+					`
+				import { privateApis } from '@wordpress/components';
+				import { unlock } from '../../lock-unlock';
+
+				const { Badge: WCBadge = fallbackBadge } = unlock( privateApis );
+			`,
+					'Destructure as `WCBadge`.'
+				),
+			],
+		},
+		{
+			code: `
+				import { privateApis } from '@wordpress/components';
+				import { unlock } from '../../lock-unlock';
+
+				const { Badge = fallbackBadge } = unlock( privateApis );
+			`,
+			options,
+			errors: [
+				withSuggestions(
+					'`Badge` from `@wordpress/components` must be imported as `WCBadge`.',
+					`
+				import { privateApis } from '@wordpress/components';
+				import { unlock } from '../../lock-unlock';
+
+				const { Badge: WCBadge = fallbackBadge } = unlock( privateApis );
+			`,
+					'Destructure as `WCBadge`.'
+				),
+			],
+		},
+	],
+} );