css-loader 3.3.0 → 3.4.1

package/CHANGELOG.md

@@ -2,6 +2,41 @@
 
 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.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)
+
+
+### Bug Fixes
+
+* better handling url functions and an url in `@import` at-rules
+* reduce count of `require` ([#1014](https://github.com/webpack-contrib/css-loader/issues/1014)) ([e091d27](https://github.com/webpack-contrib/css-loader/commit/e091d2709c29ac57ed0106af8ec3b581cbda7a9c))
+
 ## [3.3.0](https://github.com/webpack-contrib/css-loader/compare/v3.2.1...v3.3.0) (2019-12-09)
 
 

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

@@ -36,22 +36,7 @@ function loader(content, map, meta) {
     baseDataPath: 'options'
   });
   const callback = this.async();
-  const sourceMap = options.sourceMap || false; // Some loaders (example `"postcss-loader": "1.x.x"`) always generates source map, we should remove it
-  // eslint-disable-next-line no-param-reassign
-
-  map = sourceMap && map ? (0, _utils.normalizeSourceMap)(map) : null; // Reuse CSS AST (PostCSS AST e.g 'postcss-loader') to avoid reparsing
-
-  if (meta) {
-    const {
-      ast
-    } = meta;
-
-    if (ast && ast.type === 'postcss' && ast.version === _package.default.version) {
-      // eslint-disable-next-line no-param-reassign
-      content = ast.root;
-    }
-  }
-
+  const sourceMap = options.sourceMap || false;
   const plugins = [];
 
   if (options.modules) {
@@ -71,13 +56,26 @@ function loader(content, map, meta) {
     plugins.push((0, _plugins.urlParser)({
       filter: (0, _utils.getFilter)(options.url, this.resourcePath, value => (0, _loaderUtils.isUrlRequest)(value))
     }));
+  } // Reuse CSS AST (PostCSS AST e.g 'postcss-loader') to avoid reparsing
+
+
+  if (meta) {
+    const {
+      ast
+    } = meta;
+
+    if (ast && ast.type === 'postcss' && ast.version === _package.default.version) {
+      // eslint-disable-next-line no-param-reassign
+      content = ast.root;
+    }
   }
 
   (0, _postcss.default)(plugins).process(content, {
     from: this.remainingRequest.split('!').pop(),
     to: this.currentRequest.split('!').pop(),
     map: options.sourceMap ? {
-      prev: map,
+      // Some loaders (example `"postcss-loader": "1.x.x"`) always generates source map, we should remove it
+      prev: sourceMap && map ? (0, _utils.normalizeSourceMap)(map) : null,
       inline: false,
       annotation: false
     } : false
@@ -102,20 +100,17 @@ function loader(content, map, meta) {
           replacers.push(message.value);
           break;
       }
-    } // Run other loader (`postcss-loader`, `sass-loader` and etc) for importing CSS
-
-
-    const apiCode = exportType === 'full' ? (0, _utils.getApiCode)(this, sourceMap) : '';
-    const importCode = imports.length > 0 ? (0, _utils.getImportCode)(this, imports, {
-      importLoaders: options.importLoaders,
-      exportType
-    }) : '';
-    const moduleCode = exportType === 'full' ? (0, _utils.getModuleCode)(this, result, replacers, sourceMap) : '';
-    const exportCode = exports.length > 0 ? (0, _utils.getExportCode)(this, exports, replacers, {
-      localsConvention: options.localsConvention,
-      exportType
-    }) : '';
-    return callback(null, [apiCode, importCode, moduleCode, exportCode].join(''));
+    }
+
+    const {
+      importLoaders,
+      localsConvention
+    } = options;
+    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, 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/plugins/postcss-icss-parser.js

@@ -9,44 +9,68 @@ var _postcss = _interopRequireDefault(require("postcss"));
 
 var _icssUtils = require("icss-utils");
 
+var _loaderUtils = require("loader-utils");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const pluginName = 'postcss-icss-parser';
 
+function normalizeIcssImports(icssImports) {
+  return Object.keys(icssImports).reduce((accumulator, url) => {
+    const tokensMap = icssImports[url];
+    const tokens = Object.keys(tokensMap);
+
+    if (tokens.length === 0) {
+      return accumulator;
+    }
+
+    const normalizedUrl = (0, _loaderUtils.urlToRequest)(url);
+
+    if (!accumulator[normalizedUrl]) {
+      // eslint-disable-next-line no-param-reassign
+      accumulator[normalizedUrl] = tokensMap;
+    } else {
+      // eslint-disable-next-line no-param-reassign
+      accumulator[normalizedUrl] = { ...accumulator[normalizedUrl],
+        ...tokensMap
+      };
+    }
+
+    return accumulator;
+  }, {});
+}
+
 var _default = _postcss.default.plugin(pluginName, () => function process(css, result) {
   const importReplacements = Object.create(null);
   const {
     icssImports,
     icssExports
   } = (0, _icssUtils.extractICSS)(css);
-  Object.keys(icssImports).forEach((url, importIndex) => {
-    const tokens = Object.keys(icssImports[url]);
-
-    if (tokens.length === 0) {
-      return;
-    }
-
+  const normalizedIcssImports = normalizeIcssImports(icssImports);
+  Object.keys(normalizedIcssImports).forEach((url, importIndex) => {
     const importName = `___CSS_LOADER_ICSS_IMPORT_${importIndex}___`;
     result.messages.push({
       pluginName,
       type: 'import',
       value: {
         type: 'icss-import',
-        name: importName,
+        importName,
         url
       }
     });
+    const tokenMap = normalizedIcssImports[url];
+    const tokens = Object.keys(tokenMap);
     tokens.forEach((token, replacementIndex) => {
-      const name = `___CSS_LOADER_ICSS_IMPORT_${importIndex}_REPLACEMENT_${replacementIndex}___`;
-      const localName = icssImports[url][token];
-      importReplacements[token] = name;
+      const replacementName = `___CSS_LOADER_ICSS_IMPORT_${importIndex}_REPLACEMENT_${replacementIndex}___`;
+      const localName = tokenMap[token];
+      importReplacements[token] = replacementName;
       result.messages.push({
         pluginName,
         type: 'replacer',
         value: {
           type: 'icss-import',
-          name,
           importName,
+          replacementName,
           localName
         }
       });

package/dist/plugins/postcss-import-parser.js

@@ -9,21 +9,33 @@ var _postcss = _interopRequireDefault(require("postcss"));
 
 var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));
 
+var _loaderUtils = require("loader-utils");
+
+var _utils = require("../utils");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const pluginName = 'postcss-import-parser';
 
-function getArg(nodes) {
-  return nodes.length !== 0 && nodes[0].type === 'string' ? nodes[0].value : _postcssValueParser.default.stringify(nodes);
-}
-
-function getUrl(node) {
+function getParsedValue(node) {
   if (node.type === 'function' && node.value.toLowerCase() === 'url') {
-    return getArg(node.nodes);
+    const {
+      nodes
+    } = node;
+    const isStringValue = nodes.length !== 0 && nodes[0].type === 'string';
+    const url = isStringValue ? nodes[0].value : _postcssValueParser.default.stringify(nodes);
+    return {
+      url,
+      isStringValue
+    };
   }
 
   if (node.type === 'string') {
-    return node.value;
+    const url = node.value;
+    return {
+      url,
+      isStringValue: true
+    };
   }
 
   return null;
@@ -38,12 +50,27 @@ function parseImport(params) {
     return null;
   }
 
-  const url = getUrl(nodes[0]);
+  const value = getParsedValue(nodes[0]);
+
+  if (!value) {
+    return null;
+  }
+
+  let {
+    url
+  } = value;
 
-  if (!url || url.trim().length === 0) {
+  if (url.trim().length === 0) {
     return null;
   }
 
+  if ((0, _loaderUtils.isUrlRequest)(url)) {
+    const {
+      isStringValue
+    } = value;
+    url = (0, _utils.normalizeUrl)(url, isStringValue);
+  }
+
   return {
     url,
     media: _postcssValueParser.default.stringify(nodes.slice(1)).trim().toLowerCase()
@@ -51,7 +78,7 @@ function parseImport(params) {
 }
 
 function walkAtRules(css, result, filter) {
-  const items = new Map();
+  const items = [];
   css.walkAtRules(/^import$/i, atRule => {
     // Convert only top-level @import
     if (atRule.parent.type !== 'root') {
@@ -79,44 +106,23 @@ function walkAtRules(css, result, filter) {
     }
 
     atRule.remove();
-    const {
-      url,
-      media
-    } = parsed;
-    const value = items.get(url);
-
-    if (!value) {
-      items.set(url, new Set([media]));
-    } else {
-      value.add(media);
-    }
+    items.push(parsed);
   });
   return items;
 }
 
 var _default = _postcss.default.plugin(pluginName, options => function process(css, result) {
   const items = walkAtRules(css, result, options.filter);
-  [...items].reduce((accumulator, currentValue) => {
-    const [url, medias] = currentValue;
-    medias.forEach(media => {
-      accumulator.push({
-        url,
-        media
-      });
-    });
-    return accumulator;
-  }, []).forEach((item, index) => {
+  items.forEach(item => {
     const {
       url,
       media
     } = item;
-    const name = `___CSS_LOADER_AT_RULE_IMPORT_${index}___`;
     result.messages.push({
       pluginName,
       type: 'import',
       value: {
         type: '@import',
-        name,
         url,
         media
       }

package/dist/plugins/postcss-url-parser.js

@@ -9,6 +9,8 @@ var _postcss = _interopRequireDefault(require("postcss"));
 
 var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));
 
+var _utils = require("../utils");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const pluginName = 'postcss-url-parser';
@@ -20,10 +22,6 @@ function getNodeFromUrlFunc(node) {
   return node.nodes && node.nodes[0];
 }
 
-function getUrlFromUrlFunc(node) {
-  return node.nodes.length !== 0 && node.nodes[0].type === 'string' ? node.nodes[0].value : _postcssValueParser.default.stringify(node.nodes);
-}
-
 function walkUrls(parsed, callback) {
   parsed.walk(node => {
     if (node.type !== 'function') {
@@ -31,7 +29,12 @@ function walkUrls(parsed, callback) {
     }
 
     if (isUrlFunc.test(node.value)) {
-      callback(getNodeFromUrlFunc(node), getUrlFromUrlFunc(node), false); // Do not traverse inside `url`
+      const {
+        nodes
+      } = node;
+      const isStringValue = nodes.length !== 0 && nodes[0].type === 'string';
+      const url = isStringValue ? nodes[0].value : _postcssValueParser.default.stringify(nodes);
+      callback(getNodeFromUrlFunc(node), url, false, isStringValue); // Do not traverse inside `url`
       // eslint-disable-next-line consistent-return
 
       return false;
@@ -39,12 +42,22 @@ function walkUrls(parsed, callback) {
 
     if (isImageSetFunc.test(node.value)) {
       node.nodes.forEach(nNode => {
-        if (nNode.type === 'function' && isUrlFunc.test(nNode.value)) {
-          callback(getNodeFromUrlFunc(nNode), getUrlFromUrlFunc(nNode), false);
+        const {
+          type,
+          value
+        } = nNode;
+
+        if (type === 'function' && isUrlFunc.test(value)) {
+          const {
+            nodes
+          } = nNode;
+          const isStringValue = nodes.length !== 0 && nodes[0].type === 'string';
+          const url = isStringValue ? nodes[0].value : _postcssValueParser.default.stringify(nodes);
+          callback(getNodeFromUrlFunc(nNode), url, false, isStringValue);
         }
 
-        if (nNode.type === 'string') {
-          callback(nNode, nNode.value, true);
+        if (type === 'string') {
+          callback(nNode, value, true, true);
         }
       }); // Do not traverse inside `image-set`
       // eslint-disable-next-line consistent-return
@@ -61,7 +74,7 @@ function getUrlsFromValue(value, result, filter, decl) {
 
   const parsed = (0, _postcssValueParser.default)(value);
   const urls = [];
-  walkUrls(parsed, (node, url, needQuotes) => {
+  walkUrls(parsed, (node, url, needQuotes, isStringValue) => {
     if (url.trim().replace(/\\[\r\n]/g, '').length === 0) {
       result.warn(`Unable to find uri in '${decl ? decl.toString() : value}'`, {
         node: decl
@@ -73,8 +86,10 @@ function getUrlsFromValue(value, result, filter, decl) {
       return;
     }
 
-    const [normalizedUrl, singleQuery, hashValue] = url.split(/(\?)?#/);
+    const splittedUrl = url.split(/(\?)?#/);
+    const [urlWithoutHash, singleQuery, hashValue] = splittedUrl;
     const hash = singleQuery || hashValue ? `${singleQuery ? '?' : ''}${hashValue ? `#${hashValue}` : ''}` : '';
+    const normalizedUrl = (0, _utils.normalizeUrl)(urlWithoutHash, isStringValue);
     urls.push({
       node,
       url: normalizedUrl,
@@ -138,51 +153,51 @@ function collectUniqueUrlsWithNodes(array) {
 
 var _default = _postcss.default.plugin(pluginName, options => function process(css, result) {
   const traversed = walkDecls(css, result, options.filter);
-  const paths = collectUniqueUrlsWithNodes(flatten(traversed.map(item => item.urls)));
+  const flattenTraversed = flatten(traversed.map(item => item.urls));
+  const urlsWithNodes = collectUniqueUrlsWithNodes(flattenTraversed);
   const replacers = new Map();
-  paths.forEach((path, index) => {
+  urlsWithNodes.forEach((urlWithNodes, index) => {
     const {
       url,
       hash,
       needQuotes,
       nodes
-    } = path;
-    const name = `___CSS_LOADER_URL_IMPORT_${index}___`;
+    } = urlWithNodes;
+    const replacementName = `___CSS_LOADER_URL_REPLACEMENT_${index}___`;
     result.messages.push({
       pluginName,
       type: 'import',
       value: {
         type: 'url',
-        name,
+        replacementName,
         url,
         needQuotes,
-        hash,
-        index
+        hash
       }
     }, {
       pluginName,
       type: 'replacer',
       value: {
         type: 'url',
-        name
+        replacementName
       }
     });
     nodes.forEach(node => {
-      replacers.set(node, name);
+      replacers.set(node, replacementName);
     });
   });
   traversed.forEach(item => {
     walkUrls(item.parsed, node => {
-      const name = replacers.get(node);
+      const replacementName = replacers.get(node);
 
-      if (!name) {
+      if (!replacementName) {
         return;
       } // eslint-disable-next-line no-param-reassign
 
 
       node.type = 'word'; // eslint-disable-next-line no-param-reassign
 
-      node.value = name;
+      node.value = replacementName;
     }); // eslint-disable-next-line no-param-reassign
 
     item.decl.value = item.parsed.toString();

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;
@@ -29,32 +29,18 @@ module.exports = function (useSourceMap) {
       modules = [[null, modules, '']];
     }
 
-    var alreadyImportedModules = {};
+    for (var i = 0; i < modules.length; i++) {
+      var item = [].concat(modules[i]);
 
-    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;
-      }
-    }
-
-    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)
-
-      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 +59,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

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.normalizeUrl = normalizeUrl;
 exports.getFilter = getFilter;
 exports.getModulesPlugins = getModulesPlugins;
 exports.normalizeSourceMap = normalizeSourceMap;
-exports.getApiCode = getApiCode;
 exports.getImportCode = getImportCode;
 exports.getModuleCode = getModuleCode;
 exports.getExportCode = getExportCode;
@@ -39,16 +39,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
   MIT License http://www.opensource.org/licenses/mit-license.php
   Author Tobias Koppers @sokra
 */
-function getImportPrefix(loaderContext, importLoaders) {
-  if (importLoaders === false) {
-    return '';
-  }
-
-  const numberImportedLoaders = parseInt(importLoaders, 10) || 0;
-  const loadersRequest = loaderContext.loaders.slice(loaderContext.loaderIndex, loaderContext.loaderIndex + 1 + numberImportedLoaders).map(x => x.request).join('!');
-  return `-!${loadersRequest}!`;
-}
-
 const whitespace = '[\\x20\\t\\r\\n\\f]';
 const unescapeRegExp = new RegExp(`\\\\([\\da-f]{1,6}${whitespace}?|(${whitespace})|.)`, 'ig');
 
@@ -91,6 +81,16 @@ function getLocalIdent(loaderContext, localIdentName, localName, options) {
   }).replace(/\\\[local\\\]/gi, localName);
 }
 
+function normalizeUrl(url, isStringValue) {
+  let normalizedUrl = url;
+
+  if (isStringValue && /\\[\n]/.test(normalizedUrl)) {
+    normalizedUrl = normalizedUrl.replace(/\\[\n]/g, '');
+  }
+
+  return (0, _loaderUtils.urlToRequest)(decodeURIComponent(unescape(normalizedUrl)));
+}
+
 function getFilter(filter, resourcePath, defaultFilter = null) {
   return item => {
     if (defaultFilter && !defaultFilter(item)) {
@@ -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
 
@@ -168,73 +168,117 @@ function normalizeSourceMap(map) {
   return newMap;
 }
 
-function getApiCode(loaderContext, sourceMap) {
-  const url = (0, _loaderUtils.stringifyRequest)(loaderContext, require.resolve('./runtime/api'));
-  return `exports = module.exports = require(${url})(${sourceMap});\n`;
+function getImportPrefix(loaderContext, importLoaders) {
+  if (importLoaders === false) {
+    return '';
+  }
+
+  const numberImportedLoaders = parseInt(importLoaders, 10) || 0;
+  const loadersRequest = loaderContext.loaders.slice(loaderContext.loaderIndex, loaderContext.loaderIndex + 1 + numberImportedLoaders).map(x => x.request).join('!');
+  return `-!${loadersRequest}!`;
 }
 
-function getImportCode(loaderContext, imports, options) {
+function getImportCode(loaderContext, imports, exportType, sourceMap, importLoaders, esModule) {
   const importItems = [];
   const codeItems = [];
+  const atRuleImportNames = new Map();
   const urlImportNames = new Map();
-  let hasUrlHelperCode = false;
   let importPrefix;
+
+  if (exportType === 'full') {
+    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 => {
-    if (item.type === '@import' || item.type === 'icss-import') {
-      const media = item.media ? `, ${JSON.stringify(item.media)}` : '';
+    // eslint-disable-next-line default-case
+    switch (item.type) {
+      case '@import':
+        {
+          const {
+            url,
+            media
+          } = item;
+          const preparedMedia = media ? `, ${JSON.stringify(media)}` : '';
+
+          if (!(0, _loaderUtils.isUrlRequest)(url)) {
+            codeItems.push(`exports.push([module.id, ${JSON.stringify(`@import url(${url});`)}${preparedMedia}]);`);
+            return;
+          }
 
-      if (!(0, _loaderUtils.isUrlRequest)(item.url)) {
-        const url = JSON.stringify(`@import url(${item.url});`);
-        codeItems.push(`exports.push([module.id, ${url}${media}]);`);
-        return;
-      }
+          let importName = atRuleImportNames.get(url);
 
-      if (!importPrefix) {
-        importPrefix = getImportPrefix(loaderContext, options.importLoaders);
-      }
+          if (!importName) {
+            if (!importPrefix) {
+              importPrefix = getImportPrefix(loaderContext, importLoaders);
+            }
 
-      const url = (0, _loaderUtils.stringifyRequest)(loaderContext, importPrefix + (0, _loaderUtils.urlToRequest)(item.url));
-      importItems.push(`var ${item.name} = require(${url});`);
+            importName = `___CSS_LOADER_AT_RULE_IMPORT_${atRuleImportNames.size}___`;
+            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);
+          }
 
-      if (options.exportType === 'full') {
-        codeItems.push(`exports.i(${item.name}${media});`);
-      }
-    }
+          codeItems.push(`exports.i(${importName}${preparedMedia});`);
+        }
+        break;
 
-    if (item.type === 'url') {
-      if (!hasUrlHelperCode) {
-        const pathToGetUrl = require.resolve('./runtime/getUrl.js');
+      case 'url':
+        {
+          if (urlImportNames.size === 0) {
+            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 url = (0, _loaderUtils.stringifyRequest)(loaderContext, pathToGetUrl);
-        importItems.push(`var ___CSS_LOADER_GET_URL_IMPORT___ = require(${url});`);
-        hasUrlHelperCode = true;
-      }
+          const {
+            replacementName,
+            url,
+            hash,
+            needQuotes
+          } = item;
+          let importName = urlImportNames.get(url);
+
+          if (!importName) {
+            importName = `___CSS_LOADER_URL_IMPORT_${urlImportNames.size}___`;
+            importItems.push(esModule ? `import ${importName} from ${(0, _loaderUtils.stringifyRequest)(loaderContext, url)};` : `var ${importName} = require(${(0, _loaderUtils.stringifyRequest)(loaderContext, url)});`);
+            urlImportNames.set(url, importName);
+          }
 
-      const {
-        name,
-        url,
-        hash,
-        needQuotes,
-        index
-      } = item;
-      let importName = urlImportNames.get(url);
+          const getUrlOptions = [].concat(hash ? [`hash: ${JSON.stringify(hash)}`] : []).concat(needQuotes ? 'needQuotes: true' : []);
+          const preparedOptions = getUrlOptions.length > 0 ? `, { ${getUrlOptions.join(', ')} }` : '';
+          codeItems.push(`var ${replacementName} = ___CSS_LOADER_GET_URL_IMPORT___(${importName}${preparedOptions});`);
+        }
+        break;
 
-      if (!importName) {
-        const preparedUrl = (0, _loaderUtils.stringifyRequest)(loaderContext, (0, _loaderUtils.urlToRequest)(url));
-        importName = `___CSS_LOADER_URL_PURE_IMPORT_${index}___`;
-        importItems.push(`var ${importName} = require(${preparedUrl});`);
-        urlImportNames.set(url, importName);
-      }
+      case 'icss-import':
+        {
+          const {
+            importName,
+            url,
+            media
+          } = item;
+          const preparedMedia = media ? `, ${JSON.stringify(media)}` : '';
+
+          if (!importPrefix) {
+            importPrefix = getImportPrefix(loaderContext, importLoaders);
+          }
+
+          importItems.push(esModule ? `import ${importName} from ${(0, _loaderUtils.stringifyRequest)(loaderContext, importPrefix + url)};` : `var ${importName} = require(${(0, _loaderUtils.stringifyRequest)(loaderContext, importPrefix + url)});`);
 
-      const getUrlOptions = [].concat(hash ? [`hash: ${JSON.stringify(hash)}`] : []).concat(needQuotes ? 'needQuotes: true' : []);
-      const preparedOptions = getUrlOptions.length > 0 ? `, { ${getUrlOptions.join(', ')} }` : '';
-      codeItems.push(`var ${name} = ___CSS_LOADER_GET_URL_IMPORT___(${importName}${preparedOptions});`);
+          if (exportType === 'full') {
+            codeItems.push(`exports.i(${importName}${preparedMedia});`);
+          }
+        }
+        break;
     }
   });
-  return `// Imports\n${importItems.join('\n')}\n${codeItems.join('\n')}\n`;
+  const items = importItems.concat(codeItems);
+  return items.length > 0 ? `// Imports\n${items.join('\n')}\n` : '';
 }
 
-function getModuleCode(loaderContext, result, replacers, sourceMap) {
+function getModuleCode(loaderContext, result, exportType, sourceMap, replacers) {
+  if (exportType !== 'full') {
+    return '';
+  }
+
   const {
     css,
     map
@@ -244,11 +288,11 @@ function getModuleCode(loaderContext, result, replacers, sourceMap) {
   replacers.forEach(replacer => {
     const {
       type,
-      name
+      replacementName
     } = replacer;
 
     if (type === 'url') {
-      cssCode = cssCode.replace(new RegExp(name, 'g'), () => `" + ${name} + "`);
+      cssCode = cssCode.replace(new RegExp(replacementName, 'g'), () => `" + ${replacementName} + "`);
     }
 
     if (type === 'icss-import') {
@@ -256,7 +300,7 @@ function getModuleCode(loaderContext, result, replacers, sourceMap) {
         importName,
         localName
       } = replacer;
-      cssCode = cssCode.replace(new RegExp(name, 'g'), () => `" + ${importName}.locals[${JSON.stringify(localName)}] + "`);
+      cssCode = cssCode.replace(new RegExp(replacementName, 'g'), () => `" + ${importName}.locals[${JSON.stringify(localName)}] + "`);
     }
   });
   return `// Module\nexports.push([module.id, ${cssCode}, ""${sourceMapValue}]);\n`;
@@ -266,72 +310,88 @@ function dashesCamelCase(str) {
   return str.replace(/-+(\w)/g, (match, firstLetter) => firstLetter.toUpperCase());
 }
 
-function getExportCode(loaderContext, exports, replacers, options) {
-  const items = [];
+function getExportCode(loaderContext, exports, exportType, replacers, localsConvention, esModule) {
+  const exportItems = [];
+  let exportLocalsCode;
 
-  function 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 (options.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${options.exportType === 'locals' ? 'module.exports' : 'exports.locals'} = {\n${items.join(',\n')}\n};`;
-  replacers.forEach(replacer => {
-    if (replacer.type === 'icss-import') {
-      const {
-        name,
-        importName
-      } = replacer;
-      const localName = JSON.stringify(replacer.localName);
-      exportCode = exportCode.replace(new RegExp(name, 'g'), () => options.exportType === 'locals' ? `" + ${importName}[${localName}] + "` : `" + ${importName}.locals[${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.0",
+  "version": "3.4.1",
   "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",
@@ -60,7 +62,7 @@
     "@babel/preset-env": "^7.7.4",
     "@commitlint/cli": "^8.2.0",
     "@commitlint/config-conventional": "^8.2.0",
-    "@webpack-contrib/defaults": "^5.0.2",
+    "@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",
@@ -74,9 +76,9 @@
     "file-loader": "^5.0.2",
     "husky": "^3.1.0",
     "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.1",
     "npm-run-all": "^4.1.5",
     "postcss-loader": "^3.0.0",
     "postcss-preset-env": "^6.7.0",
@@ -86,7 +88,7 @@
     "standard-version": "^7.0.1",
     "strip-ansi": "^6.0.0",
     "url-loader": "^3.0.0",
-    "webpack": "^4.41.2"
+    "webpack": "^4.41.3"
   },
   "keywords": [
     "webpack",