css-loader 2.0.2 → 3.1.0

package/dist/index.js

@@ -11,18 +11,8 @@ var _postcss = _interopRequireDefault(require("postcss"));
 
 var _package = _interopRequireDefault(require("postcss/package.json"));
 
-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 _postcssModulesValues = _interopRequireDefault(require("postcss-modules-values"));
-
 var _loaderUtils = require("loader-utils");
 
-var _camelCase = _interopRequireDefault(require("lodash/camelCase"));
-
 var _options = _interopRequireDefault(require("./options.json"));
 
 var _plugins = require("./plugins");
@@ -41,29 +31,15 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 */
 function loader(content, map, meta) {
   const options = (0, _loaderUtils.getOptions)(this) || {};
-  (0, _schemaUtils.default)(_options.default, options, 'CSS Loader');
+  (0, _schemaUtils.default)(_options.default, options, {
+    name: 'CSS Loader',
+    baseDataPath: 'options'
+  });
   const callback = this.async();
-  const sourceMap = options.sourceMap || false;
-  /* eslint-disable no-param-reassign */
-
-  if (sourceMap) {
-    if (map) {
-      if (typeof map === 'string') {
-        map = JSON.stringify(map);
-      }
-
-      if (map.sources) {
-        map.sources = map.sources.map(source => source.replace(/\\/g, '/'));
-        map.sourceRoot = '';
-      }
-    }
-  } else {
-    // Some loaders (example `"postcss-loader": "1.x.x"`) always generates source map, we should remove it
-    map = null;
-  }
-  /* eslint-enable no-param-reassign */
-  // Reuse CSS AST (PostCSS AST e.g 'postcss-loader') to avoid reparsing
+  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 {
@@ -79,186 +55,69 @@ function loader(content, map, meta) {
   const plugins = [];
 
   if (options.modules) {
-    const loaderContext = this;
-    const mode = typeof options.modules === 'boolean' ? 'local' : options.modules;
-    plugins.push(_postcssModulesValues.default, (0, _postcssModulesLocalByDefault.default)({
-      mode
-    }), (0, _postcssModulesExtractImports.default)(), (0, _postcssModulesScope.default)({
-      generateScopedName: function generateScopedName(exportName) {
-        const localIdentName = options.localIdentName || '[hash:base64]';
-        const customGetLocalIdent = options.getLocalIdent || _utils.getLocalIdent;
-        return customGetLocalIdent(loaderContext, localIdentName, exportName, {
-          regExp: options.localIdentRegExp,
-          hashPrefix: options.hashPrefix || '',
-          context: options.context
-        });
-      }
-    }));
-  }
+    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
+  }));
 
   if (options.import !== false) {
     plugins.push((0, _plugins.importParser)({
+      loaderContext: this,
+      importPrefix,
       filter: (0, _utils.getFilter)(options.import, this.resourcePath)
     }));
   }
 
   if (options.url !== false) {
     plugins.push((0, _plugins.urlParser)({
+      loaderContext: this,
       filter: (0, _utils.getFilter)(options.url, this.resourcePath, value => (0, _loaderUtils.isUrlRequest)(value))
     }));
   }
 
