Merge pull request #47 from keegan-lillo/fix-css-modules-js-reload

Hot reload JS files when the accompanying CSS Module file changes
shepherdwind · Jul 26, 2018 · 2665105 · 2665105
2 parents 0a1be90 + 9e7a2f5
commit 2665105
Show file tree

Hide file tree

Showing 9 changed files with 125 additions and 1 deletion.
diff --git a/examples/css-modules/.gitignore b/examples/css-modules/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+dist
+!dist/index.html
diff --git a/examples/css-modules/index.html b/examples/css-modules/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>css hot loader example</title>
+
+  <link rel="stylesheet" href="output.css">
+</head>
+<body>
+  <div class="global-example">I'm styled globally</div>
+  <div id="css-modules-root"></div>
+
+  <script src="output.js"></script> <!-- webpack javascript output -->
+
+</body>
+</html>
+
diff --git a/examples/css-modules/package.json b/examples/css-modules/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "css-hot-reload-example",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "build": "webpack --progress",
+    "start": "NODE_ENV=development webpack-serve --port 3000 --config webpack.config.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "css-hot-loader": "latest",
+    "css-loader": "^1.0.0",
+    "mini-css-extract-plugin": "^0.4.0",
+    "webpack": "^4.1.1",
+    "webpack-cli": "^3.1.0",
+    "webpack-dev-server": "^3.1.1",
+    "webpack-serve": "^2.0.2"
+  }
+}
diff --git a/examples/css-modules/src/css-modules-test.js b/examples/css-modules/src/css-modules-test.js
@@ -0,0 +1,9 @@
+const styles = require('./css-modules-test.module.css');
+console.log('styles', styles);
+
+const rootElem = document.getElementById('css-modules-root');
+const elem = document.createElement('div');
+elem.classList.add(styles.foo);
+elem.innerText = "I'm styled using CSS Modules!";
+rootElem.innerHTML = '';
+rootElem.appendChild(elem);
diff --git a/examples/css-modules/src/css-modules-test.module.css b/examples/css-modules/src/css-modules-test.module.css
@@ -0,0 +1,6 @@
+.foo {
+  padding: 12px;
+  color: #fafafa;
+  background: #555;
+  margin: 12px;
+}
diff --git a/examples/css-modules/src/global.css b/examples/css-modules/src/global.css
@@ -0,0 +1,10 @@
+body {
+  background: #eee;
+}
+
+.global-example {
+  text-align: center;
+  padding-top: 100px;
+  color: #666;
+  font-size: 30px;
+}
diff --git a/examples/css-modules/src/index.js b/examples/css-modules/src/index.js
@@ -0,0 +1,7 @@
+require('./global.css');
+require('./css-modules-test');
+
+// Entry file requires the below to avoid full page refreshes
+if (module.hot) {
+  module.hot.accept();
+}
diff --git a/examples/css-modules/webpack.config.js b/examples/css-modules/webpack.config.js
@@ -0,0 +1,51 @@
+const path = require('path'); // nodejs dependency when dealing with paths
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const config = { // config object
+  entry: {
+    output: ['./src/index.js'], // entry file
+  },
+  output: { // output
+    path: path.resolve(__dirname, 'dist'), // output path
+    filename: '[name].js',
+  },
+  mode: 'development',
+  module: {
+    rules: [
+      {
+        oneOf: [ // We use oneOf so we can use both global stylesheets and CSS Modules
+          {
+            test: /\.module\.css/,
+            use: [
+              'css-hot-loader',
+              MiniCssExtractPlugin.loader,
+              {
+                loader: 'css-loader',
+                options: {
+                  modules: true,
+                  localIdentName: '[local]__[name]__[hash:base64:5]',
+                },
+              },
+            ],
+          },
+          {
+            test: /\.css/,
+            use: [
+              'css-hot-loader',
+              MiniCssExtractPlugin.loader,
+              'css-loader'
+            ],
+          },
+        ],
+      },
+    ], // end rules
+  },
+  plugins: [
+    // webpack plugins
+    new MiniCssExtractPlugin('[name].css'),
+  ],
+  devtool: 'source-map',
+  serve: {},
+};
+
+module.exports = config;
diff --git a/loader.js b/loader.js
@@ -16,7 +16,6 @@ module.exports = function(content) {
       // ${Date.now()}
       var cssReload = require(${loaderUtils.stringifyRequest(this, '!' + path.join(__dirname, 'hotModuleReplacement.js'))})(module.id, ${JSON.stringify(options)});
       module.hot.dispose(cssReload);
-      module.hot.accept(undefined, cssReload);
     }
   `;
 };