fix: do not duplicate css on composes

webpack-contrib · Jan 10, 2020 · 6a3f57f · 6a3f57f
1 parent 7c9f47b
commit 6a3f57f
Show file tree

Hide file tree

Showing 6 changed files with 189 additions and 84 deletions.
diff --git a/src/runtime/api.js b/src/runtime/api.js
@@ -22,15 +22,33 @@ module.exports = function(useSourceMap) {
 
   // import a list of modules into the list
   // eslint-disable-next-line func-names
-  list.i = function(modules, mediaQuery) {
+  list.i = function(modules, mediaQuery, dedupe) {
     if (typeof modules === 'string') {
       // eslint-disable-next-line no-param-reassign
       modules = [[null, modules, '']];
     }
 
+    const alreadyImportedModules = {};
+
+    if (dedupe) {
+      for (let i = 0; i < this.length; i++) {
+        // eslint-disable-next-line prefer-destructuring
+        const id = this[i][0];
+
+        if (id != null) {
+          alreadyImportedModules[id] = true;
+        }
+      }
+    }
+
     for (let i = 0; i < modules.length; i++) {
       const item = [].concat(modules[i]);
 
+      if (dedupe && alreadyImportedModules[item[0]]) {
+        // eslint-disable-next-line no-continue
+        continue;
+      }
+
       if (mediaQuery) {
         if (!item[2]) {
           item[2] = mediaQuery;

diff --git a/src/utils.js b/src/utils.js
@@ -329,7 +329,7 @@ function getImportCode(
       case 'icss-import':
         {
           const { importName, url, media } = item;
-          const preparedMedia = media ? `, ${JSON.stringify(media)}` : '';
+          const preparedMedia = media ? `, ${JSON.stringify(media)}` : ', ""';
 
           if (!importPrefix) {
             importPrefix = getImportPrefix(loaderContext, importLoaders);
@@ -348,7 +348,7 @@ function getImportCode(
           );
 
           if (exportType === 'full') {
-            codeItems.push(`exports.i(${importName}${preparedMedia});`);
+            codeItems.push(`exports.i(${importName}${preparedMedia}, true);`);
           }
         }
         break;

diff --git a/test/__snapshots__/icss.test.js.snap b/test/__snapshots__/icss.test.js.snap
@@ -176,7 +176,7 @@ exports[`ICSS show work with the case "import": module 1`] = `
 var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../../../src/runtime/api.js\\");
 var ___CSS_LOADER_ICSS_IMPORT_0___ = require(\\"-!../../../../../src/index.js??[ident]!./vars.css\\");
 exports = ___CSS_LOADER_API_IMPORT___(false);
-exports.i(___CSS_LOADER_ICSS_IMPORT_0___);
+exports.i(___CSS_LOADER_ICSS_IMPORT_0___, \\"\\", true);
 // Module
 exports.push([module.id, \\".className {\\\\n  color: \\" + ___CSS_LOADER_ICSS_IMPORT_0___.locals[\\"primary-color\\"] + \\";\\\\n}\\\\n\\", \\"\\"]);
 // Exports
@@ -215,7 +215,7 @@ exports[`ICSS show work with the case "import-reserved-keywords": module 1`] = `
 var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../../../src/runtime/api.js\\");
 var ___CSS_LOADER_ICSS_IMPORT_0___ = require(\\"-!../../../../../src/index.js??[ident]!./vars.css\\");
 exports = ___CSS_LOADER_API_IMPORT___(false);
-exports.i(___CSS_LOADER_ICSS_IMPORT_0___);
+exports.i(___CSS_LOADER_ICSS_IMPORT_0___, \\"\\", true);
 // Module
 exports.push([module.id, \\".className {\\\\n  color: \\" + ___CSS_LOADER_ICSS_IMPORT_0___.locals[\\"primary-color\\"] + \\";\\\\n  display: \\" + ___CSS_LOADER_ICSS_IMPORT_0___.locals[\\"secondary-color\\"] + \\";\\\\n}\\\\n\\", \\"\\"]);
 // Exports