css-loader 2.1.0 → 3.2.0

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

@@ -9,7 +9,7 @@ var _postcss = _interopRequireDefault(require("postcss"));
 
 var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));
 
-var _lodash = _interopRequireDefault(require("lodash"));
+var _utils = require("../utils");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -56,41 +56,54 @@ function walkUrls(parsed, callback) {
   });
 }
 
-function walkDeclsWithUrl(css, result, filter) {
-  const items = [];
-  css.walkDecls(decl => {
-    if (!needParseDecl.test(decl.value)) {
+function getUrlsFromValue(value, result, filter, decl = null) {
+  if (!needParseDecl.test(value)) {
+    return;
+  }
+
+  const parsed = (0, _postcssValueParser.default)(value);
+  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 ? {
+        node: decl
+      } : {});
       return;
     }
 
-    const parsed = (0, _postcssValueParser.default)(decl.value);
-    const urls = [];
-    walkUrls(parsed, (node, url, needQuotes) => {
-      if (url.trim().replace(/\\[\r\n]/g, '').length === 0) {
-        result.warn(`Unable to find uri in '${decl.toString()}'`, {
-          node: decl
-        });
-        return;
-      }
-
-      if (filter && !filter(url)) {
-        return;
-      }
+    if (filter && !filter(url)) {
+      return;
+    }
 
-      urls.push({
-        url,
-        needQuotes
-      });
+    urls.push({
+      url,
+      needQuotes
     });
+  }); // eslint-disable-next-line consistent-return
 
-    if (urls.length === 0) {
+  return {
+    parsed,
+    urls
+  };
+}
+
+function walkDeclsWithUrl(css, result, filter) {
+  const items = [];
+  css.walkDecls(decl => {
+    const item = getUrlsFromValue(decl.value, result, filter, decl);
+
+    if (!item) {
+      return;
+    }
+
+    if (item.urls.length === 0) {
       return;
     }
 
     items.push({
       decl,
-      parsed,
-      urls
+      parsed: item.parsed,
+      urls: item.urls
     });
   });
   return items;
@@ -98,15 +111,18 @@ function walkDeclsWithUrl(css, result, filter) {
 
 var _default = _postcss.default.plugin(pluginName, (options = {}) => function process(css, result) {
   const traversed = walkDeclsWithUrl(css, result, options.filter);
-
-  const paths = _lodash.default.uniqWith(_lodash.default.flatten(traversed.map(item => item.urls)), _lodash.default.isEqual);
+  const paths = (0, _utils.uniqWith)((0, _utils.flatten)(traversed.map(item => item.urls)), (value, other) => value.url === other.url && value.needQuotes === other.needQuotes);
 
   if (paths.length === 0) {
     return;
   }
 
   const placeholders = [];
+  let hasUrlHelper = false;
   paths.forEach((path, index) => {
+    const {
+      loaderContext
+    } = options;
     const placeholder = `___CSS_LOADER_URL___${index}___`;
     const {
       url,
@@ -116,24 +132,32 @@ var _default = _postcss.default.plugin(pluginName, (options = {}) => function pr
       placeholder,
       path
     });
+
+    if (!hasUrlHelper) {
+      result.messages.push({
+        pluginName,
+        type: 'import',
+        import: (0, _utils.getUrlHelperCode)(loaderContext)
+      }); // eslint-disable-next-line no-param-reassign
+
+      hasUrlHelper = true;
+    }
+
     result.messages.push({
       pluginName,
-      type: 'url',
-      item: {
+      type: 'import',
+      import: (0, _utils.getUrlItemCode)({
         url,
         placeholder,
         needQuotes
-      }
+      }, loaderContext),
+      importType: 'url',
+      placeholder
     });
   });
   traversed.forEach(item => {
     walkUrls(item.parsed, (node, url, needQuotes) => {
-      const value = _lodash.default.find(placeholders, {
-        path: {
-          url,
-          needQuotes
-        }
-      });
+      const value = placeholders.find(placeholder => placeholder.path.url === url && placeholder.path.needQuotes === needQuotes);
 
       if (!value) {
         return;

package/dist/runtime/api.js

@@ -5,6 +5,7 @@
   Author Tobias Koppers @sokra
 */
 // css base code, injected by the css-loader
+// eslint-disable-next-line func-names
 module.exports = function (useSourceMap) {
   var list = []; // return the list of modules as css string
 
@@ -13,22 +14,25 @@ module.exports = function (useSourceMap) {
       var content = cssWithMappingToString(item, useSourceMap);
 
       if (item[2]) {
-        return '@media ' + item[2] + '{' + content + '}';
-      } else {
-        return content;
+        return "@media ".concat(item[2], "{").concat(content, "}");
       }
+
+      return content;
     }).join('');
   }; // import a list of modules into the list
+  // eslint-disable-next-line func-names
 
 
   list.i = function (modules, mediaQuery) {
     if (typeof modules === 'string') {
+      // eslint-disable-next-line no-param-reassign
       modules = [[null, modules, '']];
     }
 
     var alreadyImportedModules = {};
 
     for (var i = 0; i < this.length; i++) {
+      // eslint-disable-next-line prefer-destructuring
       var id = this[i][0];
 
       if (id != null) {
@@ -36,8 +40,8 @@ module.exports = function (useSourceMap) {
       }
     }
 
-    for (i = 0; i < modules.length; i++) {
-      var item = modules[i]; // skip already imported module
+    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)
@@ -46,7 +50,7 @@ module.exports = function (useSourceMap) {
         if (mediaQuery && !item[2]) {
           item[2] = mediaQuery;
         } else if (mediaQuery) {
-          item[2] = '(' + item[2] + ') and (' + mediaQuery + ')';
+          item[2] = "(".concat(item[2], ") and (").concat(mediaQuery, ")");
         }
 
         list.push(item);
@@ -58,7 +62,8 @@ module.exports = function (useSourceMap) {
 };
 
 function cssWithMappingToString(item, useSourceMap) {
-  var content = item[1] || '';
+  var content = item[1] || ''; // eslint-disable-next-line prefer-destructuring
+
   var cssMapping = item[3];
 
   if (!cssMapping) {
@@ -68,7 +73,7 @@ function cssWithMappingToString(item, useSourceMap) {
   if (useSourceMap && typeof btoa === 'function') {
     var sourceMapping = toComment(cssMapping);
     var sourceURLs = cssMapping.sources.map(function (source) {
-      return '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */';
+      return "/*# sourceURL=".concat(cssMapping.sourceRoot).concat(source, " */");
     });
     return [content].concat(sourceURLs).concat([sourceMapping]).join('\n');
   }
@@ -80,6 +85,6 @@ function cssWithMappingToString(item, useSourceMap) {
 function toComment(sourceMap) {
   // eslint-disable-next-line no-undef
   var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));
-  var data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64;
-  return '/*# ' + data + ' */';
+  var data = "sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(base64);
+  return "/*# ".concat(data, " */");
 }

package/dist/runtime/{url-escape.js → getUrl.js}

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

package/dist/utils.js

@@ -3,15 +3,43 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.uniqWith = uniqWith;
+exports.flatten = flatten;
+exports.dashesCamelCase = dashesCamelCase;
 exports.getImportPrefix = getImportPrefix;
 exports.getLocalIdent = getLocalIdent;
-exports.dashesCamelCase = dashesCamelCase;
 exports.getFilter = getFilter;
-exports.placholderRegExps = void 0;
+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"));
 
-var _loaderUtils = _interopRequireDefault(require("loader-utils"));
+var _loaderUtils = _interopRequireWildcard(require("loader-utils"));
+
+var _normalizePath = _interopRequireDefault(require("normalize-path"));
+
+var _cssesc = _interopRequireDefault(require("cssesc"));
+
+var _postcssModulesValues = _interopRequireDefault(require("postcss-modules-values"));
+
+var _postcssModulesLocalByDefault = _interopRequireDefault(require("postcss-modules-local-by-default"));
+
+var _postcssModulesExtractImports = _interopRequireDefault(require("postcss-modules-extract-imports"));
+
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -19,11 +47,17 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
   MIT License http://www.opensource.org/licenses/mit-license.php
   Author Tobias Koppers @sokra
 */
-const placholderRegExps = {
-  importItemG: /___CSS_LOADER_IMPORT___([0-9]+)___/g,
-  importItem: /___CSS_LOADER_IMPORT___([0-9]+)___/
-};
-exports.placholderRegExps = placholderRegExps;
+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) {
@@ -35,9 +69,30 @@ function getImportPrefix(loaderContext, importLoaders) {
   return `-!${loadersRequest}!`;
 }
 
-function dashesCamelCase(str) {
-  return str.replace(/-+(\w)/g, (match, firstLetter) => firstLetter.toUpperCase());
-}
+const whitespace = '[\\x20\\t\\r\\n\\f]';
+const unescapeRegExp = new RegExp(`\\\\([\\da-f]{1,6}${whitespace}?|(${whitespace})|.)`, 'ig');
+
+function unescape(str) {
+  return str.replace(unescapeRegExp, (_, escaped, escapedWhitespace) => {
+    const high = `0x${escaped}` - 0x10000;
+    /* eslint-disable line-comment-position */
+    // NaN means non-codepoint
+    // Workaround erroneous numeric interpretation of +"0x"
+    // eslint-disable-next-line no-self-compare
+
+    return high !== high || escapedWhitespace ? escaped : high < 0 ? // BMP codepoint
+    String.fromCharCode(high + 0x10000) : // Supplemental Plane codepoint (surrogate pair)
+    // eslint-disable-next-line no-bitwise
+    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) {
@@ -45,28 +100,246 @@ function getLocalIdent(loaderContext, localIdentName, localName, options) {
     options.context = loaderContext.rootContext;
   }
 
-  const request = _path.default.relative(options.context, loaderContext.resourcePath).replace(/\\/g, '/'); // eslint-disable-next-line no-param-reassign
-
+  const request = (0, _normalizePath.default)(_path.default.relative(options.context || '', loaderContext.resourcePath)); // eslint-disable-next-line no-param-reassign
 
-  options.content = `${options.hashPrefix + request}+${localName}`; // eslint-disable-next-line no-param-reassign
+  options.content = `${options.hashPrefix + request}+${unescape(localName)}`; // Using `[path]` placeholder outputs `/` we need escape their
+  // Also directories can contains invalid characters for css we need escape their too
 
-  localIdentName = localIdentName.replace(/\[local\]/gi, localName);
-
-  const hash = _loaderUtils.default.interpolateName(loaderContext, localIdentName, options);
-
-  return hash.replace(new RegExp('[^a-zA-Z0-9\\-_\u00A0-\uFFFF]', 'g'), '-').replace(/^((-?[0-9])|--)/, '_$1');
+  return (0, _cssesc.default)(_loaderUtils.default.interpolateName(loaderContext, localIdentName, options) // For `[hash]` placeholder
+  .replace(/^((-?[0-9])|--)/, '_$1').replace(filenameReservedRegex, '-').replace(reControlChars, '-').replace(reRelativePath, '-').replace(/\./g, '-'), {
+    isIdentifier: true
+  }).replace(/\\\[local\\\]/gi, localName);
 }
 
 function getFilter(filter, resourcePath, defaultFilter = null) {
-  return content => {
-    if (defaultFilter && !defaultFilter(content)) {
+  return item => {
+    if (defaultFilter && !defaultFilter(item)) {
       return false;
     }
 
     if (typeof filter === 'function') {
-      return !filter(content, resourcePath);
+      return filter(item, resourcePath);
     }
 
     return true;
   };
+}
+
+function getModulesPlugins(options, loaderContext) {
+  let modulesOptions = {
+    mode: 'local',
+    localIdentName: '[hash:base64]',
+    getLocalIdent,
+    hashPrefix: '',
+    localIdentRegExp: null
+  };
+
+  if (typeof options.modules === 'boolean' || typeof options.modules === 'string') {
+    modulesOptions.mode = typeof options.modules === 'string' ? options.modules : 'local';
+  } else {
+    modulesOptions = Object.assign({}, modulesOptions, options.modules);
+  }
+
+  return [_postcssModulesValues.default, (0, _postcssModulesLocalByDefault.default)({
+    mode: modulesOptions.mode
+  }), (0, _postcssModulesExtractImports.default)(), (0, _postcssModulesScope.default)({
+    generateScopedName: function generateScopedName(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;
+    }
+  })];
+}
+
+function normalizeSourceMap(map) {
+  let newMap = map; // Some loader emit source map as string
+  // 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/, ''));
+  } // 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
+
+
+  if (newMap.file) {
+    newMap.file = (0, _normalizePath.default)(newMap.file);
+  }
+
+  if (newMap.sourceRoot) {
+    newMap.sourceRoot = (0, _normalizePath.default)(newMap.sourceRoot);
+  }
+
+  if (newMap.sources) {
+    newMap.sources = newMap.sources.map(source => (0, _normalizePath.default)(source));
+  }
+
+  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, 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);
+      }
+
+      break;
+
+    case 'camelCaseOnly':
+      addEntry((0, _camelcase.default)(key));
+      break;
+
+    case 'dashes':
+      addEntry(key);
+      targetKey = dashesCamelCase(key);
+
+      if (targetKey !== key) {
+        addEntry(targetKey);
+      }
+
+      break;
+
+    case 'dashesOnly':
+      addEntry(dashesCamelCase(key));
+      break;
+
+    case 'asIs':
+    default:
+      addEntry(key);
+      break;
+  }
+
+  return items.join(',\n');
+}
+
+function getExportCode(exportItems, onlyLocals) {
+  if (exportItems.length === 0) {
+    return '';
+  }
+
+  return `// Exports\n${onlyLocals ? 'module.exports' : 'exports.locals'} = {\n${exportItems.join(',\n')}\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 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`
+
+
+    if (message.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);
+      }
+    }
+  });
+  return [apiCode, importCode, moduleCode, exportCode].filter(Boolean).join('');
 }