fix: make style injection sync on component mount (#176)

fix #175
vitejs · May 19, 2020 · f6a21b2 · f6a21b2
1 parent 89ac245
commit f6a21b2
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 23 deletions.
diff --git a/src/client/client.ts b/src/client/client.ts
@@ -103,13 +103,16 @@ socket.addEventListener('message', async ({ data }) => {
     case 'vue-style-update':
       const stylePath = `${path}?type=style&index=${index}`
       await bustSwCache(stylePath)
-      updateStyle(id, stylePath)
+      const content = await import(stylePath + `&t=${timestamp}`)
+      updateStyle(id, content.default)
       console.log(
         `[vite] ${path} style${index > 0 ? `#${index}` : ``} updated.`
       )
       break
     case 'style-update':
-      updateStyle(id, `${path}?t=${timestamp}`)
+      await bustSwCache(`${path}?import`)
+      const style = await import(`${path}?t=${timestamp}`)
+      updateStyle(id, style.default)
       console.log(`[vite] ${path} updated.`)
       break
     case 'style-remove':
@@ -145,17 +148,16 @@ socket.addEventListener('close', () => {
   }, 1000)
 })
 
-export function updateStyle(id: string, url: string) {
+export function updateStyle(id: string, content: string) {
   const linkId = `vite-css-${id}`
   let link = document.getElementById(linkId)
   if (!link) {
-    link = document.createElement('link')
+    link = document.createElement('style')
     link.id = linkId
-    link.setAttribute('rel', 'stylesheet')
     link.setAttribute('type', 'text/css')
     document.head.appendChild(link)
   }
-  link.setAttribute('href', url)
+  link.innerHTML = content
 }
 
 async function updateModule(

diff --git a/src/node/server/serverPluginCss.ts b/src/node/server/serverPluginCss.ts
@@ -33,23 +33,27 @@ export const cssPlugin: ServerPlugin = ({
         // tag linking to the actual raw url
         ctx.type = 'js'
         const id = JSON.stringify(hash_sum(ctx.path))
-        const rawPath = JSON.stringify(ctx.path)
         let code =
           `import { updateStyle } from "${hmrClientId}"\n` +
-          `updateStyle(${id}, ${rawPath})\n`
+          `const css = ${JSON.stringify(processedCSS.get(ctx.path)!.css)}\n` +
+          `updateStyle(${id}, css)\n`
         if (ctx.path.endsWith('.module.css')) {
           code += `export default ${JSON.stringify(
             processedCSS.get(ctx.path)!.modules
           )}`
+        } else {
+          code += `export default css`
         }
         ctx.body = code.trim()
       } else {
         // raw request, return compiled css
         if (!processedCSS.has(ctx.path)) {
           await processCss(ctx)
         }
-        ctx.type = 'css'
-        ctx.body = processedCSS.get(ctx.path)!.css
+        ctx.type = 'js'
+        ctx.body = `export default ${JSON.stringify(
+          processedCSS.get(ctx.path)!.css
+        )}`
       }
     }
   })
@@ -72,15 +76,12 @@ export const cssPlugin: ServerPlugin = ({
       // bust process cache
       processedCSS.delete(publicPath)
 
-      // css modules are updated as js
-      if (!file.endsWith('.module.css')) {
-        watcher.send({
-          type: 'style-update',
-          id,
-          path: publicPath,
-          timestamp: Date.now()
-        })
-      }
+      watcher.send({
+        type: 'style-update',
+        id,
+        path: publicPath,
+        timestamp: Date.now()
+      })
     }
   })
 
@@ -99,6 +100,7 @@ export const cssPlugin: ServerPlugin = ({
             ...(expectsModule
               ? [
                   require('postcss-modules')({
+                    generateScopedName: `[local]_${hash_sum(ctx.path)}`,
                     getJSON(_: string, json: Record<string, string>) {
                       modules = json
                     }

diff --git a/src/node/server/serverPluginHmr.ts b/src/node/server/serverPluginHmr.ts
@@ -158,7 +158,6 @@ export const hmrPlugin: ServerPlugin = ({
     } else if (file.endsWith('.vue')) {
       handleVueReload(file, timestamp)
     } else if (
-      file.endsWith('.module.css') ||
       !(file.endsWith('.css') || cssTransforms.some((t) => t.test(file, {})))
     ) {
       // everything except plain .css are considered HMR dependencies.

diff --git a/src/node/server/serverPluginVue.ts b/src/node/server/serverPluginVue.ts
@@ -127,8 +127,8 @@ export const vuePlugin: ServerPlugin = ({
         ctx.type = 'js'
         ctx.body = `export default ${JSON.stringify(result.modules)}`
       } else {
-        ctx.type = 'css'
-        ctx.body = result.code
+        ctx.type = 'js'
+        ctx.body = `export default ${JSON.stringify(result.code)}`
       }
       return etagCacheCheck(ctx)
     }
@@ -272,7 +272,8 @@ async function compileSFCMain(
         )}`
         code += `\n__cssModules[${JSON.stringify(moduleName)}] = ${styleVar}`
       }
-      code += `\nupdateStyle("${id}-${i}", ${JSON.stringify(styleRequest)})`
+      code += `\nimport css_${i} from ${JSON.stringify(styleRequest)}`
+      code += `\nupdateStyle("${id}-${i}", css_${i})`
     })
     if (hasScoped) {
       code += `\n__script.__scopeId = "data-v-${id}"`