From 0d67f04b653f7a5f6971083d05367e5a2478a17d Mon Sep 17 00:00:00 2001 From: Vladimir Date: Tue, 5 Nov 2024 15:53:00 +0100 Subject: [PATCH] fix(browser): don't process the default css styles (#6861) --- .../browser/src/client/tester/tester.html | 11 ------- packages/browser/src/node/plugin.ts | 31 +++++++++++++++---- packages/browser/src/node/serverTester.ts | 4 ++- 3 files changed, 28 insertions(+), 18 deletions(-) diff --git a/packages/browser/src/client/tester/tester.html b/packages/browser/src/client/tester/tester.html index 8586e2166f22..5bd4822cf02b 100644 --- a/packages/browser/src/client/tester/tester.html +++ b/packages/browser/src/client/tester/tester.html @@ -5,17 +5,6 @@ Vitest Browser Tester - diff --git a/packages/browser/src/node/plugin.ts b/packages/browser/src/node/plugin.ts index 737a9cc9d744..14c216cfa1ff 100644 --- a/packages/browser/src/node/plugin.ts +++ b/packages/browser/src/node/plugin.ts @@ -425,7 +425,7 @@ export default (browserServer: BrowserServer, base = '/'): Plugin[] => { name: 'vitest:browser:transform-tester-html', enforce: 'pre', async transformIndexHtml(html, ctx) { - if (!ctx.path.startsWith(browserServer.prefixTesterUrl)) { + if (ctx.filename !== browserServer.testerFilepath) { return } @@ -439,14 +439,15 @@ export default (browserServer: BrowserServer, base = '/'): Plugin[] => { ? browserServer.stateJs : await browserServer.stateJs - const testerScripts: HtmlTagDescriptor[] = [] - if (resolve(distRoot, 'client/tester/tester.html') !== browserServer.testerFilepath) { + const testerTags: HtmlTagDescriptor[] = [] + const isDefaultTemplate = resolve(distRoot, 'client/tester/tester.html') === browserServer.testerFilepath + if (!isDefaultTemplate) { const manifestContent = browserServer.manifest instanceof Promise ? await browserServer.manifest : browserServer.manifest const testerEntry = manifestContent['tester/tester.html'] - testerScripts.push({ + testerTags.push({ tag: 'script', attrs: { type: 'module', @@ -459,7 +460,7 @@ export default (browserServer: BrowserServer, base = '/'): Plugin[] => { for (const importName of testerEntry.imports || []) { const entryManifest = manifestContent[importName] if (entryManifest) { - testerScripts.push( + testerTags.push( { tag: 'link', attrs: { @@ -473,6 +474,24 @@ export default (browserServer: BrowserServer, base = '/'): Plugin[] => { } } } + else { + // inject the reset style only in the default template, + // allowing users to customize the style in their own template + testerTags.push({ + tag: 'style', + children: ` +html { + padding: 0; + margin: 0; +} +body { + padding: 0; + margin: 0; + min-height: 100vh; +}`, + injectTo: 'head', + }) + } return [ { @@ -504,7 +523,7 @@ export default (browserServer: BrowserServer, base = '/'): Plugin[] => { } as const : null, ...browserServer.testerScripts, - ...testerScripts, + ...testerTags, { tag: 'script', attrs: { diff --git a/packages/browser/src/node/serverTester.ts b/packages/browser/src/node/serverTester.ts index 18ea0c0d99ee..f9ea918796b9 100644 --- a/packages/browser/src/node/serverTester.ts +++ b/packages/browser/src/node/serverTester.ts @@ -3,6 +3,7 @@ import type { Connect } from 'vite' import type { BrowserServer } from './server' import crypto from 'node:crypto' import { stringify } from 'flatted' +import { join } from 'pathe' import { replacer } from './utils' export async function resolveTester( @@ -58,7 +59,8 @@ export async function resolveTester( : await server.testerHtml try { - const indexhtml = await server.vite.transformIndexHtml(url.pathname, testerHtml) + const url = join('/@fs/', server.testerFilepath) + const indexhtml = await server.vite.transformIndexHtml(url, testerHtml) return replacer(indexhtml, { __VITEST_FAVICON__: server.faviconUrl, __VITEST_INJECTOR__: injector,