css-loader 3.3.1 → 3.4.2

package/CHANGELOG.md

@@ -2,6 +2,40 @@
 
 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)
+
+
+### Bug Fixes
+
+* do not output `undefined` when sourceRoot is unavailable ([#1036](https://github.com/webpack-contrib/css-loader/issues/1036)) ([ded2a79](https://github.com/webpack-contrib/css-loader/commit/ded2a797271f2adf864bf92300621c024974bc79))
+* don't output invalid es5 code when locals do not exists ([#1035](https://github.com/webpack-contrib/css-loader/issues/1035)) ([b60e62a](https://github.com/webpack-contrib/css-loader/commit/b60e62a655719cc1779fae7d577af6ad6cf42135))
+
+## [3.4.0](https://github.com/webpack-contrib/css-loader/compare/v3.3.1...v3.4.0) (2019-12-17)
+
+
+### Features
+
+* `esModule` option ([#1026](https://github.com/webpack-contrib/css-loader/issues/1026)) ([d358cdb](https://github.com/webpack-contrib/css-loader/commit/d358cdbe2c026afafa0279003cb6c8a3eff4c419))
+
+
+### Bug Fixes
+
+* logic for order and media queries for imports ([#1018](https://github.com/webpack-contrib/css-loader/issues/1018)) ([65450d9](https://github.com/webpack-contrib/css-loader/commit/65450d9c04790ccc9fb06eac81ea6d8f3cdbfaac))
+
+### [3.3.2](https://github.com/webpack-contrib/css-loader/compare/v3.3.1...v3.3.2) (2019-12-12)
+
+
+### Bug Fixes
+
+* logic for order and media queries for imports ([1fb5134](https://github.com/webpack-contrib/css-loader/commit/1fb51340a7719b6f5b517cb71ea85ec5d45c1199))
+
 ### [3.3.1](https://github.com/webpack-contrib/css-loader/compare/v3.3.0...v3.3.1) (2019-12-12)
 
 

package/README.md

@@ -118,6 +118,7 @@ module.exports = {
 |    **[`importLoaders`](#importloaders)**    |         `{Number}`          |   `0`    | Enables/Disables or setups number of loaders applied before CSS loader |
 | **[`localsConvention`](#localsconvention)** |         `{String}`          | `'asIs'` | Style of exported classnames                                           |
 |       **[`onlyLocals`](#onlylocals)**       |         `{Boolean}`         | `false`  | Export only locals                                                     |
+|         **[`esModule`](#esmodule)**         |         `{Boolean}`         | `false`  | Use ES modules syntax                                                  |
 
 ### `url`
 
@@ -857,6 +858,34 @@ module.exports = {
 };
 ```
 
+### `esModule`
+
+Type: `Boolean`
+Default: `false`
+
+By default, `css-loader` generates JS modules that use the CommonJS modules syntax.
+There are some cases in which using ES modules is beneficial, like in the case of [module concatenation](https://webpack.js.org/plugins/module-concatenation-plugin/) and [tree shaking](https://webpack.js.org/guides/tree-shaking/).
+
+You can enable a ES module syntax using:
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.css$/i,
+        loader: 'css-loader',
+        options: {
+          esModule: true,
+        },
+      },
+    ],
+  },
+};
+```
+
 ## Examples
 
 ### Assets

package/dist/index.js

@@ -106,9 +106,10 @@ function loader(content, map, meta) {
       importLoaders,
       localsConvention
     } = options;
-    const importCode = (0, _utils.getImportCode)(this, imports, exportType, sourceMap, importLoaders);
+    const esModule = typeof options.esModule !== 'undefined' ? options.esModule : false;
+    const importCode = (0, _utils.getImportCode)(this, imports, exportType, sourceMap, importLoaders, esModule);
     const moduleCode = (0, _utils.getModuleCode)(this, result, exportType, sourceMap, replacers);
-    const exportCode = (0, _utils.getExportCode)(this, exports, exportType, replacers, localsConvention);
+    const exportCode = (0, _utils.getExportCode)(this, exports, exportType, replacers, localsConvention, esModule);
     return callback(null, [importCode, moduleCode, exportCode].join(''));
   }).catch(error => {
     callback(error.name === 'CssSyntaxError' ? new _CssSyntaxError.default(error) : error);

package/dist/options.json

@@ -94,6 +94,10 @@
     "onlyLocals": {
       "description": "Export only locals (https://github.com/webpack-contrib/css-loader#onlylocals).",
       "type": "boolean"
+    },
+    "esModule": {
+      "description": "Use the ES modules syntax (https://github.com/webpack-contrib/css-loader#esmodule).",
+      "type": "boolean"
     }
   },
   "type": "object"

package/dist/runtime/api.js

@@ -14,7 +14,7 @@ module.exports = function (useSourceMap) {
       var content = cssWithMappingToString(item, useSourceMap);
 
       if (item[2]) {
-        return "@media ".concat(item[2], "{").concat(content, "}");
+        return "@media ".concat(item[2], " {").concat(content, "}");
       }
 
       return content;
@@ -23,7 +23,7 @@ module.exports = function (useSourceMap) {
   // 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, '']];
@@ -31,30 +31,34 @@ module.exports = function (useSourceMap) {
 
     var alreadyImportedModules = {};
 
-    for (var i = 0; i < this.length; i++) {
-      // eslint-disable-next-line prefer-destructuring
-      var id = this[i][0];
+    if (dedupe) {
+      for (var i = 0; i < this.length; i++) {
+        // eslint-disable-next-line prefer-destructuring
+        var id = this[i][0];
 
-      if (id != null) {
-        alreadyImportedModules[id] = true;
+        if (id != null) {
+          alreadyImportedModules[id] = true;
+        }
       }
     }
 
     for (var _i = 0; _i < modules.length; _i++) {
-      var item = modules[_i]; // skip already imported module
-      // this implementation is not 100% perfect for weird media query combinations
-      // when a module is imported multiple times with different media queries.
-      // I hope this will never occur (Hey this way we have smaller bundles)
+      var item = [].concat(modules[_i]);
+
+      if (dedupe && alreadyImportedModules[item[0]]) {
+        // eslint-disable-next-line no-continue
+        continue;
+      }
 
-      if (item[0] == null || !alreadyImportedModules[item[0]]) {
-        if (mediaQuery && !item[2]) {
+      if (mediaQuery) {
+        if (!item[2]) {
           item[2] = mediaQuery;
-        } else if (mediaQuery) {
-          item[2] = "(".concat(item[2], ") and (").concat(mediaQuery, ")");
+        } else {
+          item[2] = "".concat(mediaQuery, " and ").concat(item[2]);
         }
-
-        list.push(item);
       }
+
+      list.push(item);
     }
   };
 
@@ -73,7 +77,7 @@ function cssWithMappingToString(item, useSourceMap) {
   if (useSourceMap && typeof btoa === 'function') {
     var sourceMapping = toComment(cssMapping);
     var sourceURLs = cssMapping.sources.map(function (source) {
-      return "/*# sourceURL=".concat(cssMapping.sourceRoot).concat(source, " */");
+      return "/*# sourceURL=".concat(cssMapping.sourceRoot || '').concat(source, " */");
     });
     return [content].concat(sourceURLs).concat([sourceMapping]).join('\n');
   }

package/dist/utils.js

@@ -148,7 +148,7 @@ function normalizeSourceMap(map) {
   // Strip any JSON XSSI avoidance prefix from the string (as documented in the source maps specification), and then parse the string as JSON.
 
   if (typeof newMap === 'string') {
-    newMap = JSON.parse(newMap.replace(/^\)]}'[^\n]*\n/, ''));
+    newMap = JSON.parse(newMap);
   } // Source maps should use forward slash because it is URLs (https://github.com/mozilla/source-map/issues/91)
   // We should normalize path because previous loaders like `sass-loader` using backslash when generate source map
 
@@ -178,7 +178,7 @@ function getImportPrefix(loaderContext, importLoaders) {
   return `-!${loadersRequest}!`;
 }
 
-function getImportCode(loaderContext, imports, exportType, sourceMap, importLoaders) {
+function getImportCode(loaderContext, imports, exportType, sourceMap, importLoaders, esModule) {
   const importItems = [];
   const codeItems = [];
   const atRuleImportNames = new Map();
@@ -186,8 +186,8 @@ function getImportCode(loaderContext, imports, exportType, sourceMap, importLoad
   let importPrefix;
 
   if (exportType === 'full') {
-    importItems.push(`var ___CSS_LOADER_API_IMPORT___ = require(${(0, _loaderUtils.stringifyRequest)(loaderContext, require.resolve('./runtime/api'))});`);
-    codeItems.push(`exports = module.exports = ___CSS_LOADER_API_IMPORT___(${sourceMap});`);
+    importItems.push(esModule ? `import ___CSS_LOADER_API_IMPORT___ from ${(0, _loaderUtils.stringifyRequest)(loaderContext, require.resolve('./runtime/api'))};` : `var ___CSS_LOADER_API_IMPORT___ = require(${(0, _loaderUtils.stringifyRequest)(loaderContext, require.resolve('./runtime/api'))});`);
+    codeItems.push(esModule ? `var exports = ___CSS_LOADER_API_IMPORT___(${sourceMap});` : `exports = ___CSS_LOADER_API_IMPORT___(${sourceMap});`);
   }
 
   imports.forEach(item => {
@@ -214,7 +214,7 @@ function getImportCode(loaderContext, imports, exportType, sourceMap, importLoad
             }
 
             importName = `___CSS_LOADER_AT_RULE_IMPORT_${atRuleImportNames.size}___`;
-            importItems.push(`var ${importName} = require(${(0, _loaderUtils.stringifyRequest)(loaderContext, importPrefix + url)});`);
+            importItems.push(esModule ? `import ${importName} from ${(0, _loaderUtils.stringifyRequest)(loaderContext, importPrefix + url)};` : `var ${importName} = require(${(0, _loaderUtils.stringifyRequest)(loaderContext, importPrefix + url)});`);
             atRuleImportNames.set(url, importName);
           }
 
@@ -225,7 +225,7 @@ function getImportCode(loaderContext, imports, exportType, sourceMap, importLoad
       case 'url':
         {
           if (urlImportNames.size === 0) {
-            importItems.push(`var ___CSS_LOADER_GET_URL_IMPORT___ = require(${(0, _loaderUtils.stringifyRequest)(loaderContext, require.resolve('./runtime/getUrl.js'))});`);
+            importItems.push(esModule ? `import ___CSS_LOADER_GET_URL_IMPORT___ from ${(0, _loaderUtils.stringifyRequest)(loaderContext, require.resolve('./runtime/getUrl.js'))};` : `var ___CSS_LOADER_GET_URL_IMPORT___ = require(${(0, _loaderUtils.stringifyRequest)(loaderContext, require.resolve('./runtime/getUrl.js'))});`);
           }
 
           const {
@@ -238,7 +238,7 @@ function getImportCode(loaderContext, imports, exportType, sourceMap, importLoad
 
           if (!importName) {
             importName = `___CSS_LOADER_URL_IMPORT_${urlImportNames.size}___`;
-            importItems.push(`var ${importName} = require(${(0, _loaderUtils.stringifyRequest)(loaderContext, url)});`);
+            importItems.push(esModule ? `import ${importName} from ${(0, _loaderUtils.stringifyRequest)(loaderContext, url)};` : `var ${importName} = require(${(0, _loaderUtils.stringifyRequest)(loaderContext, url)});`);
             urlImportNames.set(url, importName);
           }
 
@@ -255,16 +255,16 @@ function getImportCode(loaderContext, imports, exportType, sourceMap, importLoad
             url,
             media
           } = item;
-          const preparedMedia = media ? `, ${JSON.stringify(media)}` : '';
+          const preparedMedia = media ? `, ${JSON.stringify(media)}` : ', ""';
 
           if (!importPrefix) {
             importPrefix = getImportPrefix(loaderContext, importLoaders);
           }
 
-          importItems.push(`var ${importName} = require(${(0, _loaderUtils.stringifyRequest)(loaderContext, importPrefix + url)});`);
+          importItems.push(esModule ? `import ${importName} from ${(0, _loaderUtils.stringifyRequest)(loaderContext, importPrefix + url)};` : `var ${importName} = require(${(0, _loaderUtils.stringifyRequest)(loaderContext, importPrefix + url)});`);
 
           if (exportType === 'full') {
-            codeItems.push(`exports.i(${importName}${preparedMedia});`);
+            codeItems.push(`exports.i(${importName}${preparedMedia}, true);`);
           }
         }
         break;
@@ -310,76 +310,88 @@ function dashesCamelCase(str) {
   return str.replace(/-+(\w)/g, (match, firstLetter) => firstLetter.toUpperCase());
 }
 
-function getExportCode(loaderContext, exports, exportType, replacers, localsConvention) {
-  if (exports.length === 0) {
-    return '';
-  }
+function getExportCode(loaderContext, exports, exportType, replacers, localsConvention, esModule) {
+  const exportItems = [];
+  let exportLocalsCode;
 
-  const items = [];
-
-  const addExportedItem = (name, value) => {
-    items.push(`\t${JSON.stringify(name)}: ${JSON.stringify(value)}`);
-  };
+  if (exports.length > 0) {
+    const exportLocals = [];
 
-  exports.forEach(item => {
-    const {
-      name,
-      value
-    } = item;
+    const addExportedLocal = (name, value) => {
+      exportLocals.push(`\t${JSON.stringify(name)}: ${JSON.stringify(value)}`);
+    };
 
-    switch (localsConvention) {
-      case 'camelCase':
-        {
-          addExportedItem(name, value);
-          const modifiedName = (0, _camelcase.default)(name);
+    exports.forEach(item => {
+      const {
+        name,
+        value
+      } = item;
+
+      switch (localsConvention) {
+        case 'camelCase':
+          {
+            addExportedLocal(name, value);
+            const modifiedName = (0, _camelcase.default)(name);
+
+            if (modifiedName !== name) {
+              addExportedLocal(modifiedName, value);
+            }
 
-          if (modifiedName !== name) {
-            addExportedItem(modifiedName, value);
+            break;
           }
 
-          break;
-        }
+        case 'camelCaseOnly':
+          {
+            addExportedLocal((0, _camelcase.default)(name), value);
+            break;
+          }
 
-      case 'camelCaseOnly':
-        {
-          addExportedItem((0, _camelcase.default)(name), value);
-          break;
-        }
+        case 'dashes':
+          {
+            addExportedLocal(name, value);
+            const modifiedName = dashesCamelCase(name);
 
-      case 'dashes':
-        {
-          addExportedItem(name, value);
-          const modifiedName = dashesCamelCase(name);
+            if (modifiedName !== name) {
+              addExportedLocal(modifiedName, value);
+            }
 
-          if (modifiedName !== name) {
-            addExportedItem(modifiedName, value);
+            break;
           }
 
-          break;
-        }
+        case 'dashesOnly':
+          {
+            addExportedLocal(dashesCamelCase(name), value);
+            break;
+          }
 
-      case 'dashesOnly':
-        {
-          addExportedItem(dashesCamelCase(name), value);
+        case 'asIs':
+        default:
+          addExportedLocal(name, value);
           break;
-        }
+      }
+    });
+    exportLocalsCode = exportLocals.join(',\n');
+    replacers.forEach(replacer => {
+      if (replacer.type === 'icss-import') {
+        const {
+          replacementName,
+          importName,
+          localName
+        } = replacer;
+        exportLocalsCode = exportLocalsCode.replace(new RegExp(replacementName, 'g'), () => exportType === 'locals' ? `" + ${importName}[${JSON.stringify(localName)}] + "` : `" + ${importName}.locals[${JSON.stringify(localName)}] + "`);
+      }
+    });
+  }
 
-      case 'asIs':
-      default:
-        addExportedItem(name, value);
-        break;
-    }
-  });
-  let exportCode = `// Exports\n${exportType === 'locals' ? 'module.exports' : 'exports.locals'} = {\n${items.join(',\n')}\n};`;
-  replacers.forEach(replacer => {
-    if (replacer.type === 'icss-import') {
-      const {
-        replacementName,
-        importName,
-        localName
-      } = replacer;
-      exportCode = exportCode.replace(new RegExp(replacementName, 'g'), () => exportType === 'locals' ? `" + ${importName}[${JSON.stringify(localName)}] + "` : `" + ${importName}.locals[${JSON.stringify(localName)}] + "`);
+  if (exportType === 'locals') {
+    exportItems.push(`${esModule ? 'export default' : 'module.exports ='} ${exportLocalsCode ? `{\n${exportLocalsCode}\n}` : '{}'};`);
+  } else {
+    if (exportLocalsCode) {
+      exportItems.push(`exports.locals = {\n${exportLocalsCode}\n};`);
     }
-  });
-  return exportCode;
+
+    exportItems.push(`${esModule ? 'export default' : 'module.exports ='} exports;`);
+  }
+
+  return `// Exports\n${exportItems.join('\n')}\n`;
 }

package/package.json

@@ -1,44 +1,46 @@
 {
   "name": "css-loader",
-  "version": "3.3.1",
+  "version": "3.4.2",
   "description": "css loader module for webpack",
   "license": "MIT",
   "repository": "webpack-contrib/css-loader",
   "author": "Tobias Koppers @sokra",
   "homepage": "https://github.com/webpack-contrib/css-loader",
   "bugs": "https://github.com/webpack-contrib/css-loader/issues",
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/webpack"
+  },
   "main": "dist/cjs.js",
   "engines": {
     "node": ">= 8.9.0"
   },
   "scripts": {
     "start": "npm run build -- -w",
-    "prebuild": "npm run clean",
-    "build": "cross-env NODE_ENV=production babel src -d dist --ignore \"src/**/*.test.js\" --copy-files",
+    "clean": "del-cli dist",
     "validate:runtime": "es-check es5 \"dist/runtime/**/*.js\"",
+    "prebuild": "npm run clean",
+    "build": "cross-env NODE_ENV=production babel src -d dist --copy-files",
     "postbuild": "npm run validate:runtime",
-    "clean": "del-cli dist",
     "commitlint": "commitlint --from=master",
-    "lint:prettier": "prettier \"{**/*,*}.{js,json,md,yml,css}\" --list-different",
-    "lint:js": "eslint --cache src test",
-    "lint": "npm-run-all -l -p \"lint:**\"",
-    "prepare": "npm run build",
-    "release": "standard-version",
     "security": "npm audit",
+    "lint:prettier": "prettier \"{**/*,*}.{js,json,md,yml,css,ts}\" --list-different",
+    "lint:js": "eslint --cache .",
+    "lint": "npm-run-all -l -p \"lint:**\"",
     "test:only": "cross-env NODE_ENV=test jest",
-    "test:watch": "cross-env NODE_ENV=test jest --watch",
-    "test:coverage": "cross-env NODE_ENV=test jest --collectCoverageFrom=\"src/**/*.js\" --coverage",
+    "test:watch": "npm run test:only -- --watch",
+    "test:coverage": "npm run test:only -- --collectCoverageFrom=\"src/**/*.js\" --coverage",
     "pretest": "npm run lint",
-    "test": "cross-env NODE_ENV=test npm run test:coverage",
+    "test": "npm run test:coverage",
+    "prepare": "npm run build",
+    "release": "standard-version",
     "defaults": "webpack-defaults"
   },
   "files": [
-    "dist/",
-    "lib/",
-    "index.js"
+    "dist"
   ],
   "peerDependencies": {
-    "webpack": "^4.0.0"
+    "webpack": "^4.0.0 || ^5.0.0"
   },
   "dependencies": {
     "camelcase": "^5.3.1",
@@ -55,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",
-    "@webpack-contrib/defaults": "^5.0.2",
+    "@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": "^9.0.0",
+    "jest-junit": "^10.0.0",
     "lint-staged": "^9.5.0",
-    "memory-fs": "^0.5.0",
+    "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.2"
+    "webpack": "^4.41.5"
   },
   "keywords": [
     "webpack",