Automatically allow hot-reloading of imported CSS

Author: clessg

src/index.js

@@ -17,6 +17,7 @@ export default ({
   types: BabelTypes
 }) => {
   const filenameMap = {};
+  const cursors = {};
 
   const setupFileForRuntimeResolution = (path, filename) => {
     const programPath = path.findParent((parentPath) => {
@@ -38,11 +39,7 @@ export default ({
       )
     );
 
-    const firstNonImportDeclarationNode = programPath.get('body').find((node) => {
-      return !t.isImportDeclaration(node);
-    });
-
-    firstNonImportDeclarationNode.insertBefore(
+    cursors[filename].insertAfter(
       t.variableDeclaration(
         'const',
         [
@@ -86,6 +83,45 @@ export default ({
         filenameMap[filename].styleModuleImportMap[styleImportName] = requireCssModule(targetResourcePath, {
           generateScopedName: stats.opts.generateScopedName
         });
+
+        const test = t.memberExpression(t.identifier('module'), t.identifier('hot'));
+        const consequent = t.blockStatement([
+          t.expressionStatement(
+            t.callExpression(
+              t.memberExpression(
+                t.memberExpression(t.identifier('module'), t.identifier('hot')),
+                t.identifier('accept')
+              ),
+              [
+                t.stringLiteral(path.node.source.value),
+                t.functionExpression(null, [], t.blockStatement([
+                  t.expressionStatement(
+                    t.callExpression(
+                      t.identifier('require'),
+                      [t.stringLiteral(path.node.source.value)]
+                    )
+                  )
+                ]))
+              ]
+            )
+          )
+        ]);
+
+        const hotAcceptStatement = t.ifStatement(test, consequent);
+
+        if (cursors[filename]) {
+          cursors[filename] = cursors[filename].insertAfter(hotAcceptStatement)[0];
+        } else {
+          const programPath = path.findParent((parentPath) => {
+            return parentPath.isProgram();
+          });
+
+          const firstNonImportDeclarationNode = programPath.get('body').find((node) => {
+            return !t.isImportDeclaration(node);
+          });
+
+          cursors[filename] = firstNonImportDeclarationNode.insertBefore(hotAcceptStatement)[0];
+        }
       },
       JSXElement (path: Object, stats: Object): void {
         const filename = stats.file.opts.filename;
@@ -127,6 +163,8 @@ export default ({
         filenameMap[filename] = {
           styleModuleImportMap: {}
         };
+
+        cursors[filename] = null;
       }
     }
   };

test/fixtures/react-css-modules/adds module hot accept for CSS imports/actual.js

@@ -0,0 +1,3 @@
+import './bar.css';
+
+<div styleName='a'></div>;

test/fixtures/react-css-modules/adds module hot accept for CSS imports/bar.css

@@ -0,0 +1 @@
+.a {}

test/fixtures/react-css-modules/adds module hot accept for CSS imports/expected.js

@@ -0,0 +1,9 @@
+import './bar.css';
+
+if (module.hot) {
+  module.hot.accept('./bar.css', function () {
+    require('./bar.css');
+  });
+}
+
+<div className="bar__a"></div>;

test/fixtures/react-css-modules/adds module hot accept for CSS imports/options.json

@@ -0,0 +1,10 @@
+{
+  "plugins": [
+    [
+      "../../../../src",
+      {
+        "generateScopedName": "[name]__[local]"
+      }
+    ]
+  ]
+}

test/fixtures/react-css-modules/does not throw error if attribute has no name property/expected.js

@@ -1,5 +1,11 @@
 import './bar.css';
 
+if (module.hot) {
+  module.hot.accept('./bar.css', function () {
+    require('./bar.css');
+  });
+}
+
 const props = {
   foo: 'bar'
 };

test/fixtures/react-css-modules/merges the resolved styleName with the existing className values/expected.js

@@ -1,3 +1,9 @@
 import './bar.css';
 
+if (module.hot) {
+  module.hot.accept('./bar.css', function () {
+    require('./bar.css');
+  });
+}
+
 <div className="apple banana bar__a"></div>;

test/fixtures/react-css-modules/resolves namespaced styleName/expected.js

@@ -1,3 +1,9 @@
 import foo from './bar.css';
 
+if (module.hot) {
+  module.hot.accept('./bar.css', function () {
+    require('./bar.css');
+  });
+}
+
 <div className="bar__a"></div>;

test/fixtures/react-css-modules/resolves non-namespaced styleName (anonymous import)/expected.js

@@ -1,3 +1,9 @@
 import './bar.css';
 
+if (module.hot) {
+  module.hot.accept('./bar.css', function () {
+    require('./bar.css');
+  });
+}
+
 <div className="bar__a"></div>;

test/fixtures/react-css-modules/resolves non-namespaced styleName (named import)/expected.js

@@ -1,3 +1,9 @@
 import foo from './bar.css';
 
+if (module.hot) {
+  module.hot.accept('./bar.css', function () {
+    require('./bar.css');
+  });
+}
+
 <div className="bar__a"></div>;

test/fixtures/react-css-modules/uses getClassName to resolve non-literal styleName (with already existing className)/expected.js

@@ -2,6 +2,18 @@ import _getClassName from 'babel-plugin-react-css-modules/dist/browser/getClassN
 import bar from './bar.css';
 import './foo.css';
 
+if (module.hot) {
+  module.hot.accept('./bar.css', function () {
+    require('./bar.css');
+  });
+}
+
+if (module.hot) {
+  module.hot.accept('./foo.css', function () {
+    require('./foo.css');
+  });
+}
+
 const _styleModuleImportMap = {
   'bar': {
     'a-b': 'bar__a-b'

test/fixtures/react-css-modules/uses getClassName to resolve non-literal styleName/expected.js

@@ -2,6 +2,18 @@ import _getClassName from 'babel-plugin-react-css-modules/dist/browser/getClassN
 import bar from './bar.css';
 import './foo.css';
 
+if (module.hot) {
+  module.hot.accept('./bar.css', function () {
+    require('./bar.css');
+  });
+}
+
+if (module.hot) {
+  module.hot.accept('./foo.css', function () {
+    require('./foo.css');
+  });
+}
+
 const _styleModuleImportMap = {
   'bar': {
     'a-b': 'bar__a-b'