-  plugins.push((0, _plugins.icssParser)());
   (0, _postcss.default)(plugins).process(content, {
-    // we need a prefix to avoid path rewriting of PostCSS
-    from: `/css-loader!${(0, _loaderUtils.getRemainingRequest)(this).split('!').pop()}`,
+    from: (0, _loaderUtils.getRemainingRequest)(this).split('!').pop(),
     to: (0, _loaderUtils.getCurrentRequest)(this).split('!').pop(),
     map: options.sourceMap ? {
       prev: map,
-      sourcesContent: true,
       inline: false,
       annotation: false
     } : null
   }).then(result => {
     result.warnings().forEach(warning => this.emitWarning(new _Warning.default(warning)));
-    const messages = result.messages || []; // Run other loader (`postcss-loader`, `sass-loader` and etc) for importing CSS
-
-    const importUrlPrefix = (0, _utils.getImportPrefix)(this, options.importLoaders); // Prepare replacer to change from `___CSS_LOADER_IMPORT___INDEX___` to `require('./file.css').locals`
-
-    const importItemReplacer = placeholder => {
-      const match = _utils.placholderRegExps.importItem.exec(placeholder);
-
-      const idx = Number(match[1]);
-      const message = messages.find( // eslint-disable-next-line no-shadow
-      message => message.type === 'icss-import' && message.item && message.item.index === idx);
-
-      if (!message) {
-        return placeholder;
-      }
-
-      const {
-        item
-      } = message;
-      const importUrl = importUrlPrefix + (0, _loaderUtils.urlToRequest)(item.url);
-
-      if (options.exportOnlyLocals) {
-        return `" + require(${(0, _loaderUtils.stringifyRequest)(this, importUrl)})[${JSON.stringify(item.export)}] + "`;
-      }
-
-      return `" + require(${(0, _loaderUtils.stringifyRequest)(this, importUrl)}).locals[${JSON.stringify(item.export)}] + "`;
-    };
-
-    const exports = messages.filter(message => message.type === 'export').reduce((accumulator, message) => {
-      const {
-        key,
-        value
-      } = message.item;
-      let valueAsString = JSON.stringify(value);
-      valueAsString = valueAsString.replace(_utils.placholderRegExps.importItemG, importItemReplacer);
-
-      function addEntry(k) {
-        accumulator.push(`\t${JSON.stringify(k)}: ${valueAsString}`);
-      }
-
-      let targetKey;
-
-      switch (options.camelCase) {
-        case true:
-          addEntry(key);
-          targetKey = (0, _camelCase.default)(key);
-
-          if (targetKey !== key) {
-            addEntry(targetKey);
-          }
 
-          break;
-
-        case 'dashes':
-          addEntry(key);
-          targetKey = (0, _utils.dashesCamelCase)(key);
-
-          if (targetKey !== key) {
-            addEntry(targetKey);
-          }
-
-          break;
-
-        case 'only':
-          addEntry((0, _camelCase.default)(key));
-          break;
-
-        case 'dashesOnly':
-          addEntry((0, _utils.dashesCamelCase)(key));
-          break;
-
-        default:
-          addEntry(key);
-          break;
-      }
+    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;
     }, []);
-
-    if (options.exportOnlyLocals) {
-      return callback(null, exports.length > 0 ? `module.exports = {\n${exports.join(',\n')}\n};` : '');
-    }
-
-    const imports = messages.filter(message => message.type === 'import').map(message => {
-      const {
-        url
-      } = message.item;
-      const media = message.item.media || '';
-
-      if (!(0, _loaderUtils.isUrlRequest)(url)) {
-        return `exports.push([module.id, ${JSON.stringify(`@import url(${url});`)}, ${JSON.stringify(media)}]);`;
-      }
-
-      const importUrl = importUrlPrefix + (0, _loaderUtils.urlToRequest)(url);
-      return `exports.i(require(${(0, _loaderUtils.stringifyRequest)(this, importUrl)}), ${JSON.stringify(media)});`;
-    }, this);
-    let cssAsString = JSON.stringify(result.css).replace(_utils.placholderRegExps.importItemG, importItemReplacer); // Helper for ensuring valid CSS strings from requires
-
-    let hasUrlEscapeHelper = false;
-    messages.filter(message => message.type === 'url').forEach(message => {
-      if (!hasUrlEscapeHelper) {
-        imports.push(`var urlEscape = require(${(0, _loaderUtils.stringifyRequest)(this, require.resolve('./runtime/url-escape.js'))});`);
-        hasUrlEscapeHelper = true;
-      }
-
-      const {
-        item
-      } = message;
-      const {
-        url,
-        placeholder
-      } = item; // Remove `#hash` and `?#hash` from `require`
-
-      const [normalizedUrl, singleQuery, hashValue] = url.split(/(\?)?#/);
-      const hash = singleQuery || hashValue ? `"${singleQuery ? '?' : ''}${hashValue ? `#${hashValue}` : ''}"` : '';
-      imports.push(`var ${placeholder} = urlEscape(require(${(0, _loaderUtils.stringifyRequest)(this, (0, _loaderUtils.urlToRequest)(normalizedUrl))})${hash ? ` + ${hash}` : ''});`);
-      cssAsString = cssAsString.replace(new RegExp(placeholder, 'g'), () => `" + ${placeholder} + "`);
-    });
-    let newMap = result.map;
-
-    if (sourceMap && newMap) {
-      // Add a SourceMap
-      newMap = newMap.toJSON();
-
-      if (newMap.sources) {
-        newMap.sources = newMap.sources.map(source => source.split('!').pop().replace(/\\/g, '/'), this);
-        newMap.sourceRoot = '';
-      }
-
-      newMap.file = newMap.file.split('!').pop().replace(/\\/g, '/');
-      newMap = JSON.stringify(newMap);
-    }
-
-    const runtimeCode = `exports = module.exports = require(${(0, _loaderUtils.stringifyRequest)(this, require.resolve('./runtime/api'))})(${!!sourceMap});\n`;
-    const importCode = imports.length > 0 ? `// Imports\n${imports.join('\n')}\n\n` : '';
-    const moduleCode = `// Module\nexports.push([module.id, ${cssAsString}, ""${newMap ? `,${newMap}` : ''}]);\n\n`;
-    const exportsCode = exports.length > 0 ? `// Exports\nexports.locals = {\n${exports.join(',\n')}\n};` : ''; // Embed runtime
-
-    return callback(null, runtimeCode + importCode + moduleCode + exportsCode);
+    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));
   }).catch(error => {
     callback(error.name === 'CssSyntaxError' ? new _CssSyntaxError.default(error) : error);
   });

