css-loader 3.6.0 → 4.2.0

package/dist/index.js

@@ -31,41 +31,92 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
   MIT License http://www.opensource.org/licenses/mit-license.php
   Author Tobias Koppers @sokra
 */
-function loader(content, map, meta) {
-  const options = (0, _loaderUtils.getOptions)(this) || {};
-  (0, _schemaUtils.default)(_options.default, options, {
+async function loader(content, map, meta) {
+  const rawOptions = (0, _loaderUtils.getOptions)(this);
+  (0, _schemaUtils.default)(_options.default, rawOptions, {
     name: 'CSS Loader',
     baseDataPath: 'options'
   });
-  const callback = this.async();
-  const sourceMap = options.sourceMap || false;
   const plugins = [];
+  const callback = this.async();
+  let options;
 
-  if ((0, _utils.shouldUseModulesPlugins)(options.modules, this.resourcePath)) {
-    plugins.push(...(0, _utils.getModulesPlugins)(options, this));
+  try {
+    options = (0, _utils.normalizeOptions)(rawOptions, this);
+  } catch (error) {
+    callback(error);
+    return;
   }
 
-  const exportType = options.onlyLocals ? 'locals' : 'full';
-  const preRequester = (0, _utils.getPreRequester)(this);
+  const replacements = [];
+  const exports = [];
 
-  const urlHandler = url => (0, _loaderUtils.stringifyRequest)(this, preRequester(options.importLoaders) + url);
-
-  plugins.push((0, _plugins.icssParser)({
-    urlHandler
-  }));
+  if ((0, _utils.shouldUseModulesPlugins)(options)) {
+    plugins.push(...(0, _utils.getModulesPlugins)(options, this));
+  }
 
-  if (options.import !== false && exportType === 'full') {
+  const importPluginImports = [];
+  const importPluginApi = [];
+
+  if ((0, _utils.shouldUseImportPlugin)(options)) {
+    const resolver = this.getResolve({
+      conditionNames: ['style'],
+      extensions: ['.css'],
+      mainFields: ['css', 'style', 'main', '...'],
+      mainFiles: ['index', '...'],
+      restrictions: [/\.css$/i]
+    });
     plugins.push((0, _plugins.importParser)({
+      imports: importPluginImports,
+      api: importPluginApi,
+      context: this.context,
+      rootContext: this.rootContext,
       filter: (0, _utils.getFilter)(options.import, this.resourcePath),
-      urlHandler
+      resolver,
+      urlHandler: url => (0, _loaderUtils.stringifyRequest)(this, (0, _utils.getPreRequester)(this)(options.importLoaders) + url)
     }));
   }
 
-  if (options.url !== false && exportType === 'full') {
+  const urlPluginImports = [];
+
+  if ((0, _utils.shouldUseURLPlugin)(options)) {
+    const urlResolver = this.getResolve({
+      conditionNames: ['asset'],
+      mainFields: ['asset'],
+      mainFiles: [],
+      extensions: []
+    });
     plugins.push((0, _plugins.urlParser)({
-      filter: (0, _utils.getFilter)(options.url, this.resourcePath, value => (0, _loaderUtils.isUrlRequest)(value)),
+      imports: urlPluginImports,
+      replacements,
+      context: this.context,
+      rootContext: this.rootContext,
+      filter: (0, _utils.getFilter)(options.url, this.resourcePath),
+      resolver: urlResolver,
       urlHandler: url => (0, _loaderUtils.stringifyRequest)(this, url)
     }));
+  }
+
+  const icssPluginImports = [];
+  const icssPluginApi = [];
+
+  if ((0, _utils.shouldUseIcssPlugin)(options)) {
+    const icssResolver = this.getResolve({
+      conditionNames: ['style'],
+      extensions: [],
+      mainFields: ['css', 'style', 'main', '...'],
+      mainFiles: ['index', '...']
+    });
+    plugins.push((0, _plugins.icssParser)({
+      imports: icssPluginImports,
+      api: icssPluginApi,
+      replacements,
+      exports,
+      context: this.context,
+      rootContext: this.rootContext,
+      resolver: icssResolver,
+      urlHandler: url => (0, _loaderUtils.stringifyRequest)(this, (0, _utils.getPreRequester)(this)(options.importLoaders) + url)
+    }));
   } // Reuse CSS AST (PostCSS AST e.g 'postcss-loader') to avoid reparsing
 
 
@@ -80,64 +131,44 @@ function loader(content, map, meta) {
     }
   }
 
-  (0, _postcss.default)(plugins).process(content, {
-    from: this.resourcePath,
-    to: this.resourcePath,
-    map: options.sourceMap ? {
-      // 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
-  }).then(result => {
-    for (const warning of result.warnings()) {
-      this.emitWarning(new _Warning.default(warning));
-    }
-
-    const imports = [];
-    const apiImports = [];
-    const urlReplacements = [];
-    const icssReplacements = [];
-    const exports = [];
-
-    for (const message of result.messages) {
-      // eslint-disable-next-line default-case
-      switch (message.type) {
-        case 'import':
-          imports.push(message.value);
-          break;
-
-        case 'api-import':
-          apiImports.push(message.value);
-          break;
-
-        case 'url-replacement':
-          urlReplacements.push(message.value);
-          break;
-
-        case 'icss-replacement':
-          icssReplacements.push(message.value);
-          break;
-
-        case 'export':
-          exports.push(message.value);
-          break;
-      }
-    }
-
-    const {
-      localsConvention
-    } = options;
-    const esModule = typeof options.esModule !== 'undefined' ? options.esModule : false;
-    const importCode = (0, _utils.getImportCode)(this, exportType, imports, esModule);
-    const moduleCode = (0, _utils.getModuleCode)(result, exportType, sourceMap, apiImports, urlReplacements, icssReplacements, esModule);
-    const exportCode = (0, _utils.getExportCode)(exports, exportType, localsConvention, icssReplacements, esModule);
-    return callback(null, `${importCode}${moduleCode}${exportCode}`);
-  }).catch(error => {
+  let result;
+
+  try {
+    result = await (0, _postcss.default)(plugins).process(content, {
+      from: this.resourcePath,
+      to: this.resourcePath,
+      map: options.sourceMap ? {
+        // Some loaders (example `"postcss-loader": "1.x.x"`) always generates source map, we should remove it
+        prev: map ? (0, _utils.normalizeSourceMap)(map) : null,
+        inline: false,
+        annotation: false
+      } : false
+    });
+  } catch (error) {
     if (error.file) {
       this.addDependency(error.file);
     }
 
     callback(error.name === 'CssSyntaxError' ? new _CssSyntaxError.default(error) : error);
-  });
+    return;
+  }
+
+  for (const warning of result.warnings()) {
+    this.emitWarning(new _Warning.default(warning));
+  }
+
+  const imports = [].concat(icssPluginImports.sort(_utils.sort)).concat(importPluginImports.sort(_utils.sort)).concat(urlPluginImports.sort(_utils.sort));
+  const api = [].concat(importPluginApi.sort(_utils.sort)).concat(icssPluginApi.sort(_utils.sort));
+
+  if (options.modules.exportOnlyLocals !== true) {
+    imports.unshift({
+      importName: '___CSS_LOADER_API_IMPORT___',
+      url: (0, _loaderUtils.stringifyRequest)(this, require.resolve('./runtime/api'))
+    });
+  }
+
+  const importCode = (0, _utils.getImportCode)(imports, options);
+  const moduleCode = (0, _utils.getModuleCode)(result, api, replacements, options);
+  const exportCode = (0, _utils.getExportCode)(exports, replacements, options);
+  callback(null, `${importCode}${moduleCode}${exportCode}`);
 }

package/dist/options.json

@@ -36,7 +36,12 @@
           "type": "object",
           "additionalProperties": false,
           "properties": {
+            "compileType": {
+              "description": "Controls the extent to which css-loader will process module code (https://github.com/webpack-contrib/css-loader#type)",
+              "enum": ["module", "icss"]
+            },
             "auto": {
+              "description": "Allows auto enable CSS modules based on filename (https://github.com/webpack-contrib/css-loader#auto).",
               "anyOf": [
                 {
                   "instanceof": "RegExp"
@@ -50,6 +55,7 @@
               ]
             },
             "mode": {
+              "description": "Setup `mode` option (https://github.com/webpack-contrib/css-loader#mode).",
               "anyOf": [
                 {
                   "enum": ["local", "global", "pure"]
@@ -59,42 +65,67 @@
                 }
               ]
             },
-            "exportGlobals": {
-              "type": "boolean"
-            },
             "localIdentName": {
-              "type": "string"
+              "description": "Allows to configure the generated local ident name (https://github.com/webpack-contrib/css-loader#localidentname).",
+              "type": "string",
+              "minLength": 1
+            },
+            "localIdentContext": {
+              "description": "Allows to redefine basic loader context for local ident name (https://github.com/webpack-contrib/css-loader#localidentcontext).",
+              "type": "string",
+              "minLength": 1
+            },
+            "localIdentHashPrefix": {
+              "description": "Allows to add custom hash to generate more unique classes (https://github.com/webpack-contrib/css-loader#localidenthashprefix).",
+              "type": "string",
+              "minLength": 1
             },
             "localIdentRegExp": {
+              "description": "Allows to specify custom RegExp for local ident name (https://github.com/webpack-contrib/css-loader#localidentregexp).",
               "anyOf": [
                 {
-                  "type": "string"
+                  "type": "string",
+                  "minLength": 1
                 },
                 {
                   "instanceof": "RegExp"
                 }
               ]
             },
-            "context": {
-              "type": "string"
+            "getLocalIdent": {
+              "description": "Allows to specify a function to generate the classname (https://github.com/webpack-contrib/css-loader#getlocalident).",
+              "instanceof": "Function"
             },
-            "hashPrefix": {
-              "type": "string"
+            "namedExport": {
+              "description": "Enables/disables ES modules named export for locals (https://github.com/webpack-contrib/css-loader#namedexport).",
+              "type": "boolean"
             },
-            "getLocalIdent": {
-              "anyOf": [
-                {
-                  "type": "boolean"
-                },
-                {
-                  "instanceof": "Function"
-                }
+            "exportGlobals": {
+              "description": "Allows to export names from global class or id, so you can use that as local name (https://github.com/webpack-contrib/css-loader#exportglobals).",
+              "type": "boolean"
+            },
+            "exportLocalsConvention": {
+              "description": "Style of exported classnames (https://github.com/webpack-contrib/css-loader#localsconvention).",
+              "enum": [
+                "asIs",
+                "camelCase",
+                "camelCaseOnly",
+                "dashes",
+                "dashesOnly"
               ]
+            },
+            "exportOnlyLocals": {
+              "description": "Export only locals (https://github.com/webpack-contrib/css-loader#exportonlylocals).",
+              "type": "boolean"
             }
           }
         }
       ]
     },
+    "icss": {
+      "description": "Enables/Disables handling the CSS module interoperable import/export format ((https://github.com/webpack-contrib/css-loader#icss)",
+      "type": "boolean"
+    },
     "sourceMap": {
       "description": "Enables/Disables generation of source maps (https://github.com/webpack-contrib/css-loader#sourcemap).",
       "type": "boolean"
@@ -110,14 +141,6 @@
         }
       ]
     },
-    "localsConvention": {
-      "description": "Style of exported classnames (https://github.com/webpack-contrib/css-loader#localsconvention).",
-      "enum": ["asIs", "camelCase", "camelCaseOnly", "dashes", "dashesOnly"]
-    },
-    "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"

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

@@ -9,70 +9,90 @@ var _postcss = _interopRequireDefault(require("postcss"));
 
 var _icssUtils = require("icss-utils");
 
-var _loaderUtils = require("loader-utils");
+var _utils = require("../utils");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function makeRequestableIcssImports(icssImports) {
-  return Object.keys(icssImports).reduce((accumulator, url) => {
-    const tokensMap = icssImports[url];
-    const tokens = Object.keys(tokensMap);
+var _default = _postcss.default.plugin('postcss-icss-parser', options => async css => {
+  const importReplacements = Object.create(null);
+  const {
+    icssImports,
+    icssExports
+  } = (0, _icssUtils.extractICSS)(css);
+  const imports = new Map();
+  const tasks = []; // eslint-disable-next-line guard-for-in
 
-    if (tokens.length === 0) {
-      return accumulator;
+  for (const url in icssImports) {
+    const tokens = icssImports[url];
+
+    if (Object.keys(tokens).length === 0) {
+      // eslint-disable-next-line no-continue
+      continue;
     }
 
-    const normalizedUrl = (0, _loaderUtils.urlToRequest)(url);
+    let normalizedUrl = url;
+    let prefix = '';
+    const queryParts = normalizedUrl.split('!');
 
-    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
-      };
+    if (queryParts.length > 1) {
+      normalizedUrl = queryParts.pop();
+      prefix = queryParts.join('!');
     }
 
-    return accumulator;
-  }, {});
-}
+    const request = (0, _utils.requestify)((0, _utils.normalizeUrl)(normalizedUrl, true), options.rootContext);
+
+    const doResolve = async () => {
+      const {
+        resolver,
+        context
+      } = options;
+      const resolvedUrl = await (0, _utils.resolveRequests)(resolver, context, [...new Set([normalizedUrl, request])]);
+      return {
+        url: resolvedUrl,
+        prefix,
+        tokens
+      };
+    };
 
-var _default = _postcss.default.plugin('postcss-icss-parser', options => (css, result) => {
-  const importReplacements = Object.create(null);
-  const extractedICSS = (0, _icssUtils.extractICSS)(css);
-  const icssImports = makeRequestableIcssImports(extractedICSS.icssImports);
-
-  for (const [importIndex, url] of Object.keys(icssImports).entries()) {
-    const importName = `___CSS_LOADER_ICSS_IMPORT_${importIndex}___`;
-    result.messages.push({
-      type: 'import',
-      value: {
+    tasks.push(doResolve());
+  }
+
+  const results = await Promise.all(tasks);
+
+  for (let index = 0; index <= results.length - 1; index++) {
+    const {
+      url,
+      prefix,
+      tokens
+    } = results[index];
+    const newUrl = prefix ? `${prefix}!${url}` : url;
+    const importKey = newUrl;
+    let importName = imports.get(importKey);
+
+    if (!importName) {
+      importName = `___CSS_LOADER_ICSS_IMPORT_${imports.size}___`;
+      imports.set(importKey, importName);
+      options.imports.push({
         importName,
-        url: options.urlHandler ? options.urlHandler(url) : url
-      }
-    }, {
-      type: 'api-import',
-      value: {
-        type: 'internal',
+        url: options.urlHandler(newUrl),
+        icss: true,
+        index
+      });
+      options.api.push({
         importName,
-        dedupe: true
-      }
-    });
-    const tokenMap = icssImports[url];
-    const tokens = Object.keys(tokenMap);
+        dedupe: true,
+        index
+      });
+    }
 
-    for (const [replacementIndex, token] of tokens.entries()) {
-      const replacementName = `___CSS_LOADER_ICSS_IMPORT_${importIndex}_REPLACEMENT_${replacementIndex}___`;
-      const localName = tokenMap[token];
+    for (const [replacementIndex, token] of Object.keys(tokens).entries()) {
+      const replacementName = `___CSS_LOADER_ICSS_IMPORT_${index}_REPLACEMENT_${replacementIndex}___`;
+      const localName = tokens[token];
       importReplacements[token] = replacementName;
-      result.messages.push({
-        type: 'icss-replacement',
-        value: {
-          replacementName,
-          importName,
-          localName
-        }
+      options.replacements.push({
+        replacementName,
+        importName,
+        localName
       });
     }
   }
@@ -81,18 +101,11 @@ var _default = _postcss.default.plugin('postcss-icss-parser', options => (css, r
     (0, _icssUtils.replaceSymbols)(css, importReplacements);
   }
 
-  const {
-    icssExports
-  } = extractedICSS;
-
   for (const name of Object.keys(icssExports)) {
     const value = (0, _icssUtils.replaceValueSymbols)(icssExports[name], importReplacements);
-    result.messages.push({
-      type: 'export',
-      value: {
-        name,
-        value
-      }
+    options.exports.push({
+      name,
+      value
     });
   }
 });