fix(browser): don't process the default css styles (#6861)

vitest-dev · Nov 5, 2024 · 0d67f04 · 0d67f04
1 parent 08b264a
commit 0d67f04
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 18 deletions.
diff --git a/packages/browser/src/client/tester/tester.html b/packages/browser/src/client/tester/tester.html
@@ -5,17 +5,6 @@
     <link rel="icon" href="{__VITEST_FAVICON__}" type="image/svg+xml">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vitest Browser Tester</title>
-    <style>
-      html {
-        padding: 0;
-        margin: 0;
-      }
-      body {
-        padding: 0;
-        margin: 0;
-        min-height: 100vh;
-      }
-    </style>
   </head>
   <body>
     <script type="module" src="./tester.ts"></script>

diff --git 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
@@ -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,