css-loader 4.0.0 → 4.2.1

package/CHANGELOG.md

@@ -2,6 +2,41 @@
 
 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.
 
+### [4.2.1](https://github.com/webpack-contrib/css-loader/compare/v4.2.0...v4.2.1) (2020-08-06)
+
+
+### Bug Fixes
+
+* regression with the `exportOnlyLocals` option, now `locals` are not exported under the `locals` name, it was big regression, we apologize for that ([24c0a12](https://github.com/webpack-contrib/css-loader/commit/24c0a122d1396c08326a24f6184f5da09cf52ccc))
+
+## [4.2.0](https://github.com/webpack-contrib/css-loader/compare/v4.1.1...v4.2.0) (2020-07-31)
+
+
+### Features
+
+* add `module.type` option, the `icss` option is deprecated ([#1150](https://github.com/webpack-contrib/css-loader/issues/1150)) ([68f72af](https://github.com/webpack-contrib/css-loader/commit/68f72af2a09111f74dcacbf7af019fe7eb40cb6c))
+
+### [4.1.1](https://github.com/webpack-contrib/css-loader/compare/v4.1.0...v4.1.1) (2020-07-30)
+
+
+### Bug Fixes
+
+* remove unnecessary `console` call ([#1148](https://github.com/webpack-contrib/css-loader/issues/1148)) ([b1b90ca](https://github.com/webpack-contrib/css-loader/commit/b1b90caaea8eb045177749729340c7906454a84b))
+
+## [4.1.0](https://github.com/webpack-contrib/css-loader/compare/v4.0.0...v4.1.0) (2020-07-29)
+
+
+### Features
+
+* add `icss` option ([#1140](https://github.com/webpack-contrib/css-loader/issues/1140)) ([a8ec7da](https://github.com/webpack-contrib/css-loader/commit/a8ec7da42234e0b2eb061d2a920669940bcbdf05))
+* support absolute paths ([f9ba0ce](https://github.com/webpack-contrib/css-loader/commit/f9ba0ce11789770c4c9220478e9c98dbd432a5d6))
+
+
+### Bug Fixes
+
+* do not crash with `data` URLs ([#1142](https://github.com/webpack-contrib/css-loader/issues/1142)) ([91bc64b](https://github.com/webpack-contrib/css-loader/commit/91bc64b81abfeffd174639a8fdf2366412c11426))
+* performance ([#1144](https://github.com/webpack-contrib/css-loader/issues/1144)) ([4f1baa2](https://github.com/webpack-contrib/css-loader/commit/4f1baa211eb27b0b281ba9f262fa12e8aaefc0ba))
+
 ## [4.0.0](https://github.com/webpack-contrib/css-loader/compare/v3.6.0...v4.0.0) (2020-07-25)
 
 
@@ -19,7 +54,7 @@ All notable changes to this project will be documented in this file. See [standa
 * the `localsConvention` option was moved and renamed to the `modules.exportLocalsConvention` option
 * the `getLocalIndent` option should be always `Function` and should always return `String` value
 * the `onlyLocals` option was moved and renamed to the `modules.exportOnlyLocals` option
-* function arguments of the `import` option were changed, it is now `funciton(url, media, resourcePath) {}`
+* function arguments of the `import` option were changed, it is now `function(url, media, resourcePath) {}`
 * inline syntax was changed, please write `~` before the file request, i.e. rewrite `url(~!!loader!package/img.png)` to `url(!!loader!~package/img.png)`
 
 

package/README.md

@@ -113,10 +113,10 @@ module.exports = {
 | :-----------------------------------: | :-------------------------: | :----------------: | :--------------------------------------------------------------------- |
 |           **[`url`](#url)**           |    `{Boolean\|Function}`    |       `true`       | Enables/Disables `url`/`image-set` functions handling                  |
 |        **[`import`](#import)**        |    `{Boolean\|Function}`    |       `true`       | Enables/Disables `@import` at-rules handling                           |
-|       **[`modules`](#modules)**       | `{Boolean\|String\|Object}` |      `false`       | Enables/Disables CSS Modules and their configuration                   |
+|       **[`modules`](#modules)**       | `{Boolean\|String\|Object}` |   `{auto: true}`   | Enables/Disables CSS Modules and their configuration                   |
 |     **[`sourceMap`](#sourcemap)**     |         `{Boolean}`         | `compiler.devtool` | Enables/Disables generation of source maps                             |
 | **[`importLoaders`](#importloaders)** |         `{Number}`          |        `0`         | Enables/Disables or setups number of loaders applied before CSS loader |
-|      **[`esModule`](#esmodule)**      |         `{Boolean}`         |      `false`       | Use ES modules syntax                                                  |
+|      **[`esModule`](#esmodule)**      |         `{Boolean}`         |       `true`       | Use ES modules syntax                                                  |
 
 ### `url`
 
@@ -525,6 +525,7 @@ module.exports = {
         loader: 'css-loader',
         options: {
           modules: {
+            compileType: 'module',
             mode: 'local',
             auto: true,
             exportGlobals: true,
@@ -542,6 +543,38 @@ module.exports = {
 };
 ```
 
+##### `compileType`
+
+Type: `'module' | 'icss'`
+Default: `'module'`
+
+Controls the level of compilation applied to the input styles.
+
+The `module` handles `class` and `id` scoping and `@value` values.
+The `icss` will only compile the low level `Interoperable CSS` format for declaring `:import` and `:export` dependencies between CSS and other languages.
+
+ICSS underpins CSS Module support, and provides a low level syntax for other tools to implement CSS-module variations of their own.
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.css$/i,
+        loader: 'css-loader',
+        options: {
+          modules: {
+            compileType: 'icss',
+          },
+        },
+      },
+    ],
+  },
+};
+```
+
 ##### `auto`
 
 Type: `Boolean|RegExp|Function`

package/dist/index.js

@@ -50,9 +50,8 @@ async function loader(content, map, meta) {
 
   const replacements = [];
   const exports = [];
-  const needUseModulesPlugins = (0, _utils.shouldUseModulesPlugins)(options);
 
-  if (needUseModulesPlugins) {
+  if ((0, _utils.shouldUseModulesPlugins)(options)) {
     plugins.push(...(0, _utils.getModulesPlugins)(options, this));
   }
 
@@ -61,11 +60,11 @@ async function loader(content, map, meta) {
 
   if ((0, _utils.shouldUseImportPlugin)(options)) {
     const resolver = this.getResolve({
+      conditionNames: ['style'],
+      extensions: ['.css'],
       mainFields: ['css', 'style', 'main', '...'],
       mainFiles: ['index', '...'],
-      extensions: ['.css'],
-      restrictions: [/\.css$/i],
-      conditionNames: ['style']
+      restrictions: [/\.css$/i]
     });
     plugins.push((0, _plugins.importParser)({
       imports: importPluginImports,
@@ -82,8 +81,9 @@ async function loader(content, map, meta) {
 
   if ((0, _utils.shouldUseURLPlugin)(options)) {
     const urlResolver = this.getResolve({
-      mainFields: ['asset'],
       conditionNames: ['asset'],
+      mainFields: ['asset'],
+      mainFiles: [],
       extensions: []
     });
     plugins.push((0, _plugins.urlParser)({
@@ -100,12 +100,12 @@ async function loader(content, map, meta) {
   const icssPluginImports = [];
   const icssPluginApi = [];
 
-  if (needUseModulesPlugins) {
+  if ((0, _utils.shouldUseIcssPlugin)(options)) {
     const icssResolver = this.getResolve({
-      mainFields: ['css', 'style', 'main', '...'],
-      mainFiles: ['index', '...'],
+      conditionNames: ['style'],
       extensions: [],
-      conditionNames: ['style']
+      mainFields: ['css', 'style', 'main', '...'],
+      mainFiles: ['index', '...']
     });
     plugins.push((0, _plugins.icssParser)({
       imports: icssPluginImports,

package/dist/options.json

@@ -36,6 +36,10 @@
           "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": [
@@ -118,6 +122,10 @@
         }
       ]
     },
+    "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-import-parser.js

@@ -103,16 +103,16 @@ var _default = _postcss.default.plugin(pluginName, options => async (css, result
     } = parsedResult;
     let normalizedUrl = url;
     let prefix = '';
-    const queryParts = normalizedUrl.split('!');
-
-    if (queryParts.length > 1) {
-      normalizedUrl = queryParts.pop();
-      prefix = queryParts.join('!');
-    }
-
     const isRequestable = (0, _utils.isUrlRequestable)(normalizedUrl);
 
     if (isRequestable) {
+      const queryParts = normalizedUrl.split('!');
+
+      if (queryParts.length > 1) {
+        normalizedUrl = queryParts.pop();
+        prefix = queryParts.join('!');
+      }
+
       normalizedUrl = (0, _utils.normalizeUrl)(normalizedUrl, isStringValue); // Empty url after normalize - `@import '\
       // \
       // \
@@ -142,8 +142,7 @@ var _default = _postcss.default.plugin(pluginName, options => async (css, result
 
     if (isRequestable) {
       const request = (0, _utils.requestify)(normalizedUrl, options.rootContext);
-
-      const doResolve = async () => {
+      tasks.push((async () => {
         const {
           resolver,
           context
@@ -155,9 +154,7 @@ var _default = _postcss.default.plugin(pluginName, options => async (css, result
           prefix,
           isRequestable
         };
-      };
-
-      tasks.push(doResolve());
+      })());
     } else {
       tasks.push({
         url,

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

@@ -33,6 +33,10 @@ function shouldHandleRule(rule, decl, result) {
     return false;
   }
 
+  if (!(0, _utils.isUrlRequestable)(rule.url)) {
+    return false;
+  }
+
   return true;
 }
 
@@ -157,11 +161,6 @@ var _default = _postcss.default.plugin(pluginName, options => async (css, result
 
     normalizedUrl = (0, _utils.normalizeUrl)(normalizedUrl, isStringValue);
 
-    if (!(0, _utils.isUrlRequestable)(normalizedUrl)) {
-      // eslint-disable-next-line no-continue
-      continue;
-    }
-
     if (!options.filter(normalizedUrl)) {
       // eslint-disable-next-line no-continue
       continue;
@@ -181,8 +180,7 @@ var _default = _postcss.default.plugin(pluginName, options => async (css, result
     let hash = query ? '?' : '';
     hash += hashOrQuery ? `#${hashOrQuery}` : '';
     const request = (0, _utils.requestify)(pathname, options.rootContext);
-
-    const doResolve = async () => {
+    tasks.push((async () => {
       const {
         resolver,
         context
@@ -194,9 +192,7 @@ var _default = _postcss.default.plugin(pluginName, options => async (css, result
         hash,
         parsedResult
       };
-    };
-
-    tasks.push(doResolve());
+    })());
   }
 
   const results = await Promise.all(tasks);

package/dist/utils.js

@@ -7,6 +7,7 @@ exports.normalizeOptions = normalizeOptions;
 exports.shouldUseModulesPlugins = shouldUseModulesPlugins;
 exports.shouldUseImportPlugin = shouldUseImportPlugin;
 exports.shouldUseURLPlugin = shouldUseURLPlugin;
+exports.shouldUseIcssPlugin = shouldUseIcssPlugin;
 exports.normalizeUrl = normalizeUrl;
 exports.requestify = requestify;
 exports.getFilter = getFilter;
@@ -98,6 +99,10 @@ function normalizeUrl(url, isStringValue) {
     normalizedUrl = normalizedUrl.replace(/\\[\n]/g, '');
   }
 
+  if (matchNativeWin32Path.test(url)) {
+    return decodeURIComponent(normalizedUrl);
+  }
+
   return decodeURIComponent(unescape(normalizedUrl));
 }
 
@@ -106,7 +111,7 @@ function requestify(url, rootContext) {
     return (0, _url.fileURLToPath)(url);
   }
 
-  return mayBeServerRelativeUrl(url) ? (0, _loaderUtils.urlToRequest)(url, rootContext) : (0, _loaderUtils.urlToRequest)(url);
+  return url.charAt(0) === '/' ? (0, _loaderUtils.urlToRequest)(url, rootContext) : (0, _loaderUtils.urlToRequest)(url);
 }
 
 function getFilter(filter, resourcePath) {
@@ -137,6 +142,7 @@ function getModulesOptions(rawOptions, loaderContext) {
   }
 
   let modulesOptions = {
+    compileType: rawOptions.icss ? 'icss' : 'module',
     auto: true,
     mode: 'local',
     exportGlobals: false,
@@ -203,10 +209,17 @@ function getModulesOptions(rawOptions, loaderContext) {
 }
 
 function normalizeOptions(rawOptions, loaderContext) {
+  if (rawOptions.icss) {
+    loaderContext.emitWarning(new Error('The "icss" option is deprecated, use "modules.compileType: "icss"" instead'));
+  }
+
+  const modulesOptions = getModulesOptions(rawOptions, loaderContext);
   return {
     url: typeof rawOptions.url === 'undefined' ? true : rawOptions.url,
     import: typeof rawOptions.import === 'undefined' ? true : rawOptions.import,
-    modules: getModulesOptions(rawOptions, loaderContext),
+    modules: modulesOptions,
+    // TODO remove in the next major release
+    icss: typeof rawOptions.icss === 'undefined' ? false : rawOptions.icss,
     sourceMap: typeof rawOptions.sourceMap === 'boolean' ? rawOptions.sourceMap : loaderContext.sourceMap,
     importLoaders: rawOptions.importLoaders,
     esModule: typeof rawOptions.esModule === 'undefined' ? true : rawOptions.esModule
@@ -238,7 +251,11 @@ function shouldUseURLPlugin(options) {
 }
 
 function shouldUseModulesPlugins(options) {
-  return Boolean(options.modules);
+  return options.modules.compileType === 'module';
+}
+
+function shouldUseIcssPlugin(options) {
+  return options.icss === true || Boolean(options.modules);
 }
 
 function getModulesPlugins(options, loaderContext) {
@@ -328,7 +345,16 @@ function getImportCode(imports, options) {
       url,
       icss
     } = item;
-    code += options.esModule ? icss && options.modules.namedExport ? `import ${importName}, * as ${importName}_NAMED___ from ${url};\n` : `import ${importName} from ${url};\n` : `var ${importName} = require(${url});\n`;
+
+    if (options.esModule) {
+      if (icss && options.modules.namedExport) {
+        code += `import ${options.modules.exportOnlyLocals ? '' : `${importName}, `}* as ${importName}_NAMED___ from ${url};\n`;
+      } else {
+        code += `import ${importName} from ${url};\n`;
+      }
+    } else {
+      code += `var ${importName} = require(${url});\n`;
+    }
   }
 
   return code ? `// Imports\n${code}` : '';
@@ -336,7 +362,7 @@ function getImportCode(imports, options) {
 
 function getModuleCode(result, api, replacements, options) {
   if (options.modules.exportOnlyLocals === true) {
-    return 'var ___CSS_LOADER_EXPORT___ = {};\n';
+    return '';
   }
 
   const {
@@ -385,7 +411,7 @@ function dashesCamelCase(str) {
 }
 
 function getExportCode(exports, replacements, options) {
-  let code = '';
+  let code = '// Exports\n';
   let localsCode = '';
 
   const addExportToLocalsCode = (name, value) => {
@@ -458,18 +484,31 @@ function getExportCode(exports, replacements, options) {
       const {
         importName
       } = item;
-      localsCode = localsCode.replace(new RegExp(replacementName, 'g'), () => options.modules.namedExport ? `" + ${importName}_NAMED___[${JSON.stringify((0, _camelcase.default)(localName))}] + "` : `" + ${importName}.locals[${JSON.stringify(localName)}] + "`);
+      localsCode = localsCode.replace(new RegExp(replacementName, 'g'), () => {
+        if (options.modules.namedExport) {
+          return `" + ${importName}_NAMED___[${JSON.stringify((0, _camelcase.default)(localName))}] + "`;
+        } else if (options.modules.exportOnlyLocals) {
+          return `" + ${importName}[${JSON.stringify(localName)}] + "`;
+        }
+
+        return `" + ${importName}.locals[${JSON.stringify(localName)}] + "`;
+      });
     } else {
       localsCode = localsCode.replace(new RegExp(replacementName, 'g'), () => `" + ${replacementName} + "`);
     }
   }
 
+  if (options.modules.exportOnlyLocals) {
+    code += options.modules.namedExport ? localsCode : `${options.esModule ? 'export default' : 'module.exports ='} {\n${localsCode}\n};\n`;
+    return code;
+  }
+
   if (localsCode) {
-    code += options.modules.namedExport ? `${localsCode}` : `___CSS_LOADER_EXPORT___.locals = {\n${localsCode}\n};\n`;
+    code += options.modules.namedExport ? localsCode : `___CSS_LOADER_EXPORT___.locals = {\n${localsCode}\n};\n`;
   }
 
   code += `${options.esModule ? 'export default' : 'module.exports ='} ___CSS_LOADER_EXPORT___;\n`;
-  return `// Exports\n${code}`;
+  return code;
 }
 
 async function resolveRequests(resolve, context, possibleRequests) {
@@ -485,33 +524,29 @@ async function resolveRequests(resolve, context, possibleRequests) {
     return resolveRequests(resolve, context, tailPossibleRequests);
   });
 }
-/*
- * May be url is server-relative url, but not //example.com
- * */
+
+function isUrlRequestable(url) {
+  // Protocol-relative URLs
+  if (/^\/\//.test(url)) {
+    return false;
+  } // `file:` protocol
 
 
-function mayBeServerRelativeUrl(url) {
-  if (url.charAt(0) === '/' && !/^\/\//.test(url)) {
+  if (/^file:/i.test(url)) {
     return true;
-  }
+  } // Absolute URLs
 
-  return false;
-}
 
-function isUrlRequestable(url) {
-  if (matchNativeWin32Path.test(url)) {
+  if (/^[a-z][a-z0-9+.-]*:/i.test(url) && !matchNativeWin32Path.test(url)) {
     return false;
-  }
+  } // `#` URLs
 
-  if (mayBeServerRelativeUrl(url)) {
-    return true;
-  }
 
-  if (/^file:/i.test(url)) {
-    return true;
+  if (/^#/.test(url)) {
+    return false;
   }
 
-  return (0, _loaderUtils.isUrlRequest)(url);
+  return true;
 }
 
 function sort(a, b) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "css-loader",
-  "version": "4.0.0",
+  "version": "4.2.1",
   "description": "css loader module for webpack",
   "license": "MIT",
   "repository": "webpack-contrib/css-loader",