css-loader 4.3.0 → 5.0.0

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 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.
 
+## [5.0.0](https://github.com/webpack-contrib/css-loader/compare/v4.3.0...v5.0.0) (2020-10-13)
+
+
+### ⚠ BREAKING CHANGES
+
+* migrate on PostCSS 8
+* runtime doesn't contain source maps code without `sourceMap: true`
+* returned value from the `getLocalIdent` escapes by default, the `exportName` value is always unescaped
+* Auto enable icss modules for all files for which `/\.icss\.\w+$/i` (the `modules.compileType` option is `icss`)
+* `[emoji]` placeholder was deprecated
+* `icss` option was removed (it was deprecated previously)
+
+### Features
+
+* allow named exports to have underscores in names ([#1209](https://github.com/webpack-contrib/css-loader/issues/1209)) ([747d62b](https://github.com/webpack-contrib/css-loader/commit/747d62b75a878d8881f4819b96297667dc689b8f))
+* hide warning when you don't need handle `url()`/`@import` ([#1195](https://github.com/webpack-contrib/css-loader/issues/1195)) ([dd52931](https://github.com/webpack-contrib/css-loader/commit/dd52931150ed42f122d9017642437c26cc1b2422))
+* improve error message  ([52412f6](https://github.com/webpack-contrib/css-loader/commit/52412f6d5a54745ee37a4a67f038455c26ba5772))
+* reduce runtime ([9f974be](https://github.com/webpack-contrib/css-loader/commit/9f974be81f5942d3afaf783529677bd541952fa3))
+* add fallback if custom getLocalIdent returns `null`/`undefined` ([#1193](https://github.com/webpack-contrib/css-loader/issues/1193)) ([0f95841](https://github.com/webpack-contrib/css-loader/commit/0f9584135e63f9f354043e7f414e0c1aad0edc6e))
+
 ## [4.3.0](https://github.com/webpack-contrib/css-loader/compare/v4.2.2...v4.3.0) (2020-09-08)
 
 

package/README.md

@@ -530,7 +530,7 @@ module.exports = {
             auto: true,
             exportGlobals: true,
             localIdentName: '[path][name]__[local]--[hash:base64:5]',
-            context: path.resolve(__dirname, 'src'),
+            localIdentContext: path.resolve(__dirname, 'src'),
             localIdentHashPrefix: 'my-custom-hash',
             namedExport: true,
             exportLocalsConvention: 'camelCase',
@@ -780,7 +780,7 @@ module.exports = {
         loader: 'css-loader',
         options: {
           modules: {
-            context: path.resolve(__dirname, 'context'),
+            localIdentContext: path.resolve(__dirname, 'src'),
           },
         },
       },
@@ -848,6 +848,8 @@ Default: `undefined`
 
 Allows to specify a function to generate the classname.
 By default we use built-in function to generate a classname.
+If the custom function returns `null` or `undefined`, we fallback to the
+built-in function to generate the classname.
 
 **webpack.config.js**
 
@@ -1245,7 +1247,7 @@ module.exports = {
 
 ### Separating `Interoperable CSS`-only and `CSS Module` features
 
-The following setup is an example of allowing `Interoperable CSS` features only (such as `:import` and `:export`) without using further `CSS Module` functionality by setting `compileType` option for all files that do not match `*.module.scss` naming convention. This is for reference as having `ICSS` features applied to all files was default `css-loader` behavior before v4.  
+The following setup is an example of allowing `Interoperable CSS` features only (such as `:import` and `:export`) without using further `CSS Module` functionality by setting `compileType` option for all files that do not match `*.module.scss` naming convention. This is for reference as having `ICSS` features applied to all files was default `css-loader` behavior before v4.
 Meanwhile all files matching `*.module.scss` are treated as `CSS Modules` in this example.
 
 An example case is assumed where a project requires canvas drawing variables to be synchronized with CSS - canvas drawing uses the same color (set by color name in JavaScript) as HTML background (set by class name in CSS).

package/dist/CssSyntaxError.js

@@ -11,7 +11,8 @@ class CssSyntaxError extends Error {
     const {
       reason,
       line,
-      column
+      column,
+      file
     } = error;
     this.name = 'CssSyntaxError'; // Based on https://github.com/postcss/postcss/blob/master/lib/css-syntax-error.es6#L132
     // We don't need `plugin` and `file` properties.
@@ -22,6 +23,7 @@ class CssSyntaxError extends Error {
       this.message += `(${line}:${column}) `;
     }
 
+    this.message += file ? `${file} ` : '<css input> ';
     this.message += `${reason}`;
     const code = error.showSourceCode();
 

package/dist/index.js

@@ -11,7 +11,7 @@ var _postcss = _interopRequireDefault(require("postcss"));
 
 var _package = _interopRequireDefault(require("postcss/package.json"));
 
-var _schemaUtils = _interopRequireDefault(require("schema-utils"));
+var _schemaUtils = require("schema-utils");
 
 var _semver = require("semver");
 
@@ -33,7 +33,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 */
 async function loader(content, map, meta) {
   const rawOptions = (0, _loaderUtils.getOptions)(this);
-  (0, _schemaUtils.default)(_options.default, rawOptions, {
+  (0, _schemaUtils.validate)(_options.default, rawOptions, {
     name: 'CSS Loader',
     baseDataPath: 'options'
   });
@@ -138,6 +138,7 @@ async function loader(content, map, meta) {
 
   try {
     result = await (0, _postcss.default)(plugins).process(content, {
+      hideNothingWarning: true,
       from: resourcePath,
       to: resourcePath,
       map: options.sourceMap ? {
@@ -167,6 +168,13 @@ async function loader(content, map, meta) {
       importName: '___CSS_LOADER_API_IMPORT___',
       url: (0, _loaderUtils.stringifyRequest)(this, require.resolve('./runtime/api'))
     });
+
+    if (options.sourceMap) {
+      imports.unshift({
+        importName: '___CSS_LOADER_API_SOURCEMAP_IMPORT___',
+        url: (0, _loaderUtils.stringifyRequest)(this, require.resolve('./runtime/cssWithMappingToString'))
+      });
+    }
   }
 
   const importCode = (0, _utils.getImportCode)(imports, options);

package/dist/options.json

@@ -122,10 +122,6 @@
         }
       ]
     },
-    "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"

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

@@ -5,109 +5,114 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _postcss = _interopRequireDefault(require("postcss"));
-
 var _icssUtils = require("icss-utils");
 
 var _utils = require("../utils");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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
-
-  for (const url in icssImports) {
-    const tokens = icssImports[url];
-
-    if (Object.keys(tokens).length === 0) {
-      // eslint-disable-next-line no-continue
-      continue;
-    }
-
-    let normalizedUrl = url;
-    let prefix = '';
-    const queryParts = normalizedUrl.split('!');
+const plugin = (options = {}) => {
+  return {
+    postcssPlugin: 'postcss-icss-parser',
 
-    if (queryParts.length > 1) {
-      normalizedUrl = queryParts.pop();
-      prefix = queryParts.join('!');
-    }
-
-    const request = (0, _utils.requestify)((0, _utils.normalizeUrl)(normalizedUrl, true), options.rootContext);
-
-    const doResolve = async () => {
+    async OnceExit(root) {
+      const importReplacements = Object.create(null);
       const {
-        resolver,
-        context
-      } = options;
-      const resolvedUrl = await (0, _utils.resolveRequests)(resolver, context, [...new Set([normalizedUrl, request])]);
-      return {
-        url: resolvedUrl,
-        prefix,
-        tokens
-      };
-    };
-
-    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(newUrl),
-        icss: true,
-        index
-      });
-      options.api.push({
-        importName,
-        dedupe: true,
-        index
-      });
+        icssImports,
+        icssExports
+      } = (0, _icssUtils.extractICSS)(root);
+      const imports = new Map();
+      const tasks = []; // eslint-disable-next-line guard-for-in
+
+      for (const url in icssImports) {
+        const tokens = icssImports[url];
+
+        if (Object.keys(tokens).length === 0) {
+          // eslint-disable-next-line no-continue
+          continue;
+        }
+
+        let normalizedUrl = url;
+        let prefix = '';
+        const queryParts = normalizedUrl.split('!');
+
+        if (queryParts.length > 1) {
+          normalizedUrl = queryParts.pop();
+          prefix = queryParts.join('!');
+        }
+
+        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
+          };
+        };
+
+        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(newUrl),
+            icss: true,
+            index
+          });
+          options.api.push({
+            importName,
+            dedupe: true,
+            index
+          });
+        }
+
+        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;
+          options.replacements.push({
+            replacementName,
+            importName,
+            localName
+          });
+        }
+      }
+
+      if (Object.keys(importReplacements).length > 0) {
+        (0, _icssUtils.replaceSymbols)(root, importReplacements);
+      }
+
+      for (const name of Object.keys(icssExports)) {
+        const value = (0, _icssUtils.replaceValueSymbols)(icssExports[name], importReplacements);
+        options.exports.push({
+          name,
+          value
+        });
+      }
     }
 
-    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;
-      options.replacements.push({
-        replacementName,
-        importName,
-        localName
-      });
-    }
-  }
-
-  if (Object.keys(importReplacements).length > 0) {
-    (0, _icssUtils.replaceSymbols)(css, importReplacements);
-  }
-
-  for (const name of Object.keys(icssExports)) {
-    const value = (0, _icssUtils.replaceValueSymbols)(icssExports[name], importReplacements);
-    options.exports.push({
-      name,
-      value
-    });
-  }
-});
+  };
+};
 
+plugin.postcss = true;
+var _default = plugin;
 exports.default = _default;