package/dist/options.json

@@ -2,6 +2,7 @@
   "additionalProperties": false,
   "properties": {
     "url": {
+      "description": "Enables/Disables 'url'/'image-set' functions handling (https://github.com/webpack-contrib/css-loader#url).",
       "anyOf": [
         {
           "type": "boolean"
@@ -12,6 +13,7 @@
       ]
     },
     "import": {
+      "description": "Enables/Disables '@import' at-rules handling (https://github.com/webpack-contrib/css-loader#import).",
       "anyOf": [
         {
           "type": "boolean"
@@ -22,60 +24,60 @@
       ]
     },
     "modules": {
+      "description": "Enables/Disables CSS Modules and their configuration (https://github.com/webpack-contrib/css-loader#modules).",
       "anyOf": [
         {
           "type": "boolean"
         },
         {
-          "type": "string",
           "enum": ["local", "global"]
-        }
-      ]
-    },
-    "localIdentName": {
-      "type": "string"
-    },
-    "localIdentRegExp": {
-      "anyOf": [
-        {
-          "type": "string"
-        },
-        {
-          "instanceof": "RegExp"
-        }
-      ]
-    },
-    "context": {
-      "type": "string"
-    },
-    "hashPrefix": {
-      "type": "string"
-    },
-    "getLocalIdent": {
-      "anyOf": [
-        {
-          "type": "boolean"
         },
         {
-          "instanceof": "Function"
+          "type": "object",
+          "additionalProperties": false,
+          "properties": {
+            "mode": {
+              "enum": ["local", "global"]
+            },
+            "localIdentName": {
+              "type": "string"
+            },
+            "localIdentRegExp": {
+              "anyOf": [
+                {
+                  "type": "string"
+                },
+                {
+                  "instanceof": "RegExp"
+                }
+              ]
+            },
+            "context": {
+              "type": "string"
+            },
+            "hashPrefix": {
+              "type": "string"
+            },
+            "getLocalIdent": {
+              "anyOf": [
+                {
+                  "type": "boolean"
+                },
+                {
+                  "instanceof": "Function"
+                }
+              ]
+            }
+          }
         }
       ]
     },
     "sourceMap": {
+      "description": "Enables/Disables generation of source maps (https://github.com/webpack-contrib/css-loader#sourcemap).",
       "type": "boolean"
     },
-    "camelCase": {
-      "anyOf": [
-        {
-          "type": "boolean"
-        },
-        {
-          "type": "string",
-          "enum": ["dashes", "only", "dashesOnly"]
-        }
-      ]
-    },
     "importLoaders": {
+      "description": "Enables/Disables or setups number of loaders applied before CSS loader (https://github.com/webpack-contrib/css-loader#importloaders).",
       "anyOf": [
         {
           "type": "boolean"
@@ -85,7 +87,12 @@
         }
       ]
     },
-    "exportOnlyLocals": {
+    "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"
     }
   },

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

@@ -7,95 +7,81 @@ exports.default = void 0;
 
 var _postcss = _interopRequireDefault(require("postcss"));
 
-var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));
-
 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';
 
