css-loader 3.2.1 → 3.3.0

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 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.3.0](https://github.com/webpack-contrib/css-loader/compare/v3.2.1...v3.3.0) (2019-12-09)
+
+
+### Features
+
+* support `pure` css modules ([#1008](https://github.com/webpack-contrib/css-loader/issues/1008)) ([6177af5](https://github.com/webpack-contrib/css-loader/commit/6177af5596566fead13a8f66d5abcb4dc2b744db))
+
+
+### Bug Fixes
+
+* do not crash when an assert return `null` or `undefined` ([#1006](https://github.com/webpack-contrib/css-loader/issues/1006)) ([6769783](https://github.com/webpack-contrib/css-loader/commit/67697833725e1cff12a14663390bbe4c65ea36d2))
+* reduce count of `require` ([#1004](https://github.com/webpack-contrib/css-loader/issues/1004)) ([80e9662](https://github.com/webpack-contrib/css-loader/commit/80e966280f2477c5c0e4553d3be3a04511fea381))
+
 ### [3.2.1](https://github.com/webpack-contrib/css-loader/compare/v3.2.0...v3.2.1) (2019-12-02)
 
 

package/README.md

@@ -317,6 +317,7 @@ module.exports = {
 
 Using `local` value requires you to specify `:global` classes.
 Using `global` value requires you to specify `:local` classes.
+Using `pure` value requires selectors must contain at least one local class or id.
 
 You can find more information [here](https://github.com/css-modules/css-modules).
 

package/dist/index.js

@@ -56,27 +56,19 @@ function loader(content, map, meta) {
 
   if (options.modules) {
     plugins.push(...(0, _utils.getModulesPlugins)(options, this));
-  } // Run other loader (`postcss-loader`, `sass-loader` and etc) for importing CSS
-
+  }
 
-  const importPrefix = (0, _utils.getImportPrefix)(this, options.importLoaders);
-  plugins.push((0, _plugins.icssParser)({
-    loaderContext: this,
-    importPrefix,
-    localsConvention: options.localsConvention
-  }));
+  const exportType = options.onlyLocals ? 'locals' : 'full';
+  plugins.push((0, _plugins.icssParser)());
 
-  if (options.import !== false) {
+  if (options.import !== false && exportType === 'full') {
     plugins.push((0, _plugins.importParser)({
-      loaderContext: this,
-      importPrefix,
       filter: (0, _utils.getFilter)(options.import, this.resourcePath)
     }));
   }
 
-  if (options.url !== false) {
+  if (options.url !== false && exportType === 'full') {
     plugins.push((0, _plugins.urlParser)({
-      loaderContext: this,
       filter: (0, _utils.getFilter)(options.url, this.resourcePath, value => (0, _loaderUtils.isUrlRequest)(value))
     }));
   }
@@ -88,36 +80,42 @@ function loader(content, map, meta) {
       prev: map,
       inline: false,
       annotation: false
-    } : null
+    } : false
   }).then(result => {
     result.warnings().forEach(warning => this.emitWarning(new _Warning.default(warning)));
-
-    if (!result.messages) {
-      // eslint-disable-next-line no-param-reassign
-      result.messages = [];
-    }
-
-    const {
-      onlyLocals
-    } = options;
-    const importItems = result.messages.filter(message => message.type === 'import' ? message : false).reduce((accumulator, currentValue) => {
-      accumulator.push(currentValue.import);
-      return accumulator;
-    }, []);
-    const exportItems = result.messages.filter(message => message.type === 'export' ? message : false).reduce((accumulator, currentValue) => {
-      accumulator.push(currentValue.export);
-      return accumulator;
-    }, []);
-    const importCode = (0, _utils.getImportCode)(importItems, onlyLocals);
-    const moduleCode = (0, _utils.getModuleCode)(result, sourceMap, onlyLocals);
-    const exportCode = (0, _utils.getExportCode)(exportItems, onlyLocals);
-    const apiCode = (0, _utils.getApiCode)(this, sourceMap, onlyLocals);
-    return callback(null, (0, _utils.prepareCode)({
-      apiCode,
-      importCode,
-      moduleCode,
-      exportCode
-    }, result.messages, this, importPrefix, onlyLocals));
+    const imports = [];
+    const exports = [];
+    const replacers = [];
+
+    for (const message of result.messages) {
+      // eslint-disable-next-line default-case
+      switch (message.type) {
+        case 'import':
+          imports.push(message.value);
+          break;
+
+        case 'export':
+          exports.push(message.value);
+          break;
+
+        case 'replacer':
+          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(''));
   }).catch(error => {
     callback(error.name === 'CssSyntaxError' ? new _CssSyntaxError.default(error) : error);
   });

package/dist/options.json

@@ -30,14 +30,14 @@
           "type": "boolean"
         },
         {
-          "enum": ["local", "global"]
+          "enum": ["local", "global", "pure"]
         },
         {
           "type": "object",
           "additionalProperties": false,
           "properties": {
             "mode": {
-              "enum": ["local", "global"]
+              "enum": ["local", "global", "pure"]
             },
             "localIdentName": {
               "type": "string"

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

@@ -9,79 +9,65 @@ var _postcss = _interopRequireDefault(require("postcss"));
 
 var _icssUtils = require("icss-utils");
 
-var _loaderUtils = _interopRequireDefault(require("loader-utils"));
-
-var _utils = require("../utils");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const pluginName = 'postcss-icss-parser';
 
-function hasImportMessage(messages, url) {
-  return messages.find(message => message.pluginName === pluginName && message.type === 'import' && message.item.url === url && message.item.media === '');
-}
-
-var _default = _postcss.default.plugin(pluginName, (options = {}) => function process(css, result) {
+var _default = _postcss.default.plugin(pluginName, () => function process(css, result) {
   const importReplacements = Object.create(null);
   const {
     icssImports,
     icssExports
   } = (0, _icssUtils.extractICSS)(css);
-  let index = 0;
+  Object.keys(icssImports).forEach((url, importIndex) => {
+    const tokens = Object.keys(icssImports[url]);
 
-  for (const importUrl of Object.keys(icssImports)) {
-    const url = _loaderUtils.default.parseString(importUrl);
+    if (tokens.length === 0) {
+      return;
+    }
 
-    for (const token of Object.keys(icssImports[importUrl])) {
-      index += 1;
-      importReplacements[token] = `___CSS_LOADER_IMPORT___${index}___`;
+    const importName = `___CSS_LOADER_ICSS_IMPORT_${importIndex}___`;
+    result.messages.push({
+      pluginName,
+      type: 'import',
+      value: {
+        type: 'icss-import',
+        name: importName,
+        url
+      }
+    });
+    tokens.forEach((token, replacementIndex) => {
+      const name = `___CSS_LOADER_ICSS_IMPORT_${importIndex}_REPLACEMENT_${replacementIndex}___`;
+      const localName = icssImports[url][token];
+      importReplacements[token] = name;
       result.messages.push({
         pluginName,
-        type: 'icss-import',
-        item: {
-          url,
-          export: icssImports[importUrl][token],
-          index
+        type: 'replacer',
+        value: {
+          type: 'icss-import',
+          name,
+          importName,
+          localName
         }
       });
+    });
+  });
 
-      if (!hasImportMessage(result.messages, url)) {
-        const media = '';
-        const {
-          loaderContext,
-          importPrefix
-        } = options;
-        result.messages.push({
-          pluginName,
-          type: 'import',
-          import: (0, _utils.getImportItemCode)({
-            url,
-            media
-          }, loaderContext, importPrefix),
-          item: {
-            url,
-            media
-          }
-        });
-      }
-    }
+  if (Object.keys(importReplacements).length > 0) {
+    (0, _icssUtils.replaceSymbols)(css, importReplacements);
   }
 
-  (0, _icssUtils.replaceSymbols)(css, importReplacements);
-
-  for (const exportName of Object.keys(icssExports)) {
-    const name = exportName;
+  Object.keys(icssExports).forEach(name => {
     const value = (0, _icssUtils.replaceValueSymbols)(icssExports[name], importReplacements);
     result.messages.push({
       pluginName,
-      export: (0, _utils.getExportItemCode)(name, value, options.localsConvention),
       type: 'export',
-      item: {
+      value: {
         name,
         value
       }
     });
-  }
+  });
 });
 
 exports.default = _default;

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

@@ -9,8 +9,6 @@ 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-import-parser';
@@ -53,7 +51,7 @@ function parseImport(params) {
 }
 
 function walkAtRules(css, result, filter) {
-  const items = [];
+  const items = new Map();
   css.walkAtRules(/^import$/i, atRule => {
     // Convert only top-level @import
     if (atRule.parent.type !== 'root') {
@@ -85,22 +83,43 @@ function walkAtRules(css, result, filter) {
       url,
       media
     } = parsed;
-    items.push({
-      url,
-      media
-    });
+    const value = items.get(url);
+
+    if (!value) {
+      items.set(url, new Set([media]));
+    } else {
+      value.add(media);
+    }
   });
   return items;
 }
 
-var _default = _postcss.default.plugin(pluginName, (options = {}) => function process(css, result) {
-  const traversed = walkAtRules(css, result, options.filter);
-  const paths = (0, _utils.uniqWith)(traversed, (value, other) => value.url === other.url && value.media === other.media);
-  paths.forEach(item => {
+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) => {
+    const {
+      url,
+      media
+    } = item;
+    const name = `___CSS_LOADER_AT_RULE_IMPORT_${index}___`;
     result.messages.push({
       pluginName,
       type: 'import',
-      import: (0, _utils.getImportItemCode)(item, options.loaderContext, options.importPrefix)
+      value: {
+        type: '@import',
+        name,
+        url,
+        media
+      }
     });
   });
 });

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

@@ -9,8 +9,6 @@ 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';
@@ -56,7 +54,7 @@ function walkUrls(parsed, callback) {
   });
 }
 
-function getUrlsFromValue(value, result, filter, decl = null) {
+function getUrlsFromValue(value, result, filter, decl) {
   if (!needParseDecl.test(value)) {
     return;
   }
@@ -65,9 +63,9 @@ function getUrlsFromValue(value, result, filter, decl = null) {
   const urls = [];
   walkUrls(parsed, (node, url, needQuotes) => {
     if (url.trim().replace(/\\[\r\n]/g, '').length === 0) {
-      result.warn(`Unable to find uri in '${decl ? decl.toString() : value}'`, decl ? {
+      result.warn(`Unable to find uri in '${decl ? decl.toString() : value}'`, {
         node: decl
-      } : {});
+      });
       return;
     }
 
@@ -75,8 +73,12 @@ function getUrlsFromValue(value, result, filter, decl = null) {
       return;
     }
 
+    const [normalizedUrl, singleQuery, hashValue] = url.split(/(\?)?#/);
+    const hash = singleQuery || hashValue ? `${singleQuery ? '?' : ''}${hashValue ? `#${hashValue}` : ''}` : '';
     urls.push({
-      url,
+      node,
+      url: normalizedUrl,
+      hash,
       needQuotes
     });
   }); // eslint-disable-next-line consistent-return
@@ -87,16 +89,12 @@ function getUrlsFromValue(value, result, filter, decl = null) {
   };
 }
 
-function walkDeclsWithUrl(css, result, filter) {
+function walkDecls(css, result, filter) {
   const items = [];
   css.walkDecls(decl => {
     const item = getUrlsFromValue(decl.value, result, filter, decl);
 
-    if (!item) {
-      return;
-    }
-
-    if (item.urls.length === 0) {
+    if (!item || item.urls.length === 0) {
       return;
     }
 
@@ -109,67 +107,82 @@ function walkDeclsWithUrl(css, result, filter) {
   return items;
 }
 
-var _default = _postcss.default.plugin(pluginName, (options = {}) => function process(css, result) {
-  const traversed = walkDeclsWithUrl(css, result, options.filter);
-  const paths = (0, _utils.uniqWith)((0, _utils.flatten)(traversed.map(item => item.urls)), (value, other) => value.url === other.url && value.needQuotes === other.needQuotes);
+function flatten(array) {
+  return array.reduce((a, b) => a.concat(b), []);
+}
 
-  if (paths.length === 0) {
-    return;
-  }
+function collectUniqueUrlsWithNodes(array) {
+  return array.reduce((accumulator, currentValue) => {
+    const {
+      url,
+      needQuotes,
+      hash,
+      node
+    } = currentValue;
+    const found = accumulator.find(item => url === item.url && needQuotes === item.needQuotes && hash === item.hash);
+
+    if (!found) {
+      accumulator.push({
+        url,
+        hash,
+        needQuotes,
+        nodes: [node]
+      });
+    } else {
+      found.nodes.push(node);
+    }
+
+    return accumulator;
+  }, []);
+}
 
-  const placeholders = [];
-  let hasUrlHelper = false;
+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 replacers = new Map();
   paths.forEach((path, index) => {
-    const {
-      loaderContext
-    } = options;
-    const placeholder = `___CSS_LOADER_URL___${index}___`;
     const {
       url,
-      needQuotes
+      hash,
+      needQuotes,
+      nodes
     } = path;
-    placeholders.push({
-      placeholder,
-      path
-    });
-
-    if (!hasUrlHelper) {
-      result.messages.push({
-        pluginName,
-        type: 'import',
-        import: (0, _utils.getUrlHelperCode)(loaderContext)
-      }); // eslint-disable-next-line no-param-reassign
-
-      hasUrlHelper = true;
-    }
-
+    const name = `___CSS_LOADER_URL_IMPORT_${index}___`;
     result.messages.push({
       pluginName,
       type: 'import',
-      import: (0, _utils.getUrlItemCode)({
+      value: {
+        type: 'url',
+        name,
         url,
-        placeholder,
-        needQuotes
-      }, loaderContext),
-      importType: 'url',
-      placeholder
+        needQuotes,
+        hash,
+        index
+      }
+    }, {
+      pluginName,
+      type: 'replacer',
+      value: {
+        type: 'url',
+        name
+      }
+    });
+    nodes.forEach(node => {
+      replacers.set(node, name);
     });
   });
   traversed.forEach(item => {
-    walkUrls(item.parsed, (node, url, needQuotes) => {
-      const value = placeholders.find(placeholder => placeholder.path.url === url && placeholder.path.needQuotes === needQuotes);
+    walkUrls(item.parsed, node => {
+      const name = replacers.get(node);
 
-      if (!value) {
+      if (!name) {
         return;
-      }
+      } // eslint-disable-next-line no-param-reassign
 
-      const {
-        placeholder
-      } = value; // eslint-disable-next-line no-param-reassign
 
       node.type = 'word'; // eslint-disable-next-line no-param-reassign
 
-      node.value = placeholder;
+      node.value = name;
     }); // eslint-disable-next-line no-param-reassign
 
     item.decl.value = item.parsed.toString();

package/dist/runtime/getUrl.js

@@ -7,7 +7,7 @@ module.exports = function (url, options) {
   } // eslint-disable-next-line no-underscore-dangle, no-param-reassign
 
 
-  url = url.__esModule ? url.default : url;
+  url = url && url.__esModule ? url.default : url;
 
   if (typeof url !== 'string') {
     return url;

package/dist/utils.js

@@ -3,23 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.uniqWith = uniqWith;
-exports.flatten = flatten;
-exports.dashesCamelCase = dashesCamelCase;
-exports.getImportPrefix = getImportPrefix;
-exports.getLocalIdent = getLocalIdent;
 exports.getFilter = getFilter;
 exports.getModulesPlugins = getModulesPlugins;
 exports.normalizeSourceMap = normalizeSourceMap;
-exports.getImportItemCode = getImportItemCode;
-exports.getUrlHelperCode = getUrlHelperCode;
-exports.getUrlItemCode = getUrlItemCode;
 exports.getApiCode = getApiCode;
 exports.getImportCode = getImportCode;
 exports.getModuleCode = getModuleCode;
-exports.getExportItemCode = getExportItemCode;
 exports.getExportCode = getExportCode;
-exports.prepareCode = prepareCode;
 
 var _path = _interopRequireDefault(require("path"));
 
@@ -49,18 +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 uniqWith(array, comparator) {
-  return array.reduce((acc, d) => !acc.some(item => comparator(d, item)) ? [...acc, d] : acc, []);
-}
-
-function flatten(array) {
-  return array.reduce((a, b) => a.concat(b), []);
-}
-
-function dashesCamelCase(str) {
-  return str.replace(/-+(\w)/g, (match, firstLetter) => firstLetter.toUpperCase());
-}
-
 function getImportPrefix(loaderContext, importLoaders) {
   if (importLoaders === false) {
     return '';
@@ -190,169 +168,170 @@ function normalizeSourceMap(map) {
   return newMap;
 }
 
-function getImportItemCode(item, loaderContext, importPrefix) {
-  const {
-    url
-  } = item;
-  const media = item.media || '';
-
-  if (!(0, _loaderUtils.isUrlRequest)(url)) {
-    return `exports.push([module.id, ${JSON.stringify(`@import url(${url});`)}, ${JSON.stringify(media)}]);`;
-  }
-
-  const importUrl = importPrefix + (0, _loaderUtils.urlToRequest)(url);
-  return `exports.i(require(${(0, _loaderUtils.stringifyRequest)(loaderContext, importUrl)}), ${JSON.stringify(media)});`;
+function getApiCode(loaderContext, sourceMap) {
+  const url = (0, _loaderUtils.stringifyRequest)(loaderContext, require.resolve('./runtime/api'));
+  return `exports = module.exports = require(${url})(${sourceMap});\n`;
 }
 
-function getUrlHelperCode(loaderContext) {
-  return `var getUrl = require(${(0, _loaderUtils.stringifyRequest)(loaderContext, require.resolve('./runtime/getUrl.js'))});`;
-}
-
-function getUrlItemCode(item, loaderContext) {
-  const {
-    url,
-    placeholder,
-    needQuotes
-  } = item; // Remove `#hash` and `?#hash` from `require`
-
-  const [normalizedUrl, singleQuery, hashValue] = url.split(/(\?)?#/);
-  const hash = singleQuery || hashValue ? `"${singleQuery ? '?' : ''}${hashValue ? `#${hashValue}` : ''}"` : '';
-  const options = [];
-
-  if (hash) {
-    options.push(`hash: ${hash}`);
-  }
-
-  if (needQuotes) {
-    options.push(`needQuotes: true`);
-  }
-
-  const preparedOptions = options.length > 0 ? `, { ${options.join(', ')} }` : '';
-  return `var ${placeholder} = getUrl(require(${(0, _loaderUtils.stringifyRequest)(loaderContext, (0, _loaderUtils.urlToRequest)(normalizedUrl))})${preparedOptions});`;
-}
-
-function getApiCode(loaderContext, sourceMap, onlyLocals) {
-  if (onlyLocals) {
-    return '';
-  }
-
-  return `exports = module.exports = require(${(0, _loaderUtils.stringifyRequest)(loaderContext, require.resolve('./runtime/api'))})(${sourceMap});\n`;
-}
-
-function getImportCode(importItems, onlyLocals) {
-  if (importItems.length === 0 || onlyLocals) {
-    return '';
-  }
-
-  return `// Imports\n${importItems.join('\n')}\n`;
-}
-
-function getModuleCode(result, sourceMap, onlyLocals) {
-  if (onlyLocals) {
-    return '';
-  }
-
-  return `// Module\nexports.push([module.id, ${JSON.stringify(result.css)}, ""${sourceMap && result.map ? `,${result.map}` : ''}]);\n`;
-}
-
-function getExportItemCode(key, value, localsConvention) {
-  let targetKey;
-  const items = [];
-
-  function addEntry(k) {
-    items.push(`\t${JSON.stringify(k)}: ${JSON.stringify(value)}`);
-  }
-
-  switch (localsConvention) {
-    case 'camelCase':
-      addEntry(key);
-      targetKey = (0, _camelcase.default)(key);
-
-      if (targetKey !== key) {
-        addEntry(targetKey);
+function getImportCode(loaderContext, imports, options) {
+  const importItems = [];
+  const codeItems = [];
+  const urlImportNames = new Map();
+  let hasUrlHelperCode = false;
+  let importPrefix;
+  imports.forEach(item => {
+    if (item.type === '@import' || item.type === 'icss-import') {
+      const media = item.media ? `, ${JSON.stringify(item.media)}` : '';
+
+      if (!(0, _loaderUtils.isUrlRequest)(item.url)) {
+        const url = JSON.stringify(`@import url(${item.url});`);
+        codeItems.push(`exports.push([module.id, ${url}${media}]);`);
+        return;
       }
 
-      break;
-
-    case 'camelCaseOnly':
-      addEntry((0, _camelcase.default)(key));
-      break;
+      if (!importPrefix) {
+        importPrefix = getImportPrefix(loaderContext, options.importLoaders);
+      }
 
-    case 'dashes':
-      addEntry(key);
-      targetKey = dashesCamelCase(key);
+      const url = (0, _loaderUtils.stringifyRequest)(loaderContext, importPrefix + (0, _loaderUtils.urlToRequest)(item.url));
+      importItems.push(`var ${item.name} = require(${url});`);
 
-      if (targetKey !== key) {
-        addEntry(targetKey);
+      if (options.exportType === 'full') {
+        codeItems.push(`exports.i(${item.name}${media});`);
       }
+    }
 
-      break;
+    if (item.type === 'url') {
+      if (!hasUrlHelperCode) {
+        const pathToGetUrl = require.resolve('./runtime/getUrl.js');
 
-    case 'dashesOnly':
-      addEntry(dashesCamelCase(key));
-      break;
+        const url = (0, _loaderUtils.stringifyRequest)(loaderContext, pathToGetUrl);
+        importItems.push(`var ___CSS_LOADER_GET_URL_IMPORT___ = require(${url});`);
+        hasUrlHelperCode = true;
+      }
 
-    case 'asIs':
-    default:
-      addEntry(key);
-      break;
-  }
+      const {
+        name,
+        url,
+        hash,
+        needQuotes,
+        index
+      } = item;
+      let importName = urlImportNames.get(url);
+
+      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);
+      }
 
-  return items.join(',\n');
+      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});`);
+    }
+  });
+  return `// Imports\n${importItems.join('\n')}\n${codeItems.join('\n')}\n`;
 }
 
-function getExportCode(exportItems, onlyLocals) {
-  if (exportItems.length === 0) {
-    return '';
-  }
+function getModuleCode(loaderContext, result, replacers, sourceMap) {
+  const {
+    css,
+    map
+  } = result;
+  const sourceMapValue = sourceMap && map ? `,${map}` : '';
+  let cssCode = JSON.stringify(css);
+  replacers.forEach(replacer => {
+    const {
+      type,
+      name
+    } = replacer;
+
+    if (type === 'url') {
+      cssCode = cssCode.replace(new RegExp(name, 'g'), () => `" + ${name} + "`);
+    }
 
-  return `// Exports\n${onlyLocals ? 'module.exports' : 'exports.locals'} = {\n${exportItems.join(',\n')}\n};`;
+    if (type === 'icss-import') {
+      const {
+        importName,
+        localName
+      } = replacer;
+      cssCode = cssCode.replace(new RegExp(name, 'g'), () => `" + ${importName}.locals[${JSON.stringify(localName)}] + "`);
+    }
+  });
+  return `// Module\nexports.push([module.id, ${cssCode}, ""${sourceMapValue}]);\n`;
 }
 
-function getIcssReplacer(item, loaderContext, importPrefix, onlyLocals) {
-  const importUrl = importPrefix + (0, _loaderUtils.urlToRequest)(item.url);
-  return () => onlyLocals ? `" + require(${(0, _loaderUtils.stringifyRequest)(loaderContext, importUrl)})[${JSON.stringify(item.export)}] + "` : `" + require(${(0, _loaderUtils.stringifyRequest)(loaderContext, importUrl)}).locals[${JSON.stringify(item.export)}] + "`;
+function dashesCamelCase(str) {
+  return str.replace(/-+(\w)/g, (match, firstLetter) => firstLetter.toUpperCase());
 }
 
-function prepareCode(file, messages, loaderContext, importPrefix, onlyLocals) {
-  const {
-    apiCode,
-    importCode
-  } = file;
-  let {
-    moduleCode,
-    exportCode
-  } = file;
-  messages.filter(message => message.type === 'icss-import' || message.type === 'import' && message.importType === 'url').forEach(message => {
-    // Replace all urls on `require`
-    if (message.type === 'import') {
-      const {
-        placeholder
-      } = message;
-
-      if (moduleCode) {
-        // eslint-disable-next-line no-param-reassign
-        moduleCode = moduleCode.replace(new RegExp(placeholder, 'g'), () => `" + ${placeholder} + "`);
-      }
-    } // Replace external ICSS import on `require`
+function getExportCode(loaderContext, exports, replacers, options) {
+  const items = [];
 
+  function addExportedItem(name, value) {
+    items.push(`\t${JSON.stringify(name)}: ${JSON.stringify(value)}`);
+  }
 
-    if (message.type === 'icss-import') {
+  exports.forEach(item => {
+    const {
+      name,
+      value
+    } = item;
+
+    switch (options.localsConvention) {
+      case 'camelCase':
+        {
+          addExportedItem(name, value);
+          const modifiedName = (0, _camelcase.default)(name);
+
+          if (modifiedName !== name) {
+            addExportedItem(modifiedName, value);
+          }
+
+          break;
+        }
+
+      case 'camelCaseOnly':
+        {
+          addExportedItem((0, _camelcase.default)(name), value);
+          break;
+        }
+
+      case 'dashes':
+        {
+          addExportedItem(name, value);
+          const modifiedName = dashesCamelCase(name);
+
+          if (modifiedName !== name) {
+            addExportedItem(modifiedName, value);
+          }
+
+          break;
+        }
+
+      case 'dashesOnly':
+        {
+          addExportedItem(dashesCamelCase(name), value);
+          break;
+        }
+
+      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 {
-        item
-      } = message;
-      const replacer = getIcssReplacer(item, loaderContext, importPrefix, onlyLocals);
-
-      if (moduleCode) {
-        // eslint-disable-next-line no-param-reassign
-        moduleCode = moduleCode.replace(new RegExp(`___CSS_LOADER_IMPORT___(${item.index})___`, 'g'), replacer);
-      }
-
-      if (exportCode) {
-        // eslint-disable-next-line no-param-reassign
-        exportCode = exportCode.replace(new RegExp(`___CSS_LOADER_IMPORT___(${item.index})___`, 'g'), replacer);
-      }
+        name,
+        importName
+      } = replacer;
+      const localName = JSON.stringify(replacer.localName);
+      exportCode = exportCode.replace(new RegExp(name, 'g'), () => options.exportType === 'locals' ? `" + ${importName}[${localName}] + "` : `" + ${importName}.locals[${localName}] + "`);
     }
   });
-  return [apiCode, importCode, moduleCode, exportCode].filter(Boolean).join('');
+  return exportCode;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "css-loader",
-  "version": "3.2.1",
+  "version": "3.3.0",
   "description": "css loader module for webpack",
   "license": "MIT",
   "repository": "webpack-contrib/css-loader",