Skip to content

ESLint: Allow non-module stylesheet imports in unit tests #84019

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ciampo merged 1 commit into from
Oct 2, 2026
Merged

ESLint: Allow non-module stylesheet imports in unit tests #84019

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions packages/block-library/src/cover/test/edit.browser.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,7 @@ import {
} from '@wordpress/integration-tests/helpers/integration-test-editor';
import { registerCoreBlocks } from '@wordpress/block-library';
// Keep the matrix popover above the block toolbar, as in the editor.
// eslint-disable-next-line @wordpress/no-non-module-stylesheet-imports -- Browser fixtures need the styles WordPress normally enqueues.
import '../../../../block-editor/src/components/block-popover/style.scss';
// eslint-disable-next-line @wordpress/no-non-module-stylesheet-imports -- Browser fixtures need the styles WordPress normally enqueues.
import '../../../../components/src/popover/style.scss';
const defaultSettings = {
__experimentalFeatures: {
Expand Down
1 change: 0 additions & 1 deletion packages/components/src/card/test/index.browser.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { describe, expect, it } from 'vitest';
import { screen } from '@testing-library/react';
import { render } from 'vitest-browser-react';
// Load the tokens that the production build also supplies as fallbacks.
// eslint-disable-next-line @wordpress/no-non-module-stylesheet-imports
import '../../../../theme/prebuilt/css/design-tokens.css';
import {
Card,
Expand Down
1 change: 0 additions & 1 deletion packages/components/src/confirm-dialog/test/index.browser.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import Modal from '../../modal';
import { ConfirmDialog } from '..';
// The z-index contract spans ConfirmDialog's CSS Module and Modal's global
// overlay styles, so load the same global stylesheet WordPress enqueues.
// eslint-disable-next-line @wordpress/no-non-module-stylesheet-imports
import '../../modal/style.scss';

const noop = () => {};
Expand Down
4 changes: 0 additions & 4 deletions packages/components/src/custom-gradient-picker/test/index.browser.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,9 @@ import { userEvent } from 'vitest/browser';
import { screen, waitFor } from '@testing-library/react';
import { render } from 'vitest-browser-react';
import { useState } from '@wordpress/element';
// eslint-disable-next-line @wordpress/no-non-module-stylesheet-imports
import '../style.scss';
// eslint-disable-next-line @wordpress/no-non-module-stylesheet-imports
import '../../button/style.scss';
// eslint-disable-next-line @wordpress/no-non-module-stylesheet-imports
import '../../dropdown/style.scss';
// eslint-disable-next-line @wordpress/no-non-module-stylesheet-imports
import '../../popover/style.scss';
import CustomGradientPicker from '../';
import CustomGradientBar from '../gradient-bar';
Expand Down
1 change: 0 additions & 1 deletion packages/components/src/menu/test/scroll-lock.browser.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { useState } from '@wordpress/element';
import { Menu } from '..';
import Modal from '../../modal';
// Load the body scroll-lock rule that WordPress enqueues for Modal.
// eslint-disable-next-line @wordpress/no-non-module-stylesheet-imports
import '../../modal/style.scss';

const MenuWithModal = () => {
Expand Down
2 changes: 0 additions & 2 deletions packages/components/src/palette-edit/test/spacing.browser.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,7 @@ import { userEvent } from 'vitest/browser';
import { screen } from '@testing-library/react';
import { render } from 'vitest-browser-react';
// Load the same tokens and button styles used by consumers.
// eslint-disable-next-line @wordpress/no-non-module-stylesheet-imports
import '../../../../theme/prebuilt/css/design-tokens.css';
// eslint-disable-next-line @wordpress/no-non-module-stylesheet-imports
import '../../button/style.scss';
import PaletteEdit from '..';

Expand Down
1 change: 0 additions & 1 deletion packages/components/src/tools-panel/test/index.browser.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { render } from 'vitest-browser-react';
import { ContextSystemProvider } from '../../context';
import { ToolsPanel, ToolsPanelItem } from '..';
// The cascade contract includes Button's global icon-button defaults.
// eslint-disable-next-line @wordpress/no-non-module-stylesheet-imports
import '../../button/style.scss';

const defaultProps = {
Expand Down
1 change: 0 additions & 1 deletion packages/media-editor/src/image-editor/react/components/test/cropper.browser.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import type { CropperController } from '../../hooks/use-cropper-reducer';
import { DEFAULT_STATE } from '../../../core/constants';
import { getSourceRegion } from '../../../core/source-region';
// Browser Mode needs the package's real styles for layout and transitions.
// eslint-disable-next-line @wordpress/no-non-module-stylesheet-imports
import '../../../style.scss';

const GRID_TEST_ID = 'cropper-grid';
Expand Down
1 change: 0 additions & 1 deletion packages/media-editor/src/state/test/use-media-editor-state.browser.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import {
type MediaEditorSession,
} from '../use-media-editor-state';
// Browser Mode needs the package's real styles for layout and transitions.
// eslint-disable-next-line @wordpress/no-non-module-stylesheet-imports
import '../../image-editor/style.scss';

// Shown below 1:1 in the fixture, so pixel snapping stays off until a crop
Expand Down
1 change: 0 additions & 1 deletion packages/theme/src/test/theme-provider.browser.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import { ThemeProvider } from '../theme-provider';
import type { ThemeProviderColorWarning } from '../theme-provider-color-warnings';
import styles from '../style.module.css';
// Browser Mode verifies the generated design-token stylesheet itself.
// eslint-disable-next-line @wordpress/no-non-module-stylesheet-imports
import '../../prebuilt/css/design-tokens.css';

// The "strong" brand background resolves to the `color.primary` seed itself, and
Expand Down
1 change: 0 additions & 1 deletion packages/ui/src/progress/test/progress.browser.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { describe, expect, it } from 'vitest';
import { screen } from '@testing-library/react';
import { render } from 'vitest-browser-react';
// Browser Mode loads source CSS without the build's token fallbacks.
// eslint-disable-next-line @wordpress/no-non-module-stylesheet-imports
import '@wordpress/theme/design-tokens.css';
import * as Progress from '../index';

Expand Down
2 changes: 2 additions & 0 deletions tools/eslint/config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -549,6 +549,8 @@ export default dedupePlugins( [
`routes/**/*.${ SCRIPT_EXT }`,
`widgets/**/*.${ SCRIPT_EXT }`,
],
// Tests load styles directly instead of using WordPress's enqueue path.
ignores: vitestLintFiles,
rules: {
'@wordpress/no-non-module-stylesheet-imports': 'error',
},
Expand Down
39 changes: 39 additions & 0 deletions tools/eslint/validate-test-config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,45 @@ const browserTest =
'packages/components/src/button/test/index.browser.test.tsx';
const sharedHelper = 'packages/block-serialization-spec-parser/shared-tests.js';

// Tests load styles directly; production and Storybook keep their import rules.
for ( const [ file, expectedRule ] of [
[ nodeTest, undefined ],
[ jsdomTest, undefined ],
[ browserTest, undefined ],
[ 'packages/components/src/menu/test/utils.ts', undefined ],
[ 'packages/components/src/menu/__tests__/styles.ts', undefined ],
[
'packages/components/src/menu/index.tsx',
'@wordpress/no-non-module-stylesheet-imports',
],
[
'routes/post-list/stage.tsx',
'@wordpress/no-non-module-stylesheet-imports',
],
[
'widgets/hello-dolly/render.tsx',
'@wordpress/no-non-module-stylesheet-imports',
],
[
'packages/components/src/menu/stories/index.story.tsx',
'gutenberg-storybook/no-non-module-stylesheet-imports',
],
] ) {
const [ result ] = await eslint.lintText( "import './style.scss';", {
filePath: resolve( rootDir, file ),
} );
assert.equal( result.fatalErrorCount, 0 );
assert.deepEqual(
result.messages
.filter( ( { ruleId } ) =>
ruleId?.endsWith( '/no-non-module-stylesheet-imports' )
)
.map( ( { ruleId } ) => ruleId ),
expectedRule ? [ expectedRule ] : [],
`${ file }: non-module stylesheet imports`
);
}

// Check the complete repository config, including file discovery and overrides.
for ( const file of [ nodeTest, jsdomTest, browserTest, sharedHelper ] ) {
const config = await eslint.calculateConfigForFile( file );
Expand Down
Loading