From 422b4aad117bc4c021fde775d4ad7919d032bf4a Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Wed, 24 Jun 2020 09:34:43 -0400
Subject: [PATCH] fix: fallback to <style> insertion when css contains @import

fix #448
---
 playground/css/TestPostCss.vue |  2 ++
 src/client/client.ts           | 18 +++++++++++++++---
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/playground/css/TestPostCss.vue b/playground/css/TestPostCss.vue
index 83ed03d556ed93..ba40641b7a9cc7 100644
--- a/playground/css/TestPostCss.vue
+++ b/playground/css/TestPostCss.vue
@@ -14,6 +14,8 @@ export default {}
 </script>
 
 <style>
+@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
+
 body {
   & .postcss-from-sfc {
     color: green;
diff --git a/src/client/client.ts b/src/client/client.ts
index 96186be307b0e9..16f3c8d57f7b02 100644
--- a/src/client/client.ts
+++ b/src/client/client.ts
@@ -161,7 +161,12 @@ const sheetsMap = new Map()
 
 export function updateStyle(id: string, content: string) {
   let style = sheetsMap.get(id)
-  if (supportsConstructedSheet) {
+  if (supportsConstructedSheet && !content.includes('@import')) {
+    if (style && !(style instanceof CSSStyleSheet)) {
+      removeStyle(id)
+      style = undefined
+    }
+
     if (!style) {
       style = new CSSStyleSheet()
       style.replaceSync(content)
@@ -172,6 +177,11 @@ export function updateStyle(id: string, content: string) {
       style.replaceSync(content)
     }
   } else {
+    if (style && !(style instanceof HTMLStyleElement)) {
+      removeStyle(id)
+      style = undefined
+    }
+
     if (!style) {
       style = document.createElement('style')
       style.setAttribute('type', 'text/css')
@@ -187,11 +197,13 @@ export function updateStyle(id: string, content: string) {
 function removeStyle(id: string) {
   let style = sheetsMap.get(id)
   if (style) {
-    if (supportsConstructedSheet) {
+    if (style instanceof CSSStyleSheet) {
       // @ts-ignore
       const index = document.adoptedStyleSheets.indexOf(style)
       // @ts-ignore
-      document.adoptedStyleSheets.splice(index, 1)
+      document.adoptedStyleSheets = document.adoptedStyleSheets.filter(
+        (s: CSSStyleSheet) => s !== style
+      )
     } else {
       document.head.removeChild(style)
     }