Hot Module Replacement
+Hot Module Replacement + CSS modules
+Lazy CSS: Must be red, but turn green when .
But turn orange, when . Additional clicks have no effect.
diff --git a/test/manual/src/index.js b/test/manual/src/index.js index 82b530f9..92761702 100644 --- a/test/manual/src/index.js +++ b/test/manual/src/index.js @@ -3,6 +3,25 @@ /* eslint-disable no-console, camelcase, no-global-assign */ import './initial.css'; +import './simple.css'; +import classes from './simple.module.css'; + +console.log('___CLASSES__'); +console.log(classes); + +function replaceClass(originalClass, newClass) { + const nodes = document.querySelectorAll(`.${originalClass}`); + + nodes.forEach((node) => { + const { classList } = node; + classList.remove(originalClass); + classList.add(newClass); + }); +} + +Object.keys(classes).forEach((localClass) => { + replaceClass(localClass, classes[localClass]); +}); const handleError = (err) => { document.querySelector('.errors').textContent += `\n${err.toString()}`; diff --git a/test/manual/src/simple.css b/test/manual/src/simple.css new file mode 100644 index 00000000..af62930f --- /dev/null +++ b/test/manual/src/simple.css @@ -0,0 +1,11 @@ +.r { + color: red; +} + +.g { + color: green; +} + +.b { + color: blue; +} diff --git a/test/manual/src/simple.module.css b/test/manual/src/simple.module.css new file mode 100644 index 00000000..c3ebbd0e --- /dev/null +++ b/test/manual/src/simple.module.css @@ -0,0 +1,11 @@ +.rr { + color: red; +} + +.gg { + color: green; +} + +.bb { + color: blue; +} diff --git a/test/manual/webpack.config.js b/test/manual/webpack.config.js index 3e511bfa..3d308a6c 100644 --- a/test/manual/webpack.config.js +++ b/test/manual/webpack.config.js @@ -1,5 +1,15 @@ const Self = require('../../'); +const ENABLE_HMR = + typeof process.env.ENABLE_HMR !== 'undefined' + ? Boolean(process.env.ENABLE_HMR) + : false; + +const ENABLE_ES_MODULE = + typeof process.env.ES_MODULE !== 'undefined' + ? Boolean(process.env.ES_MODULE) + : false; + module.exports = { mode: 'development', output: { @@ -11,7 +21,39 @@ module.exports = { rules: [ { test: /\.css$/, - use: [Self.loader, 'css-loader'], + exclude: [/\.module\.css$/i], + use: [ + { + loader: Self.loader, + options: { + hmr: ENABLE_HMR, + }, + }, + { + loader: 'css-loader', + options: { + esModule: ENABLE_ES_MODULE, + }, + }, + ], + }, + { + test: /\.module\.css$/i, + use: [ + { + loader: Self.loader, + options: { + hmr: ENABLE_HMR, + }, + }, + { + loader: 'css-loader', + options: { + modules: true, + esModule: ENABLE_ES_MODULE, + }, + }, + ], }, ], },