-var _default = _postcss.default.plugin(pluginName, () => function process(css, result) {
-  const imports = {};
-  const icss = (0, _icssUtils.extractICSS)(css);
-  const exports = icss.icssExports;
-  Object.keys(icss.icssImports).forEach(key => {
-    const url = _loaderUtils.default.parseString(key);
+function hasImportMessage(messages, url) {
+  return messages.find(message => message.pluginName === pluginName && message.type === 'import' && message.item.url === url && message.item.media === '');
+}
 
-    Object.keys(icss.icssImports[key]).forEach(prop => {
-      const index = Object.keys(imports).length;
-      imports[`$${prop}`] = index;
-      result.messages.push({
-        pluginName,
-        type: 'icss-import',
-        item: {
-          url,
-          export: icss.icssImports[key][prop],
-          index
-        }
-      });
-      const alreadyIncluded = result.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) {
+  const importReplacements = Object.create(null);
+  const {
+    icssImports,
+    icssExports
+  } = (0, _icssUtils.extractICSS)(css);
+  let index = 0;
 
-      if (alreadyIncluded) {
-        return;
-      }
+  for (const importUrl of Object.keys(icssImports)) {
+    const url = _loaderUtils.default.parseString(importUrl);
 
+    for (const token of Object.keys(icssImports[importUrl])) {
+      index += 1;
+      importReplacements[token] = `___CSS_LOADER_IMPORT___${index}___`;
       result.messages.push({
         pluginName,
-        type: 'import',
+        type: 'icss-import',
         item: {
           url,
-          media: ''
+          export: icssImports[importUrl][token],
+          index
         }
       });
-    });
-  });
-
-  function replaceImportsInString(str) {
-    const tokens = (0, _postcssValueParser.default)(str);
-    tokens.walk(node => {
-      if (node.type !== 'word') {
-        return;
-      }
-
-      const token = node.value;
-      const importIndex = imports[`$${token}`];
 
-      if (typeof importIndex === 'number') {
-        // eslint-disable-next-line no-param-reassign
-        node.value = `___CSS_LOADER_IMPORT___${importIndex}___`;
+      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
+          }
+        });
       }
-    });
-    return tokens.toString();
-  } // Replace tokens in declarations
-
-
-  css.walkDecls(decl => {
-    // eslint-disable-next-line no-param-reassign
-    decl.value = replaceImportsInString(decl.value.toString());
-  }); // Replace tokens in at-rules
-
-  css.walkAtRules(atrule => {
-    // Due reusing `ast` from `postcss-loader` some plugins may lack
-    // `params` property, we need to account for this possibility
-    if (atrule.params) {
-      // eslint-disable-next-line no-param-reassign
-      atrule.params = replaceImportsInString(atrule.params.toString());
     }
-  }); // Replace tokens in export
+  }
+
+  (0, _icssUtils.replaceSymbols)(css, importReplacements);
 
-  Object.keys(exports).forEach(exportName => {
+  for (const exportName of Object.keys(icssExports)) {
+    const name = exportName;
+    const value = (0, _icssUtils.replaceValueSymbols)(icssExports[name], importReplacements);
     result.messages.push({
       pluginName,
+      export: (0, _utils.getExportItemCode)(name, value, options.localsConvention),
       type: 'export',
       item: {
-        key: exportName,
-        value: replaceImportsInString(exports[exportName])
+        name,
+        value
       }
     });
-  });
+  }
 });
 
 exports.default = _default;

package/dist/plugins/postcss-import-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-import-parser';
@@ -91,18 +93,14 @@ function walkAtRules(css, result, filter) {
   return items;
 }
 
-function uniq(array) {
-  return array.reduce((acc, d) => !acc.find(el => el.url === d.url && el.media === d.media) ? [...acc, d] : acc, []);
-}
-
 var _default = _postcss.default.plugin(pluginName, (options = {}) => function process(css, result) {
   const traversed = walkAtRules(css, result, options.filter);
-  const paths = uniq(traversed);
+  const paths = (0, _utils.uniqWith)(traversed, (value, other) => value.url === other.url && value.media === other.media);
   paths.forEach(item => {
     result.messages.push({
       pluginName,
       type: 'import',
-      item
+      import: (0, _utils.getImportItemCode)(item, options.loaderContext, options.importPrefix)
     });
   });
 });