test: lazy css modules (#416)

webpack-contrib · Aug 5, 2019 · 1a410df · 1a410df
1 parent 8695682
commit 1a410df
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 14 deletions.
diff --git a/test/manual/src/component.lazy.module.css b/test/manual/src/component.lazy.module.css
@@ -0,0 +1,20 @@
+@value v-red: red;
+@value v-green: green;
+@value v-blue: blue;
+
+.module-red {
+  color: v-red;
+}
+
+.module-green {
+  color: v-green;
+}
+
+.module-blue {
+  color: v-blue;
+}
+
+.module-background {
+  height: 1200px;
+  background: url('./logo.png') center no-repeat;
+}
diff --git a/test/manual/src/index.js b/test/manual/src/index.js
@@ -2,46 +2,84 @@
 
 import './style.css';
 import './other-style.scss';
-import styles from './component.module.css';
+import component from './component.module.css';
 import styleLazy from './style.lazy.css';
 import otherStyleLazy from './other-style.lazy.scss';
+import componentLazy from './component.lazy.module.css';
 import './style.link.css';
 import './custom-square';
 
 styleLazy.use();
 otherStyleLazy.use();
 
-const articleElement = document.createElement('article');
+const articleElement1 = document.createElement('article');
 const h3Element = document.createElement('h3');
 const h3TextNode = document.createTextNode('CSS modules');
 
 const divElement1 = document.createElement('div');
 const divElement1Content = document.createTextNode('Red');
 
-divElement1.className = styles['module-red'];
+divElement1.className = component['module-red'];
 divElement1.appendChild(divElement1Content);
 
 const divElement2 = document.createElement('div');
 const divElement2Content = document.createTextNode('Green');
 
-divElement2.className = styles['module-green'];
+divElement2.className = component['module-green'];
 divElement2.appendChild(divElement2Content);
 
 const divElement3 = document.createElement('div');
 const divElement3Content = document.createTextNode('Blue');
 
-divElement3.className = styles['module-blue'];
+divElement3.className = component['module-blue'];
 divElement3.appendChild(divElement3Content);
 
 const divElement4 = document.createElement('div');
 
-divElement4.className = styles['module-background'];
+divElement4.className = component['module-background'];
 
 h3Element.appendChild(h3TextNode);
-articleElement.appendChild(h3Element);
-articleElement.appendChild(divElement1);
-articleElement.appendChild(divElement2);
-articleElement.appendChild(divElement3);
-articleElement.appendChild(divElement4);
+articleElement1.appendChild(h3Element);
+articleElement1.appendChild(divElement1);
+articleElement1.appendChild(divElement2);
+articleElement1.appendChild(divElement3);
+articleElement1.appendChild(divElement4);
 
-document.querySelectorAll('section')[0].appendChild(articleElement);
+document.querySelectorAll('section')[0].appendChild(articleElement1);
+
+componentLazy.use();
+
+const articleElement2 = document.createElement('article');
+const h3Element2 = document.createElement('h3');
+const h3TextNode2 = document.createTextNode('CSS modules');
+
+const divElement5 = document.createElement('div');
+const divElement5Content = document.createTextNode('Red');
+
+divElement5.className = componentLazy.locals['module-red'];
+divElement5.appendChild(divElement5Content);
+
+const divElement6 = document.createElement('div');
+const divElement6Content = document.createTextNode('Green');
+
+divElement6.className = componentLazy.locals['module-green'];
+divElement6.appendChild(divElement6Content);
+
+const divElement7 = document.createElement('div');
+const divElement7Content = document.createTextNode('Blue');
+
+divElement7.className = componentLazy.locals['module-blue'];
+divElement7.appendChild(divElement7Content);
+
+const divElement8 = document.createElement('div');
+
+divElement8.className = componentLazy.locals['module-background'];
+
+h3Element2.appendChild(h3TextNode2);
+articleElement2.appendChild(h3Element2);
+articleElement2.appendChild(divElement5);
+articleElement2.appendChild(divElement6);
+articleElement2.appendChild(divElement7);
+articleElement2.appendChild(divElement8);
+
+document.querySelectorAll('section')[1].appendChild(articleElement2);
diff --git a/test/manual/webpack.config.js b/test/manual/webpack.config.js
@@ -14,7 +14,12 @@ module.exports = {
     rules: [
       {
         test: /\.css$/i,
-        exclude: [/\.module\.css$/i, /\.lazy\.css$/i, /\.link\.css$/i],
+        exclude: [
+          /\.module\.css$/i,
+          /\.lazy\.css$/i,
+          /\.lazy\.module\.css$/i,
+          /\.link\.css$/i,
+        ],
         use: [
           {
             loader: require.resolve('../../dist/index.js'),
@@ -29,7 +34,7 @@ module.exports = {
       },
       {
         test: /\.module\.css$/i,
-        exclude: [/\.lazy\.css$/i, /\.link\.css$/i],
+        exclude: [/\.lazy\.css$/i, /\.link\.css$/i, /\.lazy\.module\.css$/i],
         use: [
           {
             loader: require.resolve('../../dist/index.js'),
@@ -58,6 +63,23 @@ module.exports = {
           },
         ],
       },
+      {
+        test: /\.lazy\.module\.css$/i,
+        use: [
+          {
+            loader: require.resolve('../../dist/index.js'),
+            options: { injectType: 'lazyStyleTag' },
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              sourceMap: ENABLE_SOURCE_MAP,
+              modules: true,
+            },
+          },
+        ],
+      },
+
       {
         test: /\.link\.css$/i,
         use: [