css-loader 4.1.0 → 4.2.2

package/CHANGELOG.md

@@ -2,6 +2,34 @@
 
 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.2](https://github.com/webpack-contrib/css-loader/compare/v4.2.1...v4.2.2) (2020-08-24)
+
+
+### Bug Fixes
+
+* source maps generation, source from source maps are now relative to `compiler.context` and use `webpack://` protocol ([#1169](https://github.com/webpack-contrib/css-loader/issues/1169)) ([fb5c53d](https://github.com/webpack-contrib/css-loader/commit/fb5c53d80b10ee698762238bb7b122aec8c5048d))
+
+### [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)
 
 

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`
@@ -918,7 +951,7 @@ module.exports = {
 };
 ```
 
-##### `exportlocalsConvention`
+##### `exportLocalsConvention`
 
 Type: `String`
 Default: based on the `modules.namedExport` option value, if `true` - `camelCaseOnly`, otherwise `asIs`
@@ -1000,33 +1033,6 @@ module.exports = {
 };
 ```
 
-### `icss`
-
-Type: Boolean Default: `true` if `modules` are enabled, false otherwise
-
-Enables/disables handling of the low level "Interoperable CSS" format for declaring
-import and export dependencies between CSS and other languages. ICSS enables
-CSS Module support, and is enabled automatically when `modules` are enabled. It
-can also be enabled independently to allow other loaders to handle processing CSS modules.
-
-**webpack.config.js**
-
-```js
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.css$/i,
-        loader: 'css-loader',
-        options: {
-          icss: true,
-        },
-      },
-    ],
-  },
-};
-```
-
 ### `sourceMap`
 
 Type: `Boolean`
@@ -1237,6 +1243,111 @@ 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.  
+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).
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      // ...
+      // --------
+      // SCSS ALL EXCEPT MODULES
+      {
+        test: /\.scss$/,
+        exclude: /\.module\.scss$/,
+        use: [
+          {
+            loader: 'style-loader'
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              importLoaders: 1,
+              modules: {
+                compileType: 'icss'
+              }
+            }
+          },
+          {
+            loader: 'sass-loader'
+          },
+        ],
+      },
+      // --------
+      // SCSS MODULES
+      {
+        test: /\.module\.scss$/,
+        use: [
+          {
+            loader: 'style-loader'
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              importLoaders: 1,
+              modules: {
+                compileType: 'module'
+              }
+            }
+          },
+          {
+            loader: 'sass-loader'
+          },
+        ],
+      },
+      // --------
+      // ...
+  },
+};
+```
+
+**variables.scss**
+
+File treated as `ICSS`-only.
+
+```scss
+$colorBackground: red;
+:export {
+  colorBackgroundCanvas: $colorBackground;
+}
+```
+
+**Component.module.scss**
+
+File treated as `CSS Module`.
+
+```scss
+@import 'variables.scss';
+.componentClass {
+  background-color: $colorBackground;
+}
+```
+
+**Component.jsx**
+
+Using both `CSS Module` functionality as well as SCSS variables directly in JavaScript.
+
+```jsx
+import svars from 'variables.scss';
+import styles from 'Component.module.scss';
+
+// Render DOM with CSS modules class name
+// <div className={styles.componentClass}>
+//   <canvas ref={mountsCanvas}/>
+// </div>
+
+// Somewhere in JavaScript canvas drawing code use the variable directly
+// const ctx = mountsCanvas.current.getContext('2d',{alpha: false});
+ctx.fillStyle = `${svars.colorBackgroundCanvas}`;
+```
+
 ## Contributing
 
 Please take a moment to read our contributing guidelines if you haven't yet done so.

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));
   }
 
