css-loader 5.0.2 → 5.1.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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.1.0](https://github.com/webpack-contrib/css-loader/compare/v5.0.2...v5.1.0) (2021-02-25)
+
+
+### Features
+
+* added support webpackIgnore comment ([#1264](https://github.com/webpack-contrib/css-loader/issues/1264)) ([53d40a9](https://github.com/webpack-contrib/css-loader/commit/53d40a9bb35a79e6a15308bbb7a01358f39816df))
+
 ### [5.0.2](https://github.com/webpack-contrib/css-loader/compare/v5.0.1...v5.0.2) (2021-02-08)
 
 

package/README.md

@@ -126,7 +126,7 @@ Type: `Boolean|Function`
 Default: `true`
 
 Enables/Disables `url`/`image-set` functions handling.
-Control `url()` resolving. Absolute URLs are not resolving.
+Control `url()` resolving. Absolute paths and root-relative URLs now resolving(Version [4.0.0](https://github.com/webpack-contrib/css-loader/blob/master/CHANGELOG.md#400-2020-07-25) and above).
 
 Examples resolutions:
 
@@ -588,8 +588,8 @@ Allows auto enable CSS modules based on filename.
 
 Possible values:
 
-- `true` - enable css modules for all files for which `/\.module\.\w+$/i.test(filename)` return true
-- `false` - disable css modules
+- `true` - enables CSS modules or interoperable CSS format, sets the [`modules.compileType`](#compiletype) option to `module` value for all files which satisfy `/\.module(s)?\.\w+$/i.test(filename)` condition or sets the [`modules.compileType`](#compiletype) option to `icss` value for all files which satisfy `/\.icss\.\w+$/i.test(filename)` condition
+- `false` - disables CSS modules or interoperable CSS format based on filename
 
 **webpack.config.js**
 
@@ -1132,6 +1132,60 @@ module.exports = {
 
 ## Examples
 
+### Disable url resolving using the `/* webpackIgnore: true */` comment
+
+With the help of the `/* webpackIgnore: true */`comment, it is possible to disable sources handling for rules and for individual declarations.
+
+```css
+/* webpackIgnore: true */
+@import url(./basic.css);
+@import /* webpackIgnore: true */ url(./imported.css);
+
+.class {
+  /* Disabled url handling for the all urls in the 'background' declaration */
+  color: red;
+  /* webpackIgnore: true */
+  background: url("./url/img.png"), url("./url/img.png");
+}
+
+.class {
+  /* Disabled url handling for the first url in the 'background' declaration */
+  color: red;
+  background: 
+    /* webpackIgnore: true */ url("./url/img.png"), url("./url/img.png");
+}
+
+.class {
+  /* Disabled url handling for the second url in the 'background' declaration */
+  color: red;
+  background: url("./url/img.png"),
+    /* webpackIgnore: true */ url("./url/img.png");
+}
+
+/* prettier-ignore */
+.class {
+  /* Disabled url handling for the second url in the 'background' declaration */
+  color: red;
+  background: url("./url/img.png"),
+    /* webpackIgnore: true */ 
+    url("./url/img.png");
+}
+
+/* prettier-ignore */
+.class {
+  /* Disabled url handling for third and sixth urls in the 'background-image' declaration */
+  background-image: image-set(
+    url(./url/img.png) 2x,
+    url(./url/img.png) 3x,
+    /* webpackIgnore:  true */ url(./url/img.png) 4x,
+    url(./url/img.png) 5x,
+    url(./url/img.png) 6x,
+    /* webpackIgnore:  true */
+    url(./url/img.png) 7x
+  );
+}
+```
+
 ### Assets
 
 The following `webpack.config.js` can load CSS files, embed small PNG/JPG/GIF/SVG images as well as fonts as [Data URLs](https://tools.ietf.org/html/rfc2397) and copy larger files to the output directory.

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

@@ -15,6 +15,25 @@ function visitor(result, parsedResults, node, key) {
   // Convert only top-level @import
   if (node.parent.type !== "root") {
     return;
+  }
+
+  if (node.raws.afterName && node.raws.afterName.trim().length > 0) {
+    const lastCommentIndex = node.raws.afterName.lastIndexOf("/*");
+    const matched = node.raws.afterName.slice(lastCommentIndex).match(_utils.webpackIgnoreCommentRegexp);
+
+    if (matched && matched[2] === "true") {
+      return;
+    }
+  }
+
+  const prevNode = node.prev();
+
+  if (prevNode && prevNode.type === "comment") {
+    const matched = prevNode.text.match(_utils.webpackIgnoreCommentRegexp);
+
+    if (matched && matched[2] === "true") {
+      return;
+    }
   } // Nodes do not exists - `@import url('http://') :root {}`
 
 

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

@@ -35,18 +35,82 @@ function shouldHandleRule(rule, node, result) {
   return true;
 }
 
+function getWebpackIgnoreCommentValue(index, nodes, inBetween) {
+  if (index === 0 && typeof inBetween !== "undefined") {
+    return inBetween;
+  }
+
+  let prevValueNode = nodes[index - 1];
+
+  if (!prevValueNode) {
+    // eslint-disable-next-line consistent-return
+    return;
+  }
+
+  if (prevValueNode.type === "space") {
+    if (!nodes[index - 2]) {
+      // eslint-disable-next-line consistent-return
+      return;
+    }
+
+    prevValueNode = nodes[index - 2];
+  }
+
+  if (prevValueNode.type !== "comment") {
+    // eslint-disable-next-line consistent-return
+    return;
+  }
+
+  const matched = prevValueNode.value.match(_utils.webpackIgnoreCommentRegexp);
+  return matched && matched[2] === "true";
+}
+
 function visitor(result, parsedResults, node, key) {
   if (!needParseDeclaration.test(node[key])) {
     return;
   }
 
-  const parsed = (0, _postcssValueParser.default)(node[key]);
-  parsed.walk(valueNode => {
+  const parsed = (0, _postcssValueParser.default)(typeof node.raws.value === "undefined" ? node[key] : node.raws.value.raw);
+  let inBetween;
+
+  if (typeof node.raws.between !== "undefined") {
+    const lastCommentIndex = node.raws.between.lastIndexOf("/*");
+    const matched = node.raws.between.slice(lastCommentIndex).match(_utils.webpackIgnoreCommentRegexp);
+
+    if (matched) {
+      inBetween = matched[2] === "true";
+    }
+  }
+
+  let isIgnoreOnDeclaration = false;
+  const prevNode = node.prev();
+
+  if (prevNode && prevNode.type === "comment") {
+    const matched = prevNode.text.match(_utils.webpackIgnoreCommentRegexp);
+
+    if (matched) {
+      isIgnoreOnDeclaration = matched[2] === "true";
+    }
+  }
+
+  let needIgnore;
+  parsed.walk((valueNode, index, valueNodes) => {
     if (valueNode.type !== "function") {
       return;
     }
 
     if (isUrlFunc.test(valueNode.value)) {
+      needIgnore = getWebpackIgnoreCommentValue(index, valueNodes, inBetween);
+
+      if (isIgnoreOnDeclaration && typeof needIgnore === "undefined" || needIgnore) {
+        if (needIgnore) {
+          // eslint-disable-next-line no-undefined
+          needIgnore = undefined;
+        }
+
+        return;
+      }
+
       const {
         nodes
       } = valueNode;
@@ -71,13 +135,25 @@ function visitor(result, parsedResults, node, key) {
 
       return false;
     } else if (isImageSetFunc.test(valueNode.value)) {
-      for (const nNode of valueNode.nodes) {
+      for (const [innerIndex, nNode] of valueNode.nodes.entries()) {
         const {
           type,
           value
         } = nNode;
 
         if (type === "function" && isUrlFunc.test(value)) {
+          needIgnore = getWebpackIgnoreCommentValue(innerIndex, valueNode.nodes);
+
+          if (isIgnoreOnDeclaration && typeof needIgnore === "undefined" || needIgnore) {
+            if (needIgnore) {
+              // eslint-disable-next-line no-undefined
+              needIgnore = undefined;
+            } // eslint-disable-next-line no-continue
+
+
+            continue;
+          }
+
           const {
             nodes
           } = nNode;
@@ -98,6 +174,18 @@ function visitor(result, parsedResults, node, key) {
             });
           }
         } else if (type === "string") {
+          needIgnore = getWebpackIgnoreCommentValue(innerIndex, valueNode.nodes);
+
+          if (isIgnoreOnDeclaration && typeof needIgnore === "undefined" || needIgnore) {
+            if (needIgnore) {
+              // eslint-disable-next-line no-undefined
+              needIgnore = undefined;
+            } // eslint-disable-next-line no-continue
+
+
+            continue;
+          }
+
           const rule = {
             node: nNode,
             url: value,

package/dist/utils.js

@@ -21,6 +21,7 @@ exports.getExportCode = getExportCode;
 exports.resolveRequests = resolveRequests;
 exports.isUrlRequestable = isUrlRequestable;
 exports.sort = sort;
+exports.webpackIgnoreCommentRegexp = void 0;
 
 var _url = require("url");
 
@@ -49,6 +50,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const whitespace = "[\\x20\\t\\r\\n\\f]";
 const unescapeRegExp = new RegExp(`\\\\([\\da-f]{1,6}${whitespace}?|(${whitespace})|.)`, "ig");
 const matchNativeWin32Path = /^[A-Z]:[/\\]|^\\\\/i;
+const webpackIgnoreCommentRegexp = /webpackIgnore:(\s+)?(true|false)/;
+exports.webpackIgnoreCommentRegexp = webpackIgnoreCommentRegexp;
 
 function unescape(str) {
   return str.replace(unescapeRegExp, (_, escaped, escapedWhitespace) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "css-loader",
-  "version": "5.0.2",
+  "version": "5.1.0",
   "description": "css loader module for webpack",
   "license": "MIT",
   "repository": "webpack-contrib/css-loader",
@@ -47,7 +47,7 @@
     "cssesc": "^3.0.0",
     "icss-utils": "^5.1.0",
     "loader-utils": "^2.0.0",
-    "postcss": "^8.2.4",
+    "postcss": "^8.2.6",
     "postcss-modules-extract-imports": "^3.0.0",
     "postcss-modules-local-by-default": "^4.0.0",
     "postcss-modules-scope": "^3.0.0",
@@ -57,9 +57,9 @@
     "semver": "^7.3.4"
   },
   "devDependencies": {
-    "@babel/cli": "^7.12.13",
-    "@babel/core": "^7.12.13",
-    "@babel/preset-env": "^7.12.13",
+    "@babel/cli": "^7.12.17",
+    "@babel/core": "^7.12.17",
+    "@babel/preset-env": "^7.12.17",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
     "@webpack-contrib/defaults": "^6.3.0",
@@ -69,7 +69,7 @@
     "del": "^6.0.0",
     "del-cli": "^3.0.1",
     "es-check": "^5.2.0",
-    "eslint": "^7.19.0",
+    "eslint": "^7.20.0",
     "eslint-config-prettier": "^7.2.0",
     "eslint-plugin-import": "^2.22.1",
     "file-loader": "^6.2.0",
@@ -77,22 +77,22 @@
     "jest": "^26.6.3",
     "less": "^4.1.1",
     "less-loader": "^7.1.0",
-    "lint-staged": "^10.5.3",
+    "lint-staged": "^10.5.4",
     "memfs": "^3.2.0",
-    "mini-css-extract-plugin": "^1.3.5",
+    "mini-css-extract-plugin": "^1.3.8",
     "npm-run-all": "^4.1.5",
     "postcss-loader": "^4.0.4",
     "postcss-preset-env": "^6.7.0",
     "prettier": "^2.1.2",
-    "sass": "^1.32.6",
+    "sass": "^1.32.8",
     "sass-loader": "^10.1.0",
-    "standard-version": "^9.0.0",
+    "standard-version": "^9.1.1",
     "strip-ansi": "^6.0.0",
     "style-loader": "^2.0.0",
     "stylus": "^0.54.8",
     "stylus-loader": "^4.3.0",
     "url-loader": "^4.1.1",
-    "webpack": "^5.20.1"
+    "webpack": "^5.23.0"
   },
   "keywords": [
     "webpack",