test: fix style update logic

jlewin · Jun 24, 2020 · b674e88 · b674e88
1 parent 7305c5b
commit b674e88
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 13 deletions.
diff --git a/playground/css/empty.css b/playground/css/empty.css
diff --git a/src/client/client.ts b/src/client/client.ts
@@ -172,7 +172,6 @@ export function updateStyle(id: string, content: string) {
       style.replaceSync(content)
       // @ts-ignore
       document.adoptedStyleSheets = [...document.adoptedStyleSheets, style]
-      sheetsMap.set(id, style)
     } else {
       style.replaceSync(content)
     }
@@ -187,11 +186,11 @@ export function updateStyle(id: string, content: string) {
       style.setAttribute('type', 'text/css')
       style.innerHTML = content
       document.head.appendChild(style)
-      sheetsMap.set(id, style)
     } else {
       style.innerHTML = content
     }
   }
+  sheetsMap.set(id, style)
 }
 
 function removeStyle(id: string) {

diff --git a/test/test.js b/test/test.js
@@ -311,26 +311,26 @@ describe('vite', () => {
         // external imports are preserved, and is not supported with constructed
         // CSSStyleSheet, so we need to remove the constructed sheet and fallback
         // to <style> insertion
-        const externalImport = `@import url('https://fonts.googleapis.com/css2?family=Roboto')`
-        await updateFile('css/TestPostCss.vue', (content) =>
-          content
+        const externalImport = `@import 'http://localhost:3000/css/empty.css';`
+        await updateFile('css/TestPostCss.vue', (content) => {
+          return content
             .replace(`<style>`, `<style>\n${externalImport}\n`)
-            .replace('color: green', 'color: red')
-        )
+            .replace('color: red;', 'color: green;')
+        })
         // should work
         await expectByPolling(
           () => getComputedColor('.postcss-from-sfc'),
-          'rgb(255, 0, 0)'
+          'rgb(0, 128, 0)'
         )
-        await updateFile('css/TestPostCss.vue', (content) =>
-          content
+        await updateFile('css/TestPostCss.vue', (content) => {
+          return content
             .replace(externalImport, '')
-            .replace('color: red', 'color: green')
-        )
+            .replace('color: green;', 'color: red;')
+        })
         // should work
         await expectByPolling(
           () => getComputedColor('.postcss-from-sfc'),
-          'rgb(0, 128, 0)'
+          'rgb(255, 0, 0)'
         )
       })