css-loader 3.0.0 → 3.3.0

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

@@ -1,6 +1,14 @@
 "use strict";
 
-module.exports = function (url, needQuotes) {
+module.exports = function (url, options) {
+  if (!options) {
+    // eslint-disable-next-line no-param-reassign
+    options = {};
+  } // eslint-disable-next-line no-underscore-dangle, no-param-reassign
+
+
+  url = url && url.__esModule ? url.default : url;
+
   if (typeof url !== 'string') {
     return url;
   } // If url is already wrapped in quotes, remove them
@@ -9,11 +17,16 @@ module.exports = function (url, needQuotes) {
   if (/^['"].*['"]$/.test(url)) {
     // eslint-disable-next-line no-param-reassign
     url = url.slice(1, -1);
+  }
+
+  if (options.hash) {
+    // eslint-disable-next-line no-param-reassign
+    url += options.hash;
   } // Should url be wrapped?
   // See https://drafts.csswg.org/css-values-3/#urls
 
 
-  if (/["'() \t\n]/.test(url) || needQuotes) {
+  if (/["'() \t\n]/.test(url) || options.needQuotes) {
     return "\"".concat(url.replace(/"/g, '\\"').replace(/\n/g, '\\n'), "\"");
   }
 

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"));
 
@@ -39,7 +29,9 @@ var _postcssModulesScope = _interopRequireDefault(require("postcss-modules-scope
 
 var _camelcase = _interopRequireDefault(require("camelcase"));
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -47,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 '';
@@ -86,7 +66,13 @@ function unescape(str) {
     String.fromCharCode(high >> 10 | 0xd800, high & 0x3ff | 0xdc00);
     /* eslint-enable line-comment-position */
   });
-}
+} // eslint-disable-next-line no-control-regex
+
+
+const filenameReservedRegex = /[<>:"/\\|?*\x00-\x1F]/g; // eslint-disable-next-line no-control-regex
+
+const reControlChars = /[\u0000-\u001f\u0080-\u009f]/g;
+const reRelativePath = /^\.+/;
 
 function getLocalIdent(loaderContext, localIdentName, localName, options) {
   if (!options.context) {
@@ -100,7 +86,7 @@ function getLocalIdent(loaderContext, localIdentName, localName, options) {
   // Also directories can contains invalid characters for css we need escape their too
 
   return (0, _cssesc.default)(_loaderUtils.default.interpolateName(loaderContext, localIdentName, options) // For `[hash]` placeholder
-  .replace(/^((-?[0-9])|--)/, '_$1'), {
+  .replace(/^((-?[0-9])|--)/, '_$1').replace(filenameReservedRegex, '-').replace(reControlChars, '-').replace(reRelativePath, '-').replace(/\./g, '-'), {
     isIdentifier: true
   }).replace(/\\\[local\\\]/gi, localName);
 }
@@ -124,7 +110,6 @@ function getModulesPlugins(options, loaderContext) {
     mode: 'local',
     localIdentName: '[hash:base64]',
     getLocalIdent,
-    context: null,
     hashPrefix: '',
     localIdentRegExp: null
   };
@@ -139,11 +124,21 @@ function getModulesPlugins(options, loaderContext) {
     mode: modulesOptions.mode
   }), (0, _postcssModulesExtractImports.default)(), (0, _postcssModulesScope.default)({
     generateScopedName: function generateScopedName(exportName) {
-      return modulesOptions.getLocalIdent(loaderContext, modulesOptions.localIdentName, exportName, {
+      let localIdent = modulesOptions.getLocalIdent(loaderContext, modulesOptions.localIdentName, exportName, {
         context: modulesOptions.context,
         hashPrefix: modulesOptions.hashPrefix,
         regExp: modulesOptions.localIdentRegExp
       });
+
+      if (!localIdent) {
+        localIdent = getLocalIdent(loaderContext, modulesOptions.localIdentName, exportName, {
+          context: modulesOptions.context,
+          hashPrefix: modulesOptions.hashPrefix,
+          regExp: modulesOptions.localIdentRegExp
+        });
+      }
+
+      return localIdent;
     }
   })];
 }
@@ -173,158 +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 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}` : ''}"` : '';
-  return `var ${placeholder} = getUrl(require(${(0, _loaderUtils.stringifyRequest)(loaderContext, (0, _loaderUtils.urlToRequest)(normalizedUrl))})${hash ? ` + ${hash}` : ''}${needQuotes ? ', true' : ''});`;
+function getApiCode(loaderContext, sourceMap) {
+  const url = (0, _loaderUtils.stringifyRequest)(loaderContext, require.resolve('./runtime/api'));
+  return `exports = module.exports = require(${url})(${sourceMap});\n`;
 }
 
-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;
 }