fix: do not duplicate css on composes (#1040)

package.json

@@ -57,38 +57,38 @@
     "schema-utils": "^2.6.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.7.4",
-    "@babel/core": "^7.7.4",
-    "@babel/preset-env": "^7.7.4",
-    "@commitlint/cli": "^8.2.0",
-    "@commitlint/config-conventional": "^8.2.0",
+    "@babel/cli": "^7.7.7",
+    "@babel/core": "^7.7.7",
+    "@babel/preset-env": "^7.7.7",
+    "@commitlint/cli": "^8.3.4",
+    "@commitlint/config-conventional": "^8.3.4",
     "@webpack-contrib/defaults": "^6.3.0",
     "@webpack-contrib/eslint-config-webpack": "^3.0.0",
     "babel-jest": "^24.9.0",
-    "commitlint-azure-pipelines-cli": "^1.0.2",
+    "commitlint-azure-pipelines-cli": "^1.0.3",
     "cross-env": "^6.0.3",
     "del": "^5.1.0",
     "del-cli": "^3.0.0",
     "es-check": "^5.1.0",
-    "eslint": "^6.7.1",
-    "eslint-config-prettier": "^6.7.0",
-    "eslint-plugin-import": "^2.18.2",
+    "eslint": "^6.8.0",
+    "eslint-config-prettier": "^6.9.0",
+    "eslint-plugin-import": "^2.19.1",
     "file-loader": "^5.0.2",
-    "husky": "^3.1.0",
+    "husky": "^4.0.6",
     "jest": "^24.9.0",
     "jest-junit": "^10.0.0",
     "lint-staged": "^9.5.0",
-    "memfs": "^3.0.1",
+    "memfs": "^3.0.3",
     "npm-run-all": "^4.1.5",
     "postcss-loader": "^3.0.0",
     "postcss-preset-env": "^6.7.0",
     "prettier": "^1.19.1",
-    "sass": "^1.23.7",
-    "sass-loader": "^8.0.0",
+    "sass": "^1.24.4",
+    "sass-loader": "^8.0.1",
     "standard-version": "^7.0.1",
     "strip-ansi": "^6.0.0",
     "url-loader": "^3.0.0",
-    "webpack": "^4.41.3"
+    "webpack": "^4.41.5"
   },
   "keywords": [
     "webpack",

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;

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;

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