Skip to content

Commit 95035b8

Browse files
ciampoMamaduka
authored andcommitted
Storybook: Reuse PostCSS browser resolver in smoke tests (WordPress#83635)
Co-authored-by: ciampo <mciampini@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
1 parent 9b3f172 commit 95035b8

3 files changed

Lines changed: 18 additions & 2 deletions

File tree

‎storybook/main.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import emotion from '@rolldown/plugin-emotion';
66
import type { StorybookConfig } from '@storybook/react-vite';
77
import dsTokenFallbacks from '@wordpress/theme/postcss-plugins/postcss-ds-token-fallbacks';
88
import dsTokenFallbacksJs from '@wordpress/theme/vite-plugins/vite-ds-token-fallbacks';
9+
import { createPostcssBrowserPlugin } from './postcss-browser-plugin.mjs';
910
import { statusIndexer } from './status-indexer.js';
1011

1112
/**
@@ -143,6 +144,15 @@ const config: StorybookConfig = {
143144
},
144145
],
145146
},
147+
optimizeDeps: {
148+
rolldownOptions: {
149+
plugins: [
150+
createPostcssBrowserPlugin(
151+
path.resolve( import.meta.dirname, '..' )
152+
),
153+
],
154+
},
155+
},
146156
plugins: [
147157
dsTokenFallbacksJs(),
148158
react() as PluginOption,

test/unit/config/postcss-browser-plugin.mjs renamed to storybook/postcss-browser-plugin.mjs

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,15 @@ const EMPTY_MODULE_ID = '\0postcss-browser-empty';
77
// Temporary workaround for https://github.com/vitejs/vite/issues/23512.
88
// Remove this plugin and its optimizer registration once the installed Vite
99
// version handles browser:false imports without warnings. Keep the Browser
10-
// regression test to verify removal.
10+
// regression test and Storybook smoke check to verify removal.
1111
//
1212
// The separate CSS Modules missing-`from` warning is tracked in:
1313
// https://github.com/madyankin/postcss-modules/pull/173
1414
// https://github.com/vitejs/vite/issues/15410
15+
/**
16+
* @param {string} rootDir
17+
* @return {import('vite').Plugin} The PostCSS browser import resolver.
18+
*/
1519
export function createPostcssBrowserPlugin( rootDir ) {
1620
const require = createRequire(
1721
path.join( rootDir, 'packages/block-editor/package.json' )
@@ -35,13 +39,15 @@ export function createPostcssBrowserPlugin( rootDir ) {
3539
) {
3640
return EMPTY_MODULE_ID;
3741
}
42+
return null;
3843
},
3944
load( id ) {
4045
if ( id === EMPTY_MODULE_ID ) {
4146
// PostCSS probes these optional APIs. Honor its browser:false
4247
// mappings without Vite's warning-producing external proxies.
4348
return 'module.exports = {};';
4449
}
50+
return null;
4551
},
4652
};
4753
}

‎test/unit/vitest.config.mjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { defineConfig } from 'vitest/config';
66
import { createVitePlugins } from './config/vite-plugins.mjs';
77
import { createPlaywrightProvider } from './config/playwright-provider.mjs';
88
import { createBrowserTraceArtifacts } from './config/browser-traces.mjs';
9-
import { createPostcssBrowserPlugin } from './config/postcss-browser-plugin.mjs';
9+
import { createPostcssBrowserPlugin } from '../../storybook/postcss-browser-plugin.mjs';
1010
import {
1111
discoverTestFiles,
1212
getVitestTestsByProject,

0 commit comments

Comments
 (0)