@wordpress/eslint-plugin 23.0.1-next.76cff8c98.0 → 24.0.0

package/README.md

@@ -82,8 +82,10 @@ 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. | ✓           |
+| [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-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/*` packagesl                                 | ✓           |
+| [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                                  | ✓           |
 | [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.                                                      |             |

package/configs/custom.js

@@ -6,6 +6,8 @@ module.exports = {
 		'@wordpress/no-unguarded-get-range-at': 'error',
 		'@wordpress/no-global-active-element': 'error',
 		'@wordpress/no-global-get-selection': 'error',
+		'@wordpress/no-setting-ds-tokens': 'error',
+		'@wordpress/no-unknown-ds-tokens': 'error',
 		'@wordpress/no-unsafe-wp-apis': 'error',
 		'@wordpress/no-wp-process-env': 'error',
 	},

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/eslint-plugin",
-	"version": "23.0.1-next.76cff8c98.0",
+	"version": "24.0.0",
 	"description": "ESLint plugin for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -40,8 +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.36.1-next.76cff8c98.0",
-		"@wordpress/prettier-config": "^4.36.1-next.76cff8c98.0",
+		"@wordpress/babel-preset-default": "^8.38.0",
+		"@wordpress/prettier-config": "^4.38.0",
+		"@wordpress/theme": "^0.5.0",
 		"cosmiconfig": "^7.0.0",
 		"eslint-config-prettier": "^8.3.0",
 		"eslint-import-resolver-typescript": "^4.4.4",
@@ -57,6 +58,7 @@
 		"requireindex": "^1.2.0"
 	},
 	"devDependencies": {
+		"@types/eslint": "^8",
 		"@types/estree": "1.0.5"
 	},
 	"peerDependencies": {
@@ -76,5 +78,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "368727f14b858e75179e140967c2d9ec965c8790"
+	"gitHead": "50c4c0f51e4797c217946ce42adfaa5eb026f33f"
 }

package/rules/__tests__/components-no-missing-40px-size-prop.js

@@ -0,0 +1,353 @@
+import { RuleTester } from 'eslint';
+import rule from '../components-no-missing-40px-size-prop';
+
+const ruleTester = new RuleTester( {
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 6,
+		ecmaFeatures: {
+			jsx: true,
+		},
+	},
+} );
+
+ruleTester.run( 'components-no-missing-40px-size-prop', rule, {
+	valid: [
+		// Component with __next40pxDefaultSize (boolean attribute)
+		{
+			code: `
+				import { Button } from '@wordpress/components';
+				<Button __next40pxDefaultSize />
+			`,
+		},
+		// Component with __next40pxDefaultSize={true}
+		{
+			code: `
+				import { InputControl } from '@wordpress/components';
+				<InputControl __next40pxDefaultSize={true} />
+			`,
+		},
+		// Component with non-default size prop
+		{
+			code: `
+				import { Button } from '@wordpress/components';
+				<Button size="small" />
+			`,
+		},
+		// Component with size="compact"
+		{
+			code: `
+				import { SelectControl } from '@wordpress/components';
+				<SelectControl size="compact" />
+			`,
+		},
+		// Component from @wordpress/ui (should not be checked)
+		{
+			code: `
+				import { Button } from '@wordpress/ui';
+				<Button />
+			`,
+		},
+		// Local component (should not be checked)
+		{
+			code: `
+				const Button = () => <button />;
+				<Button />
+			`,
+		},
+		// Component from another package (should not be checked)
+		{
+			code: `
+				import { Button } from 'some-other-package';
+				<Button />
+			`,
+		},
+		// Aliased import with correct prop
+		{
+			code: `
+				import { Button as WPButton } from '@wordpress/components';
+				<WPButton __next40pxDefaultSize />
+			`,
+		},
+		// FormFileUpload with render prop (special case)
+		{
+			code: `
+				import { FormFileUpload } from '@wordpress/components';
+				<FormFileUpload render={({ open }) => <button onClick={open}>Upload</button>} />
+			`,
+		},
+		// FormFileUpload with __next40pxDefaultSize
+		{
+			code: `
+				import { FormFileUpload } from '@wordpress/components';
+				<FormFileUpload __next40pxDefaultSize />
+			`,
+		},
+		// Component with dynamic size prop (assumes it could be non-default)
+		{
+			code: `
+				import { Button } from '@wordpress/components';
+				<Button size={buttonSize} />
+			`,
+		},
+		// Button with variant="link" (doesn't need __next40pxDefaultSize)
+		{
+			code: `
+				import { Button } from '@wordpress/components';
+				<Button variant="link" />
+			`,
+		},
+		// Non-targeted component (should not be checked)
+		{
+			code: `
+				import { Modal } from '@wordpress/components';
+				<Modal />
+			`,
+		},
+		// All targeted components with __next40pxDefaultSize
+		{
+			code: `
+				import {
+					BorderBoxControl,
+					BorderControl,
+					BoxControl,
+					ComboboxControl,
+					CustomSelectControl,
+					FontAppearanceControl,
+					FontFamilyControl,
+					FontSizePicker,
+					FormTokenField,
+					InputControl,
+					LetterSpacingControl,
+					LineHeightControl,
+					NumberControl,
+					RangeControl,
+					SelectControl,
+					TextControl,
+					ToggleGroupControl,
+					UnitControl,
+				} from '@wordpress/components';
+				<>
+					<BorderBoxControl __next40pxDefaultSize />
+					<BorderControl __next40pxDefaultSize />
+					<BoxControl __next40pxDefaultSize />
+					<ComboboxControl __next40pxDefaultSize />
+					<CustomSelectControl __next40pxDefaultSize />
+					<FontAppearanceControl __next40pxDefaultSize />
+					<FontFamilyControl __next40pxDefaultSize />
+					<FontSizePicker __next40pxDefaultSize />
+					<FormTokenField __next40pxDefaultSize />
+					<InputControl __next40pxDefaultSize />
+					<LetterSpacingControl __next40pxDefaultSize />
+					<LineHeightControl __next40pxDefaultSize />
+					<NumberControl __next40pxDefaultSize />
+					<RangeControl __next40pxDefaultSize />
+					<SelectControl __next40pxDefaultSize />
+					<TextControl __next40pxDefaultSize />
+					<ToggleGroupControl __next40pxDefaultSize />
+					<UnitControl __next40pxDefaultSize />
+				</>
+			`,
+		},
+	],
+	invalid: [
+		// Button without __next40pxDefaultSize
+		{
+			code: `
+				import { Button } from '@wordpress/components';
+				<Button />
+			`,
+			errors: [
+				{
+					messageId: 'missingProp',
+					data: { component: 'Button' },
+				},
+			],
+		},
+		// InputControl without __next40pxDefaultSize
+		{
+			code: `
+				import { InputControl } from '@wordpress/components';
+				<InputControl value={value} onChange={onChange} />
+			`,
+			errors: [
+				{
+					messageId: 'missingProp',
+					data: { component: 'InputControl' },
+				},
+			],
+		},
+		// Component with __next40pxDefaultSize={false}
+		{
+			code: `
+				import { SelectControl } from '@wordpress/components';
+				<SelectControl __next40pxDefaultSize={false} />
+			`,
+			errors: [
+				{
+					messageId: 'missingProp',
+					data: { component: 'SelectControl' },
+				},
+			],
+		},
+		// Component with size="default" (should still require __next40pxDefaultSize)
+		{
+			code: `
+				import { Button } from '@wordpress/components';
+				<Button size="default" />
+			`,
+			errors: [
+				{
+					messageId: 'missingProp',
+					data: { component: 'Button' },
+				},
+			],
+		},
+		// Aliased import without __next40pxDefaultSize
+		{
+			code: `
+				import { TextControl as MyTextControl } from '@wordpress/components';
+				<MyTextControl />
+			`,
+			errors: [
+				{
+					messageId: 'missingProp',
+					data: { component: 'TextControl' },
+				},
+			],
+		},
+		// FormFileUpload without __next40pxDefaultSize or render
+		{
+			code: `
+				import { FormFileUpload } from '@wordpress/components';
+				<FormFileUpload onChange={handleChange} />
+			`,
+			errors: [
+				{
+					messageId: 'missingPropFormFileUpload',
+				},
+			],
+		},
+		// Multiple components, some invalid
+		{
+			code: `
+				import { Button, InputControl } from '@wordpress/components';
+				<>
+					<Button __next40pxDefaultSize />
+					<InputControl />
+				</>
+			`,
+			errors: [
+				{
+					messageId: 'missingProp',
+					data: { component: 'InputControl' },
+				},
+			],
+		},
+		// Multiple invalid components
+		{
+			code: `
+				import { Button, SelectControl } from '@wordpress/components';
+				<>
+					<Button />
+					<SelectControl />
+				</>
+			`,
+			errors: [
+				{
+					messageId: 'missingProp',
+					data: { component: 'Button' },
+				},
+				{
+					messageId: 'missingProp',
+					data: { component: 'SelectControl' },
+				},
+			],
+		},
+		// Relative import with checkLocalImports enabled
+		{
+			code: `
+				import { Button } from '../button';
+				<Button />
+			`,
+			options: [ { checkLocalImports: true } ],
+			errors: [
+				{
+					messageId: 'missingProp',
+					data: { component: 'Button' },
+				},
+			],
+		},
+		// Default import from input-control path with checkLocalImports enabled
+		{
+			code: `
+				import InputControl from '../input-control';
+				<InputControl />
+			`,
+			options: [ { checkLocalImports: true } ],
+			errors: [
+				{
+					messageId: 'missingProp',
+					data: { component: 'InputControl' },
+				},
+			],
+		},
+	],
+} );
+
+// Additional tests for checkLocalImports option
+ruleTester.run(
+	'components-no-missing-40px-size-prop (checkLocalImports)',
+	rule,
+	{
+		valid: [
+			// Relative import with correct props
+			{
+				code: `
+				import { Button } from '../button';
+				<Button __next40pxDefaultSize />
+			`,
+				options: [ { checkLocalImports: true } ],
+			},
+			// Default import with correct props
+			{
+				code: `
+				import InputControl from './input-control';
+				<InputControl __next40pxDefaultSize />
+			`,
+				options: [ { checkLocalImports: true } ],
+			},
+			// Relative import with non-default size
+			{
+				code: `
+				import { Button } from '../button';
+				<Button size="small" />
+			`,
+				options: [ { checkLocalImports: true } ],
+			},
+			// Relative import without checkLocalImports (should not be checked)
+			{
+				code: `
+				import { Button } from '../button';
+				<Button />
+			`,
+			},
+			// Default import without checkLocalImports (should not be checked)
+			{
+				code: `
+				import InputControl from '../input-control';
+				<InputControl />
+			`,
+			},
+			// FormFileUpload relative import with render prop
+			{
+				code: `
+				import { FormFileUpload } from '../form-file-upload';
+				<FormFileUpload render={({ open }) => <button onClick={open}>Upload</button>} />
+			`,
+				options: [ { checkLocalImports: true } ],
+			},
+		],
+		invalid: [],
+	}
+);

package/rules/__tests__/components-no-unsafe-button-disabled.js

@@ -0,0 +1,235 @@
+import { RuleTester } from 'eslint';
+import rule from '../components-no-unsafe-button-disabled';
+
+const ruleTester = new RuleTester( {
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 6,
+		ecmaFeatures: {
+			jsx: true,
+		},
+	},
+} );
+
+ruleTester.run( 'components-no-unsafe-button-disabled', rule, {
+	valid: [
+		// Button with both disabled and accessibleWhenDisabled
+		{
+			code: `
+				import { Button } from '@wordpress/components';
+				<Button disabled accessibleWhenDisabled />
+			`,
+		},
+		// Button with accessibleWhenDisabled={true}
+		{
+			code: `
+				import { Button } from '@wordpress/components';
+				<Button disabled accessibleWhenDisabled={true} />
+			`,
+		},
+		// Button with accessibleWhenDisabled={false}
+		{
+			code: `
+						import { Button } from '@wordpress/components';
+						<Button disabled accessibleWhenDisabled={false} />
+					`,
+		},
+		// Button with accessibleWhenDisabled={someVar}
+		{
+			code: `
+				import { Button } from '@wordpress/components';
+				<Button disabled accessibleWhenDisabled={someVar} />
+			`,
+		},
+		// Button with accessibleWhenDisabled={false} should error (handled in invalid)
+		// Button with disabled={false} should not require accessibleWhenDisabled
+		{
+			code: `
+				import { Button } from '@wordpress/components';
+				<Button disabled={false} />
+			`,
+		},
+		// Button with disabled={someVar} and accessibleWhenDisabled={someVar}
+		{
+			code: `
+						import { Button } from '@wordpress/components';
+						<Button disabled={isDisabled} accessibleWhenDisabled={someVar} />
+					`,
+		},
+		// Button without disabled prop
+		{
+			code: `
+				import { Button } from '@wordpress/components';
+				<Button onClick={handleClick} />
+			`,
+		},
+		// Button from @wordpress/ui (should not be checked)
+		{
+			code: `
+				import { Button } from '@wordpress/ui';
+				<Button disabled />
+			`,
+		},
+		// Local Button component (should not be checked)
+		{
+			code: `
+				const Button = () => <button />;
+				<Button disabled />
+			`,
+		},
+		// Button from another package (should not be checked)
+		{
+			code: `
+				import { Button } from 'some-other-package';
+				<Button disabled />
+			`,
+		},
+		// Aliased import with correct props
+		{
+			code: `
+				import { Button as WPButton } from '@wordpress/components';
+				<WPButton disabled accessibleWhenDisabled />
+			`,
+		},
+		// Non-Button component with disabled (should not be checked)
+		{
+			code: `
+				import { TextControl } from '@wordpress/components';
+				<TextControl disabled />
+			`,
+		},
+	],
+	invalid: [
+		// Button with disabled but no accessibleWhenDisabled
+		{
+			code: `
+				import { Button } from '@wordpress/components';
+				<Button disabled />
+			`,
+			errors: [
+				{
+					messageId: 'missingAccessibleWhenDisabled',
+				},
+			],
+		},
+		// Button with disabled={someVar} but no accessibleWhenDisabled
+		{
+			code: `
+				import { Button } from '@wordpress/components';
+				<Button disabled={isDisabled} />
+			`,
+			errors: [
+				{
+					messageId: 'missingAccessibleWhenDisabled',
+				},
+			],
+		},
+		// Button with disabled={true} but no accessibleWhenDisabled
+		{
+			code: `
+				import { Button } from '@wordpress/components';
+				<Button disabled={true} />
+			`,
+			errors: [
+				{
+					messageId: 'missingAccessibleWhenDisabled',
+				},
+			],
+		},
+		// Aliased import without accessibleWhenDisabled
+		{
+			code: `
+				import { Button as MyButton } from '@wordpress/components';
+				<MyButton disabled />
+			`,
+			errors: [
+				{
+					messageId: 'missingAccessibleWhenDisabled',
+				},
+			],
+		},
+		// Multiple Buttons, one invalid
+		{
+			code: `
+				import { Button } from '@wordpress/components';
+				<>
+					<Button disabled accessibleWhenDisabled />
+					<Button disabled />
+				</>
+			`,
+			errors: [
+				{
+					messageId: 'missingAccessibleWhenDisabled',
+				},
+			],
+		},
+	],
+} );
+
+// Additional tests for checkLocalImports option
+ruleTester.run(
+	'components-no-unsafe-button-disabled (checkLocalImports)',
+	rule,
+	{
+		valid: [
+			// Relative import with correct props
+			{
+				code: `
+				import { Button } from '../button';
+				<Button disabled accessibleWhenDisabled />
+			`,
+				options: [ { checkLocalImports: true } ],
+			},
+			// Default import with correct props
+			{
+				code: `
+				import Button from './button';
+				<Button disabled accessibleWhenDisabled />
+			`,
+				options: [ { checkLocalImports: true } ],
+			},
+			// Relative import without checkLocalImports (should not be checked)
+			{
+				code: `
+				import { Button } from '../button';
+				<Button disabled />
+			`,
+			},
+			// Default import without checkLocalImports (should not be checked)
+			{
+				code: `
+				import Button from '../button';
+				<Button disabled />
+			`,
+			},
+		],
+		invalid: [
+			// Relative import with checkLocalImports enabled
+			{
+				code: `
+				import { Button } from '../button';
+				<Button disabled />
+			`,
+				options: [ { checkLocalImports: true } ],
+				errors: [
+					{
+						messageId: 'missingAccessibleWhenDisabled',
+					},
+				],
+			},
+			// Default import from button path with checkLocalImports enabled
+			{
+				code: `
+				import Button from '../button';
+				<Button disabled />
+			`,
+				options: [ { checkLocalImports: true } ],
+				errors: [
+					{
+						messageId: 'missingAccessibleWhenDisabled',
+					},
+				],
+			},
+		],
+	}
+);

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

@@ -0,0 +1,46 @@
+import { RuleTester } from 'eslint';
+import rule from '../no-setting-ds-tokens';
+
+const ruleTester = new RuleTester( {
+	parserOptions: {
+		ecmaVersion: 6,
+		ecmaFeatures: {
+			jsx: true,
+		},
+	},
+} );
+
+ruleTester.run( 'no-setting-ds-tokens', rule, {
+	valid: [
+		{
+			code: `<div style={ { '--my-custom-prop': 'value' } } />`,
+		},
+		{
+			code: `<div style={ { color: 'var(--wpds-color-fg-content-neutral)' } } />`,
+		},
+		{
+			code: `<div style={ { '--other-prefix-token': '10px' } } />`,
+		},
+		{
+			code: `<div style={ { margin: '10px' } } />`,
+		},
+	],
+	invalid: [
+		{
+			code: `<div style={ { '--wpds-color-fg-content-neutral': 'red' } } />`,
+			errors: [
+				{
+					messageId: 'disallowedSet',
+				},
+			],
+		},
+		{
+			code: `<div style={ { '--wpds-font-size-md': '10px', color: 'blue' } } />`,
+			errors: [
+				{
+					messageId: 'disallowedSet',
+				},
+			],
+		},
+	],
+} );

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

@@ -0,0 +1,60 @@
+import { RuleTester } from 'eslint';
+import rule from '../no-unknown-ds-tokens';
+
+const ruleTester = new RuleTester( {
+	parserOptions: {
+		ecmaVersion: 6,
+		ecmaFeatures: {
+			jsx: true,
+		},
+	},
+} );
+
+ruleTester.run( 'no-unknown-ds-tokens', rule, {
+	valid: [
+		{
+			code: `<div style={ { color: 'var(--my-custom-prop)' } } />`,
+		},
+		{
+			code: `<div style={ { color: 'blue' } } />`,
+		},
+		{
+			code: `<div style={ { color: 'var(--other-prefix-token)' } } />`,
+		},
+		{
+			code: `<div style={ { color: 'var(--wpds-color-fg-content-neutral)' } } />`,
+		},
+		{
+			code: '<div style={ { color: `var(--wpds-color-fg-content-neutral)` } } />',
+		},
+	],
+	invalid: [
+		{
+			code: `<div style={ { color: 'var(--wpds-nonexistent-token)' } } />`,
+			errors: [
+				{
+					messageId: 'onlyKnownTokens',
+				},
+			],
+		},
+		{
+			code: `<div style={ { color: 'var(--wpds-fake-color, var(--wpds-also-fake))' } } />`,
+			errors: [
+				{
+					messageId: 'onlyKnownTokens',
+					data: {
+						tokenNames: "'--wpds-fake-color', '--wpds-also-fake'",
+					},
+				},
+			],
+		},
+		{
+			code: '<div style={ { color: `var(--wpds-nonexistent)` } } />',
+			errors: [
+				{
+					messageId: 'onlyKnownTokens',
+				},
+			],
+		},
+	],
+} );

package/rules/components-no-missing-40px-size-prop.js

@@ -0,0 +1,327 @@
+const { hasTruthyJsxAttribute } = require( '../utils' );
+
+/**
+ * Enforces that specific components from @wordpress/components include the
+ * `__next40pxDefaultSize` prop.
+ *
+ * @type {import('eslint').Rule.RuleModule}
+ */
+
+/**
+ * Components that require the __next40pxDefaultSize prop.
+ * These can be exempted if they have a non-default `size` prop.
+ */
+const COMPONENTS_REQUIRING_40PX = new Set( [
+	'BorderBoxControl',
+	'BorderControl',
+	'BoxControl',
+	'Button',
+	'ClipboardButton',
+	'ComboboxControl',
+	'CustomSelectControl',
+	'FontAppearanceControl',
+	'FontFamilyControl',
+	'FontSizePicker',
+	'FormTokenField',
+	'IconButton',
+	'InputControl',
+	'LetterSpacingControl',
+	'LineHeightControl',
+	'NumberControl',
+	'Radio',
+	'RangeControl',
+	'SelectControl',
+	'TextControl',
+	'TreeSelect',
+	'ToggleGroupControl',
+	'UnitControl',
+] );
+
+/**
+ * Components that can use the `render` prop as an alternative to __next40pxDefaultSize.
+ */
+const COMPONENTS_WITH_RENDER_EXEMPTION = new Set( [ 'FormFileUpload' ] );
+
+/**
+ * All tracked component names for path-based detection.
+ */
+const ALL_TRACKED_COMPONENTS = new Set( [
+	...COMPONENTS_REQUIRING_40PX,
+	...COMPONENTS_WITH_RENDER_EXEMPTION,
+] );
+
+module.exports = {
+	meta: {
+		type: 'problem',
+		schema: [
+			{
+				type: 'object',
+				properties: {
+					checkLocalImports: {
+						type: 'boolean',
+						description:
+							'When true, also checks components imported from relative paths (for use inside @wordpress/components package).',
+					},
+				},
+				additionalProperties: false,
+			},
+		],
+		messages: {
+			missingProp:
+				'{{ component }} should have the `__next40pxDefaultSize` prop when using the default size.',
+			missingPropFormFileUpload:
+				'FormFileUpload should have the `__next40pxDefaultSize` prop to opt-in to the new default size.',
+		},
+	},
+	create( context ) {
+		const checkLocalImports =
+			context.options[ 0 ]?.checkLocalImports ?? false;
+
+		// Track local names of components imported from @wordpress/components
+		// Map: localName -> importedName
+		const trackedImports = new Map();
+
+		/**
+		 * Check if the import source should be tracked.
+		 *
+		 * @param {string} source - The import source path
+		 * @return {boolean} Whether to track imports from this source
+		 */
+		function shouldTrackImportSource( source ) {
+			if ( source === '@wordpress/components' ) {
+				return true;
+			}
+
+			// When checkLocalImports is enabled, also track relative imports
+			if ( checkLocalImports ) {
+				return source.startsWith( '.' ) || source.startsWith( '/' );
+			}
+
+			return false;
+		}
+
+		/**
+		 * Try to infer component name from import path.
+		 * e.g., '../button' -> 'Button', '../input-control' -> 'InputControl'
+		 *
+		 * @param {string} source - The import source path
+		 * @return {string|null} The inferred component name or null
+		 */
+		function inferComponentNameFromPath( source ) {
+			// Get the last segment of the path
+			const lastSegment = source.split( '/' ).pop();
+			if ( ! lastSegment ) {
+				return null;
+			}
+
+			// Convert kebab-case to PascalCase
+			const pascalCase = lastSegment
+				.split( '-' )
+				.map(
+					( part ) => part.charAt( 0 ).toUpperCase() + part.slice( 1 )
+				)
+				.join( '' );
+
+			// Check if it's one of our tracked components
+			if ( ALL_TRACKED_COMPONENTS.has( pascalCase ) ) {
+				return pascalCase;
+			}
+
+			return null;
+		}
+
+		/**
+		 * Check if the `size` prop has a non-default value.
+		 *
+		 * @param {Array} attributes - JSX attributes array
+		 * @return {boolean} Whether size has a non-default value
+		 */
+		function hasNonDefaultSize( attributes ) {
+			const sizeAttr = attributes.find(
+				( a ) =>
+					a.type === 'JSXAttribute' &&
+					a.name &&
+					a.name.name === 'size'
+			);
+
+			if ( ! sizeAttr ) {
+				return false;
+			}
+
+			// String value like `size="small"` or `size="compact"`
+			if (
+				sizeAttr.value &&
+				sizeAttr.value.type === 'Literal' &&
+				typeof sizeAttr.value.value === 'string'
+			) {
+				return sizeAttr.value.value !== 'default';
+			}
+
+			// Expression - could be non-default, so don't report
+			if (
+				sizeAttr.value &&
+				sizeAttr.value.type === 'JSXExpressionContainer'
+			) {
+				return true;
+			}
+
+			return false;
+		}
+
+		/**
+		 * Check if the `render` prop exists.
+		 *
+		 * @param {Array} attributes - JSX attributes array
+		 * @return {boolean} Whether render prop exists
+		 */
+		function hasRenderProp( attributes ) {
+			return attributes.some(
+				( a ) =>
+					a.type === 'JSXAttribute' &&
+					a.name &&
+					a.name.name === 'render'
+			);
+		}
+
+		/**
+		 * Check if the `variant` prop has the value "link".
+		 * Button with variant="link" doesn't need __next40pxDefaultSize.
+		 *
+		 * @param {Array} attributes - JSX attributes array
+		 * @return {boolean} Whether variant is "link"
+		 */
+		function hasLinkVariant( attributes ) {
+			const variantAttr = attributes.find(
+				( a ) =>
+					a.type === 'JSXAttribute' &&
+					a.name &&
+					a.name.name === 'variant'
+			);
+
+			if ( ! variantAttr ) {
+				return false;
+			}
+
+			// String value like `variant="link"`
+			if (
+				variantAttr.value &&
+				variantAttr.value.type === 'Literal' &&
+				variantAttr.value.value === 'link'
+			) {
+				return true;
+			}
+
+			return false;
+		}
+
+		return {
+			ImportDeclaration( node ) {
+				const source = node.source.value;
+
+				if ( ! shouldTrackImportSource( source ) ) {
+					return;
+				}
+
+				// Handle named imports
+				node.specifiers.forEach( ( specifier ) => {
+					if ( specifier.type !== 'ImportSpecifier' ) {
+						return;
+					}
+
+					const importedName = specifier.imported.name;
+					const localName = specifier.local.name;
+
+					// Track components that require the prop
+					if (
+						COMPONENTS_REQUIRING_40PX.has( importedName ) ||
+						COMPONENTS_WITH_RENDER_EXEMPTION.has( importedName )
+					) {
+						trackedImports.set( localName, importedName );
+					}
+				} );
+
+				// Handle default imports when checking local imports
+				// e.g., import InputControl from '../input-control'
+				if ( checkLocalImports ) {
+					node.specifiers.forEach( ( specifier ) => {
+						if ( specifier.type === 'ImportDefaultSpecifier' ) {
+							const localName = specifier.local.name;
+							const inferredName =
+								inferComponentNameFromPath( source );
+							if ( inferredName ) {
+								trackedImports.set( localName, inferredName );
+								return;
+							}
+
+							// Support patterns like `import ClipboardButton from '.';`
+							// (common in component folder examples/tests).
+							// If the local name matches a tracked component, treat it as such.
+							if ( ALL_TRACKED_COMPONENTS.has( localName ) ) {
+								trackedImports.set( localName, localName );
+							}
+						}
+					} );
+				}
+			},
+
+			JSXOpeningElement( node ) {
+				// Only check simple JSX element names (not member expressions)
+				if ( node.name.type !== 'JSXIdentifier' ) {
+					return;
+				}
+
+				const elementName = node.name.name;
+				const importedName = trackedImports.get( elementName );
+
+				// Only check if this is a tracked component from @wordpress/components
+				if ( ! importedName ) {
+					return;
+				}
+
+				const attributes = node.attributes;
+
+				// Check if __next40pxDefaultSize has a truthy value
+				if (
+					hasTruthyJsxAttribute( attributes, '__next40pxDefaultSize' )
+				) {
+					return;
+				}
+
+				// Handle FormFileUpload special case
+				if ( COMPONENTS_WITH_RENDER_EXEMPTION.has( importedName ) ) {
+					// FormFileUpload is valid if it has a `render` prop
+					if ( hasRenderProp( attributes ) ) {
+						return;
+					}
+
+					context.report( {
+						node,
+						messageId: 'missingPropFormFileUpload',
+					} );
+					return;
+				}
+
+				// For other components, check if size prop has a non-default value
+				if ( hasNonDefaultSize( attributes ) ) {
+					return;
+				}
+
+				// Button with variant="link" doesn't need __next40pxDefaultSize
+				if (
+					importedName === 'Button' &&
+					hasLinkVariant( attributes )
+				) {
+					return;
+				}
+
+				context.report( {
+					node,
+					messageId: 'missingProp',
+					data: {
+						component: importedName,
+					},
+				} );
+			},
+		};
+	},
+};

package/rules/components-no-unsafe-button-disabled.js

@@ -0,0 +1,126 @@
+const { hasTruthyJsxAttribute } = require( '../utils' );
+
+/**
+ * Enforces that Button from @wordpress/components includes `accessibleWhenDisabled`
+ * when `disabled` is set.
+ *
+ * @type {import('eslint').Rule.RuleModule}
+ */
+module.exports = {
+	meta: {
+		type: 'problem',
+		schema: [
+			{
+				type: 'object',
+				properties: {
+					checkLocalImports: {
+						type: 'boolean',
+						description:
+							'When true, also checks components imported from relative paths (for use inside @wordpress/components package).',
+					},
+				},
+				additionalProperties: false,
+			},
+		],
+		messages: {
+			missingAccessibleWhenDisabled:
+				'`disabled` used without the `accessibleWhenDisabled` prop. Disabling a control without maintaining focusability can cause accessibility issues, by hiding their presence from screen reader users, or preventing focus from returning to a trigger element. (Ignore this error if you truly mean to disable.)',
+		},
+	},
+	create( context ) {
+		const checkLocalImports =
+			context.options[ 0 ]?.checkLocalImports ?? false;
+
+		// Track local names of Button imported from @wordpress/components
+		const wpComponentsButtons = new Set();
+
+		/**
+		 * Check if the import source should be tracked.
+		 *
+		 * @param {string} source - The import source path
+		 * @return {boolean} Whether to track imports from this source
+		 */
+		function shouldTrackImportSource( source ) {
+			if ( source === '@wordpress/components' ) {
+				return true;
+			}
+
+			// When checkLocalImports is enabled, also track relative imports
+			if ( checkLocalImports ) {
+				return source.startsWith( '.' ) || source.startsWith( '/' );
+			}
+
+			return false;
+		}
+
+		return {
+			ImportDeclaration( node ) {
+				if ( ! shouldTrackImportSource( node.source.value ) ) {
+					return;
+				}
+
+				node.specifiers.forEach( ( specifier ) => {
+					if ( specifier.type !== 'ImportSpecifier' ) {
+						return;
+					}
+
+					const importedName = specifier.imported.name;
+					if ( importedName === 'Button' ) {
+						// Track the local name (handles aliased imports)
+						wpComponentsButtons.add( specifier.local.name );
+					}
+				} );
+
+				// Also handle default imports when checking local imports
+				// e.g., import Button from './button'
+				if ( checkLocalImports ) {
+					node.specifiers.forEach( ( specifier ) => {
+						if ( specifier.type === 'ImportDefaultSpecifier' ) {
+							const localName = specifier.local.name;
+							// Check if the import path suggests it's a Button component
+							const source = node.source.value;
+							if (
+								source.endsWith( '/button' ) ||
+								source.endsWith( '/Button' )
+							) {
+								wpComponentsButtons.add( localName );
+							}
+						}
+					} );
+				}
+			},
+
+			JSXOpeningElement( node ) {
+				// Only check simple JSX element names (not member expressions)
+				if ( node.name.type !== 'JSXIdentifier' ) {
+					return;
+				}
+
+				const elementName = node.name.name;
+
+				// Only check if this is a Button from @wordpress/components
+				if ( ! wpComponentsButtons.has( elementName ) ) {
+					return;
+				}
+
+				if ( ! hasTruthyJsxAttribute( node.attributes, 'disabled' ) ) {
+					return;
+				}
+
+				const hasAccessibleWhenDisabled = node.attributes.some(
+					( attr ) =>
+						attr.type === 'JSXAttribute' &&
+						attr.name &&
+						attr.name.name === 'accessibleWhenDisabled'
+				);
+
+				if ( ! hasAccessibleWhenDisabled ) {
+					context.report( {
+						node,
+						messageId: 'missingAccessibleWhenDisabled',
+					} );
+				}
+			},
+		};
+	},
+};

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

@@ -0,0 +1,27 @@
+module.exports = /** @type {import('eslint').Rule.RuleModule} */ ( {
+	meta: {
+		type: 'problem',
+		docs: {
+			description:
+				'Disallow setting any CSS custom property beginning with --wpds- in inline styles',
+		},
+		schema: [],
+		messages: {
+			disallowedSet:
+				'Do not set CSS custom properties using the Design System tokens namespace (i.e. beginning with --wpds-*).',
+		},
+	},
+	create( context ) {
+		return {
+			/** @param {import('estree').Property} node */
+			'JSXAttribute[name.name="style"] ObjectExpression > Property[key.value=/^--wpds-/]'(
+				node
+			) {
+				context.report( {
+					node: node.key,
+					messageId: 'disallowedSet',
+				} );
+			},
+		};
+	},
+} );

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

@@ -0,0 +1,101 @@
+const tokenListModule = require( '@wordpress/theme/design-tokens.js' );
+const tokenList = tokenListModule.default || tokenListModule;
+
+const DS_TOKEN_PREFIX = 'wpds-';
+
+/**
+ * Extracts all unique CSS custom properties (variables) from a given CSS value string,
+ * including those in fallback positions, optionally filtering by a specific prefix.
+ *
+ * @param {string} value       - The CSS value string to search for variables.
+ * @param {string} [prefix=''] - Optional prefix to filter variables (e.g., 'wpds-').
+ * @return {Set<string>} A Set of unique matched CSS variable names (e.g., Set { '--wpds-token' }).
+ *
+ * @example
+ * extractCSSVariables(
+ *   'border: 1px solid var(--wpds-border-color, var(--wpds-border-fallback)); ' +
+ *   'color: var(--wpds-color-fg, black); ' +
+ *   'background: var(--unrelated-bg);',
+ *   'wpds'
+ * );
+ * // → Set { '--wpds-border-color', '--wpds-border-fallback', '--wpds-color-fg' }
+ */
+function extractCSSVariables( value, prefix = '' ) {
+	const regex = /--[\w-]+/g;
+	const variables = new Set();
+
+	let match;
+	while ( ( match = regex.exec( value ) ) !== null ) {
+		const variableName = match[ 0 ];
+		if ( variableName.startsWith( `--${ prefix }` ) ) {
+			variables.add( variableName );
+		}
+	}
+
+	return variables;
+}
+
+const knownTokens = new Set( tokenList );
+const wpdsTokensRegex = new RegExp( `[^\\w]--${ DS_TOKEN_PREFIX }`, 'i' );
+
+module.exports = /** @type {import('eslint').Rule.RuleModule} */ ( {
+	meta: {
+		type: 'problem',
+		docs: {
+			description: 'Prevent use of non-existing --wpds-* variables',
+		},
+		schema: [],
+		messages: {
+			onlyKnownTokens:
+				'The following CSS variables are not valid Design System tokens: {{ tokenNames }}',
+		},
+	},
+	create( context ) {
+		const disallowedTokensAST = `JSXAttribute[name.name="style"] :matches(Literal[value=${ wpdsTokensRegex }], TemplateLiteral TemplateElement[value.raw=${ wpdsTokensRegex }])`;
+		return {
+			/** @param {import('estree').Literal | import('estree').TemplateElement} node */
+			[ disallowedTokensAST ]( node ) {
+				let computedValue;
+
+				if ( ! node.value ) {
+					return;
+				}
+
+				if ( typeof node.value === 'string' ) {
+					// Get the node's value when it's a "string"
+					computedValue = node.value;
+				} else if (
+					typeof node.value === 'object' &&
+					'raw' in node.value
+				) {
+					// Get the node's value when it's a `template literal`
+					computedValue = node.value.cooked ?? node.value.raw;
+				}
+
+				if ( ! computedValue ) {
+					return;
+				}
+
+				const usedTokens = extractCSSVariables(
+					computedValue,
+					DS_TOKEN_PREFIX
+				);
+				const unknownTokens = [ ...usedTokens ].filter(
+					( token ) => ! knownTokens.has( token )
+				);
+
+				if ( unknownTokens.length > 0 ) {
+					context.report( {
+						node,
+						messageId: 'onlyKnownTokens',
+						data: {
+							tokenNames: unknownTokens
+								.map( ( token ) => `'${ token }'` )
+								.join( ', ' ),
+						},
+					} );
+				}
+			},
+		};
+	},
+} );

package/utils/has-truthy-jsx-attribute.js

@@ -0,0 +1,50 @@
+/**
+ * Check if a JSX/React attribute exists and has a truthy value.
+ *
+ * This utility analyzes JSX attribute nodes from an ESLint AST to determine
+ * if a specific attribute is present with a truthy value.
+ *
+ * Handles the following patterns:
+ * - Boolean shorthand: `<Component prop />` → truthy
+ * - Explicit true: `<Component prop={true} />` → truthy
+ * - Explicit false: `<Component prop={false} />` → NOT truthy
+ * - String values: `<Component prop="value" />` → truthy (if non-empty)
+ * - Dynamic expressions: `<Component prop={someVar} />` → assumed truthy
+ *
+ * @param {Array}  attributes - Array of JSX attribute nodes from the ESLint AST
+ * @param {string} attrName   - The attribute name to check
+ * @return {boolean} Whether the attribute exists with a truthy value
+ */
+function hasTruthyJsxAttribute( attributes, attrName ) {
+	const attr = attributes.find(
+		( a ) => a.type === 'JSXAttribute' && a.name && a.name.name === attrName
+	);
+
+	if ( ! attr ) {
+		return false;
+	}
+
+	// Boolean attribute without value (e.g., `<Button disabled />`)
+	if ( attr.value === null ) {
+		return true;
+	}
+
+	// Expression like `prop={true}` or `prop={false}`
+	if (
+		attr.value.type === 'JSXExpressionContainer' &&
+		attr.value.expression.type === 'Literal'
+	) {
+		return attr.value.expression.value !== false;
+	}
+
+	// String value - truthy if not empty
+	if ( attr.value.type === 'Literal' ) {
+		return Boolean( attr.value.value );
+	}
+
+	// For any other expression (variables, function calls, etc.),
+	// assume it could be truthy since we can't statically analyze it
+	return true;
+}
+
+module.exports = { hasTruthyJsxAttribute };

package/utils/index.js

@@ -9,6 +9,7 @@ const {
 const { getTranslateFunctionArgs } = require( './get-translate-function-args' );
 const { getTextContentFromNode } = require( './get-text-content-from-node' );
 const { getTranslateFunctionName } = require( './get-translate-function-name' );
+const { hasTruthyJsxAttribute } = require( './has-truthy-jsx-attribute' );
 const isPackageInstalled = require( './is-package-installed' );
 
 module.exports = {
@@ -18,5 +19,6 @@ module.exports = {
 	getTranslateFunctionArgs,
 	getTextContentFromNode,
 	getTranslateFunctionName,
+	hasTruthyJsxAttribute,
 	isPackageInstalled,
 };