fix: fallback to <style> insertion when css contains @import

fix #448
vitejs · Jun 24, 2020 · 422b4aa · SegaraRai · Jun 24, 2020 · 422b4aa
1 parent 50537c4
commit 422b4aa
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git 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
@@ -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)
     }