@@ -101,7 +100,7 @@ async function loader(content, map, meta) {
   const icssPluginImports = [];
   const icssPluginApi = [];
 
-  if (needUseModulesPlugins || options.icss) {
+  if ((0, _utils.shouldUseIcssPlugin)(options)) {
     const icssResolver = this.getResolve({
       conditionNames: ['style'],
       extensions: [],
@@ -132,15 +131,17 @@ async function loader(content, map, meta) {
     }
   }
 
+  const {
+    resourcePath
+  } = this;
   let result;
 
   try {
     result = await (0, _postcss.default)(plugins).process(content, {
-      from: this.resourcePath,
-      to: this.resourcePath,
+      from: resourcePath,
+      to: 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,
+        prev: map ? (0, _utils.normalizeSourceMap)(map, resourcePath) : null,
         inline: false,
         annotation: false
       } : false
@@ -169,7 +170,7 @@ async function loader(content, map, meta) {
   }
 
   const importCode = (0, _utils.getImportCode)(imports, options);
-  const moduleCode = (0, _utils.getModuleCode)(result, api, replacements, options);
+  const moduleCode = (0, _utils.getModuleCode)(result, api, replacements, options, this);
   const exportCode = (0, _utils.getExportCode)(exports, replacements, options);
   callback(null, `${importCode}${moduleCode}${exportCode}`);
 }

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": [

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

@@ -251,7 +251,6 @@ var _default = _postcss.default.plugin(pluginName, options => async (css, result
     decl.value = parsed.toString();
   }
 
-  console.timeEnd('URL');
   return Promise.resolve();
 });
 

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;
@@ -27,8 +28,6 @@ var _path = _interopRequireDefault(require("path"));
 
 var _loaderUtils = require("loader-utils");
 
-var _normalizePath = _interopRequireDefault(require("normalize-path"));
-
 var _cssesc = _interopRequireDefault(require("cssesc"));
 
 var _postcssModulesValues = _interopRequireDefault(require("postcss-modules-values"));
@@ -65,6 +64,10 @@ function unescape(str) {
     String.fromCharCode(high >> 10 | 0xd800, high & 0x3ff | 0xdc00);
     /* eslint-enable line-comment-position */
   });
+}
+
+function normalizePath(file) {
+  return _path.default.sep === '\\' ? file.replace(/\\/g, '/') : file;
 } // eslint-disable-next-line no-control-regex
 
 
@@ -80,7 +83,7 @@ function defaultGetLocalIdent(loaderContext, localIdentName, localName, options)
   const {
     resourcePath
   } = loaderContext;
-  const request = (0, _normalizePath.default)(_path.default.relative(context, resourcePath)); // eslint-disable-next-line no-param-reassign
+  const request = normalizePath(_path.default.relative(context, resourcePath)); // eslint-disable-next-line no-param-reassign
 
   options.content = `${hashPrefix + request}\x00${unescape(localName)}`; // Using `[path]` placeholder outputs `/` we need escape their
   // Also directories can contains invalid characters for css we need escape their too
@@ -141,6 +144,7 @@ function getModulesOptions(rawOptions, loaderContext) {
   }
 
   let modulesOptions = {
+    compileType: rawOptions.icss ? 'icss' : 'module',
     auto: true,
     mode: 'local',
     exportGlobals: false,
@@ -207,12 +211,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: modulesOptions,
-    icss: modulesOptions ? true : rawOptions.icss,
+    // 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
@@ -244,7 +253,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) {
@@ -279,26 +292,57 @@ function getModulesPlugins(options, loaderContext) {
   return plugins;
 }
 
-function normalizeSourceMap(map) {
+const IS_NATIVE_WIN32_PATH = /^[a-z]:[/\\]|^\\\\/i;
+const ABSOLUTE_SCHEME = /^[a-z0-9+\-.]+:/i;
+
+function getURLType(source) {
+  if (source[0] === '/') {
+    if (source[1] === '/') {
+      return 'scheme-relative';
+    }
+
+    return 'path-absolute';
+  }
+
+  if (IS_NATIVE_WIN32_PATH.test(source)) {
+    return 'path-absolute';
+  }
+
+  return ABSOLUTE_SCHEME.test(source) ? 'absolute' : 'path-relative';
+}
+
+function normalizeSourceMap(map, resourcePath) {
   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);
-  } // 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);
-  }
+  delete newMap.file;
+  const {
+    sourceRoot
+  } = newMap;
+  delete newMap.sourceRoot;
 
   if (newMap.sources) {
-    newMap.sources = newMap.sources.map(source => (0, _normalizePath.default)(source));
+    // 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
+    newMap.sources = newMap.sources.map(source => {
+      // Non-standard syntax from `postcss`
+      if (source.indexOf('<') === 0) {
+        return source;
+      }
+
+      const sourceType = getURLType(source); // Do no touch `scheme-relative` and `absolute` URLs
+
+      if (sourceType === 'path-relative' || sourceType === 'path-absolute') {
+        const absoluteSource = sourceType === 'path-relative' && sourceRoot ? _path.default.resolve(sourceRoot, normalizePath(source)) : normalizePath(source);
+        return _path.default.relative(_path.default.dirname(resourcePath), absoluteSource);
+      }
+
+      return source;
+    });
   }
 
   return newMap;
@@ -334,23 +378,58 @@ 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}` : '';
 }
 
-function getModuleCode(result, api, replacements, options) {
+function normalizeSourceMapForRuntime(map, loaderContext) {
+  const resultMap = map ? map.toJSON() : null;
+
+  if (resultMap) {
+    delete resultMap.file;
+    resultMap.sourceRoot = '';
+    resultMap.sources = resultMap.sources.map(source => {
+      // Non-standard syntax from `postcss`
+      if (source.indexOf('<') === 0) {
+        return source;
+      }
+
+      const sourceType = getURLType(source);
+
+      if (sourceType !== 'path-relative') {
+        return source;
+      }
+
+      const resourceDirname = _path.default.dirname(loaderContext.resourcePath);
+
+      const absoluteSource = _path.default.resolve(resourceDirname, source);
+
+      const contextifyPath = normalizePath(_path.default.relative(loaderContext.rootContext, absoluteSource));
+      return `webpack://${contextifyPath}`;
+    });
+  }
+
+  return JSON.stringify(resultMap);
+}
+
+function getModuleCode(result, api, replacements, options, loaderContext) {
   if (options.modules.exportOnlyLocals === true) {
-    return 'var ___CSS_LOADER_EXPORT___ = {};\n';
+    return '';
   }
 
-  const {
-    css,
-    map
-  } = result;
-  const sourceMapValue = options.sourceMap && map ? `,${map}` : '';
-  let code = JSON.stringify(css);
+  const sourceMapValue = options.sourceMap ? `,${normalizeSourceMapForRuntime(result.map, loaderContext)}` : '';
+  let code = JSON.stringify(result.css);
   let beforeCode = `var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(${options.sourceMap});\n`;
 
   for (const item of api) {
@@ -391,7 +470,7 @@ function dashesCamelCase(str) {
 }
 
 function getExportCode(exports, replacements, options) {
-  let code = '';
+  let code = '// Exports\n';
   let localsCode = '';
 
   const addExportToLocalsCode = (name, value) => {
@@ -464,18 +543,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) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "css-loader",
-  "version": "4.1.0",
+  "version": "4.2.2",
   "description": "css loader module for webpack",
   "license": "MIT",
   "repository": "webpack-contrib/css-loader",
@@ -47,7 +47,6 @@
     "cssesc": "^3.0.0",
     "icss-utils": "^4.1.1",
     "loader-utils": "^2.0.0",
-    "normalize-path": "^3.0.0",
     "postcss": "^7.0.32",
     "postcss-modules-extract-imports": "^2.0.0",
     "postcss-modules-local-by-default": "^3.0.3",
@@ -59,10 +58,10 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.10.5",
-    "@babel/core": "^7.10.5",
+    "@babel/core": "^7.11.4",
     "@babel/preset-env": "^7.10.4",
-    "@commitlint/cli": "^9.1.2",
-    "@commitlint/config-conventional": "^9.1.1",
+    "@commitlint/cli": "^10.0.0",
+    "@commitlint/config-conventional": "^10.0.0",
     "@webpack-contrib/defaults": "^6.3.0",
     "@webpack-contrib/eslint-config-webpack": "^3.0.0",
     "babel-jest": "^26.1.0",
@@ -76,20 +75,23 @@
     "file-loader": "^6.0.0",
     "husky": "^4.2.5",
     "jest": "^26.1.0",
+    "less-loader": "^6.2.0",
     "lint-staged": "^10.2.11",
     "memfs": "^3.2.0",
-    "mini-css-extract-plugin": "^0.9.0",
+    "mini-css-extract-plugin": "^0.10.0",
     "npm-run-all": "^4.1.5",
     "postcss-loader": "^3.0.0",
     "postcss-preset-env": "^6.7.0",
     "prettier": "^2.0.5",
     "sass": "^1.26.10",
     "sass-loader": "^9.0.2",
-    "standard-version": "^8.0.2",
+    "standard-version": "^9.0.0",
     "strip-ansi": "^6.0.0",
     "style-loader": "^1.2.1",
+    "stylus": "^0.54.8",
+    "stylus-loader": "^3.0.2",
     "url-loader": "^4.1.0",
-    "webpack": "^4.44.0"
+    "webpack": "^4.44.1"
   },
   "keywords": [
     "webpack",