CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [3.4.2](https://github.com/webpack-contrib/css-loader/compare/v3.4.1...v3.4.2) (2020-01-10)
+
+
+### Bug Fixes
+
+* do not duplicate css on `composes` ([#1040](https://github.com/webpack-contrib/css-loader/issues/1040)) ([df79602](https://github.com/webpack-contrib/css-loader/commit/df7960277be20ec80e9be1a41ac53baf69847fa0))
+
 ### [3.4.1](https://github.com/webpack-contrib/css-loader/compare/v3.4.0...v3.4.1) (2020-01-03)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "css-loader",
-  "version": "3.4.1",
+  "version": "3.4.2",
   "description": "css loader module for webpack",
   "license": "MIT",
   "repository": "webpack-contrib/css-loader",
@@ -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

test/fixtures/modules/dedupe/buttons/button.css

@@ -0,0 +1,6 @@
+.button
+{
+  border:none;
+  padding:7px 15px;
+  cursor:pointer;
+}

test/fixtures/modules/dedupe/buttons/primary-button.css

@@ -0,0 +1,6 @@
+.primaryButton
+{
+  composes:button from './button.css';
+  background-color:blue;
+  color:white;
+}

test/fixtures/modules/dedupe/buttons/secondary-button.css

@@ -0,0 +1,6 @@
+.secondaryButton
+{
+  composes:button from './button.css';
+  background-color:#555;
+  color:white;
+}

test/fixtures/modules/dedupe/source.css

@@ -0,0 +1,9 @@
+.nextButton
+{
+  composes:primaryButton from './buttons/primary-button.css';
+}
+
+.backButton
+{
+  composes:secondaryButton from './buttons/secondary-button.css';
+}

test/fixtures/modules/dedupe/source.js

@@ -0,0 +1,5 @@
+import css from './source.css';
+
+__export__ = css;
+
+export default css;

test/modules-option.test.js

@@ -549,4 +549,20 @@ describe('"modules" option', () => {
     expect(getWarnings(stats)).toMatchSnapshot('warnings');
     expect(getErrors(stats)).toMatchSnapshot('errors');
   });
+
+  it('should dedupe same modules in one module (issue #1037)', async () => {
+    const compiler = getCompiler('./modules/dedupe/source.js', {
+      modules: true,
+    });
+    const stats = await compile(compiler);
+
+    expect(
+      getModuleSource('./modules/dedupe/source.css', stats)
+    ).toMatchSnapshot('module');
+    expect(getExecutedCode('main.bundle.js', compiler, stats)).toMatchSnapshot(
+      'result'
+    );
+    expect(getWarnings(stats)).toMatchSnapshot('warnings');
+    expect(getErrors(stats)).toMatchSnapshot('errors');
+  });
 });

test/runtime/api.test.js

@@ -101,9 +101,7 @@ describe('api', () => {
     expect(m.toString()).toMatchSnapshot();
   });
 
-  it('should toString without source mapping if btoa not available', () => {
-    global.btoa = null;
-
+  it('should toString with a source map without "sourceRoot"', () => {
     const m = api(true);
 
     m.push([
@@ -114,14 +112,15 @@ describe('api', () => {
         file: 'test.scss',
         sources: ['./path/to/test.scss'],
         mappings: 'AAAA;',
-        sourceRoot: 'webpack://',
       },
     ]);
 
     expect(m.toString()).toMatchSnapshot();
   });
 
-  it.only('should toString with a source map without "sourceRoot"', () => {
+  it('should toString without source mapping if btoa not available', () => {
+    global.btoa = null;
+
     const m = api(true);
 
     m.push([
@@ -132,6 +131,7 @@ describe('api', () => {
         file: 'test.scss',
         sources: ['./path/to/test.scss'],
         mappings: 'AAAA;',
+        sourceRoot: 'webpack://',
       },
     ]);