fix: make hot reload work for CSS

callstack · Feb 23, 2019 · d506b5b · d506b5b
1 parent de401bf
commit d506b5b
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 14 deletions.
diff --git a/src/LinariaAsset.js b/src/LinariaAsset.js
@@ -46,14 +46,38 @@ class LinariaAsset extends JSAsset {
   }
 
   async generate() {
-    const result = this[RESULT];
+    const { cssText } = this[RESULT];
     const output = (await super.generate()) || {};
 
-    if (result.cssText) {
-      output.css = result.cssText;
+    const result = [
+      {
+        type: 'js',
+        value: output.js,
+        sourceMap: output.map,
+      },
+    ];
+
+    if (cssText) {
+      result.push({
+        type: 'css',
+        value: cssText,
+        final: true,
+      });
+
+      if (this.options.hmr) {
+        this.addDependency('_css_loader');
+
+        result[0].value += `
+          ;(function() {
+            var reloadCSS = require('_css_loader');
+            module.hot.dispose(reloadCSS);
+            module.hot.accept(reloadCSS);
+          })();
+        `;
+      }
     }
 
-    return output;
+    return result;
   }
 }
 

diff --git a/src/__tests__/index.test.js b/src/__tests__/index.test.js
@@ -33,10 +33,6 @@ it('bundles file with css tag', async () => {
         type: 'css',
         assets: ['css.js'],
       },
-      {
-        type: 'map',
-        assets: ['css.js', 'css.js', 'cx.js', 'index.js'],
-      },
     ],
   });
 });
@@ -49,9 +45,6 @@ it('bundles file with styled tag', async () => {
   assertBundleTree(bundle, {
     name: 'styled.js',
     childBundles: [
-      {
-        type: 'map',
-      },
       {
         type: 'css',
         assets: ['styled.js'],
@@ -72,9 +65,6 @@ it('bundles combined file', async () => {
         type: 'css',
         assets: ['css.js', 'styled.js'],
       },
-      {
-        type: 'map',
-      },
     ],
   });
 });