From b674e883a0cba35d9f8f3cad1df4e23d875f8bc5 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Wed, 24 Jun 2020 11:59:08 -0400
Subject: [PATCH] test: fix style update logic

---
 playground/css/empty.css |  0
 src/client/client.ts     |  3 +--
 test/test.js             | 22 +++++++++++-----------
 3 files changed, 12 insertions(+), 13 deletions(-)
 create mode 100644 playground/css/empty.css

diff --git a/playground/css/empty.css b/playground/css/empty.css
new file mode 100644
index 00000000000000..e69de29bb2d1d6
diff --git a/src/client/client.ts b/src/client/client.ts
index 16f3c8d57f7b02..0af7e69acda9aa 100644
--- 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
index 482165d07dcb7c..07fc157bcadc58 100644
--- 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)'
         )
       })