feat: issue 1256

Author: cap-Bernardito

README.md

@@ -1132,6 +1132,38 @@ module.exports = {
 
 ## Examples
 
+### Disabling sources 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);
+
+/** webpackIgnore: true */
+.class {
+  color: red;
+  background: url("./url/img.png");
+}
+
+.class {
+  color: red;
+  background: /** webpackIgnore: true */ url("./url/img.png");
+}
+
+.class {
+  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-lock.json

@@ -5,6 +5,7 @@ import {
   resolveRequests,
   isUrlRequestable,
   requestify,
+  isWebpackIgnoreSource,
 } from "../utils";
 
 function visitor(result, parsedResults, node, key) {
@@ -96,6 +97,10 @@ const plugin = (options = {}) => {
           for (const parsedResult of parsedResults) {
             const { node, url, isStringValue, mediaNodes } = parsedResult;
 
+            if (isWebpackIgnoreSource(node)) {
+              return;
+            }
+
             let normalizedUrl = url;
             let prefix = "";
 

src/plugins/postcss-import-parser.js

@@ -5,6 +5,8 @@ import {
   requestify,
   resolveRequests,
   isUrlRequestable,
+  isWebpackIgnoreSource,
+  webpackIgnoreRegexp,
 } from "../utils";
 
 const isUrlFunc = /url/i;
@@ -35,13 +37,33 @@ function visitor(result, parsedResults, node, key) {
     return;
   }
 
-  const parsed = valueParser(node[key]);
+  if (isWebpackIgnoreSource(node)) {
+    return;
+  }
+
+  const parsed = valueParser(
+    typeof node.raws.value === "undefined" ? node[key] : node.raws.value.raw
+  );
+
+  let webpackIgnore = false;
 
   parsed.walk((valueNode) => {
+    if (valueNode.type === "comment") {
+      if (webpackIgnoreRegexp.test(valueNode.value)) {
+        webpackIgnore = true;
+      }
+      return;
+    }
+
     if (valueNode.type !== "function") {
       return;
     }
 
+    if (webpackIgnore) {
+      webpackIgnore = false;
+      return;
+    }
+
     if (isUrlFunc.test(valueNode.value)) {
       const { nodes } = valueNode;
       const isStringValue = nodes.length !== 0 && nodes[0].type === "string";
@@ -62,10 +84,26 @@ function visitor(result, parsedResults, node, key) {
       // eslint-disable-next-line consistent-return
       return false;
     } else if (isImageSetFunc.test(valueNode.value)) {
+      let imageSetWebpackIgnore = false;
+
       for (const nNode of valueNode.nodes) {
         const { type, value } = nNode;
 
+        if (type === "comment") {
+          if (webpackIgnoreRegexp.test(value)) {
+            imageSetWebpackIgnore = true;
+          }
+          // eslint-disable-next-line no-continue
+          continue;
+        }
+
         if (type === "function" && isUrlFunc.test(value)) {
+          if (imageSetWebpackIgnore) {
+            imageSetWebpackIgnore = false;
+            // eslint-disable-next-line no-continue
+            continue;
+          }
+
           const { nodes } = nNode;
           const isStringValue =
             nodes.length !== 0 && nodes[0].type === "string";

src/plugins/postcss-url-parser.js

@@ -19,6 +19,7 @@ const unescapeRegExp = new RegExp(
   "ig"
 );
 const matchNativeWin32Path = /^[A-Z]:[/\\]|^\\\\/i;
+const webpackIgnoreRegexp = /webpackIgnore:(\s+)?true/i;
 
 function unescape(str) {
   return str.replace(unescapeRegExp, (_, escaped, escapedWhitespace) => {
@@ -702,6 +703,40 @@ function sort(a, b) {
   return a.index - b.index;
 }
 
+function isWebpackIgnoreSource(node) {
+  if (webpackIgnoreRegexp.test(node.raws.afterName)) {
+    return true;
+  }
+
+  if (webpackIgnoreRegexp.test(node.raws.between)) {
+    return true;
+  }
+
+  let rule;
+
+  // eslint-disable-next-line default-case
+  switch (node.type) {
+    case "atrule":
+      rule = node;
+      break;
+    case "decl":
+      rule = node.parent;
+      break;
+  }
+
+  const prevNode = rule.prev();
+
+  if (typeof prevNode === "undefined") {
+    return false;
+  }
+
+  if (prevNode.type !== "comment") {
+    return false;
+  }
+
+  return webpackIgnoreRegexp.test(prevNode.text);
+}
+
 export {
   normalizeOptions,
   shouldUseModulesPlugins,
@@ -721,4 +756,6 @@ export {
   resolveRequests,
   isUrlRequestable,
   sort,
+  isWebpackIgnoreSource,
+  webpackIgnoreRegexp,
 };

src/utils.js

@@ -723,6 +723,152 @@ exports[`loader should work with the "modules.auto" option and the "importLoader
 
 exports[`loader should work with the "modules.auto" option and the "importLoaders" option: warnings 1`] = `Array []`;
 
+exports[`loader should work with webpackIgnore comment: errors 1`] = `Array []`;
+
+exports[`loader should work with webpackIgnore comment: module 1`] = `
+"// Imports
+import ___CSS_LOADER_API_IMPORT___ from \\"../../src/runtime/api.js\\";
+import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../src/runtime/getUrl.js\\";
+import ___CSS_LOADER_URL_IMPORT_0___ from \\"./url/img.png\\";
+import ___CSS_LOADER_URL_IMPORT_1___ from \\"./fonts/Roboto-Regular.eot\\";
+import ___CSS_LOADER_URL_IMPORT_2___ from \\"./fonts/Roboto-Regular.woff\\";
+import ___CSS_LOADER_URL_IMPORT_3___ from \\"./fonts/Roboto-Regular.svg\\";
+var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
+var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
+var ___CSS_LOADER_URL_REPLACEMENT_1___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_1___);
+var ___CSS_LOADER_URL_REPLACEMENT_2___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_1___, { hash: \\"#iefix\\" });
+var ___CSS_LOADER_URL_REPLACEMENT_3___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_2___);
+var ___CSS_LOADER_URL_REPLACEMENT_4___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_3___, { hash: \\"#Roboto-Regular\\" });
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, \\"/*webpackIgnore:  true*/\\\\n@import url(./basic.css);\\\\n\\\\n@import /* webpackIgnore:   true */ url(./imported.css);\\\\n\\\\n/** webpackIgnore: true **/\\\\n@import url(./simple.css);\\\\n\\\\n/** webpackIgnore: true */\\\\n.class {\\\\n  color: red;\\\\n  background: url(\\\\\\"./url/img.png\\\\\\");\\\\n}\\\\n\\\\n.class {\\\\n  color: red;\\\\n  background: /** webpackIgnore: true */ url(\\\\\\"./url/img.png\\\\\\");\\\\n}\\\\n\\\\n.class {\\\\n  background:\\\\n    url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\"),\\\\n    url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\"),\\\\n      /** webpackIgnore: true **/ url(\\\\\\"./url/img.png\\\\\\"),\\\\n    url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\"),\\\\n      /** webpackIgnore: true **/ url(\\\\\\"./url/img.png\\\\\\"),\\\\n    url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\"),\\\\n    url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\"),\\\\n    url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\"),\\\\n      /** webpackIgnore: true **/\\\\n    url(\\\\\\"./url/img.png\\\\\\");\\\\n}\\\\n\\\\n/** webpackIgnore: true **/\\\\n@font-face {\\\\n  font-family: \\\\\\"Roboto\\\\\\";\\\\n  src: url(\\\\\\"./fonts/Roboto-Regular.eot\\\\\\");\\\\n  src:\\\\n    url(\\\\\\"./fonts/Roboto-Regular.eot#iefix\\\\\\") format(\\\\\\"embedded-opentype\\\\\\"),\\\\n    url(\\\\\\"./fonts/Roboto-Regular.woff2\\\\\\") format(\\\\\\"woff\\\\\\"),\\\\n    url(\\\\\\"./fonts/Roboto-Regular.woff\\\\\\") format(\\\\\\"woff\\\\\\"),\\\\n    url(\\\\\\"./fonts/Roboto-Regular.ttf\\\\\\") format(\\\\\\"truetype\\\\\\"),\\\\n    url(\\\\\\"./fonts/Roboto-Regular.svg#Roboto-Regular\\\\\\") format(\\\\\\"svg\\\\\\");\\\\n  font-weight: 400;\\\\n  font-style: normal;\\\\n}\\\\n\\\\n@font-face {\\\\n  font-family: \\\\\\"Roboto\\\\\\";\\\\n  src: /** webpackIgnore: true **/ url(\\\\\\"./fonts/Roboto-Regular.eot\\\\\\");\\\\n  src: /** webpackIgnore: true **/\\\\n    url(\\\\\\"./fonts/Roboto-Regular.eot#iefix\\\\\\") format(\\\\\\"embedded-opentype\\\\\\"),\\\\n    url(\\\\\\"./fonts/Roboto-Regular.woff2\\\\\\") format(\\\\\\"woff\\\\\\"),\\\\n    url(\\\\\\"./fonts/Roboto-Regular.woff\\\\\\") format(\\\\\\"woff\\\\\\"),\\\\n    url(\\\\\\"./fonts/Roboto-Regular.ttf\\\\\\") format(\\\\\\"truetype\\\\\\"),\\\\n    url(\\\\\\"./fonts/Roboto-Regular.svg#Roboto-Regular\\\\\\") format(\\\\\\"svg\\\\\\");\\\\n  font-weight: 400;\\\\n  font-style: normal;\\\\n}\\\\n\\\\n@font-face {\\\\n  font-family: \\\\\\"Roboto\\\\\\";\\\\n  src: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_1___ + \\");\\\\n  src:\\\\n    url(\\" + ___CSS_LOADER_URL_REPLACEMENT_2___ + \\") format(\\\\\\"embedded-opentype\\\\\\"),\\\\n      /** webpackIgnore: true **/\\\\n    url(\\\\\\"./fonts/Roboto-Regular.woff2\\\\\\") format(\\\\\\"woff\\\\\\"),\\\\n    url(\\" + ___CSS_LOADER_URL_REPLACEMENT_3___ + \\") format(\\\\\\"woff\\\\\\"),\\\\n      /** webpackIgnore: true **/\\\\n    url(\\\\\\"./fonts/Roboto-Regular.ttf\\\\\\") format(\\\\\\"truetype\\\\\\"),\\\\n    url(\\" + ___CSS_LOADER_URL_REPLACEMENT_4___ + \\") format(\\\\\\"svg\\\\\\");\\\\n  font-weight: 400;\\\\n  font-style: normal;\\\\n}\\\\n\\\\n/*webpackIgnore:  true*/\\\\n.class {\\\\n  background-image: image-set(\\\\n    url(./url/img.png) 2x,\\\\n    url(./url/img.png) 3x,\\\\n    url(./url/img.png) 4x,\\\\n    url(./url/img.png) 5x,\\\\n    url(./url/img.png) 6x,\\\\n    url(./url/img.png) 7x\\\\n  );\\\\n}\\\\n\\\\n.class {\\\\n  background-image: /*webpackIgnore:  true*/ image-set(\\\\n    url(./url/img.png) 2x,\\\\n    url(./url/img.png) 3x,\\\\n    url(./url/img.png) 4x,\\\\n    url(./url/img.png) 5x,\\\\n    url(./url/img.png) 6x,\\\\n    url(./url/img.png) 7x\\\\n  );\\\\n}\\\\n\\\\n.class {\\\\n  background-image: image-set(\\\\n    url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\") 2x,\\\\n    url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\") 3x,\\\\n      /*webpackIgnore:  true*/\\\\n    url(./url/img.png) 4x,\\\\n    url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\") 5x,\\\\n    url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\") 6x,\\\\n      /*webpackIgnore:  true*/\\\\n    url(./url/img.png) 7x\\\\n  );\\\\n}\\\\n\\\\n\\", \\"\\"]);
+// Exports
+export default ___CSS_LOADER_EXPORT___;
+"
+`;
+
+exports[`loader should work with webpackIgnore comment: result 1`] = `
+Array [
+  Array [
+    "./webpackIgnore.css",
+    "/*webpackIgnore:  true*/
+@import url(./basic.css);
+
+@import /* webpackIgnore:   true */ url(./imported.css);
+
+/** webpackIgnore: true **/
+@import url(./simple.css);
+
+/** webpackIgnore: true */
+.class {
+  color: red;
+  background: url(\\"./url/img.png\\");
+}
+
+.class {
+  color: red;
+  background: /** webpackIgnore: true */ url(\\"./url/img.png\\");
+}
+
+.class {
+  background:
+    url(/webpack/public/path/img.png),
+    url(/webpack/public/path/img.png),
+      /** webpackIgnore: true **/ url(\\"./url/img.png\\"),
+    url(/webpack/public/path/img.png),
+      /** webpackIgnore: true **/ url(\\"./url/img.png\\"),
+    url(/webpack/public/path/img.png),
+    url(/webpack/public/path/img.png),
+    url(/webpack/public/path/img.png),
+      /** webpackIgnore: true **/
+    url(\\"./url/img.png\\");
+}
+
+/** webpackIgnore: true **/
+@font-face {
+  font-family: \\"Roboto\\";
+  src: url(\\"./fonts/Roboto-Regular.eot\\");
+  src:
+    url(\\"./fonts/Roboto-Regular.eot#iefix\\") format(\\"embedded-opentype\\"),
+    url(\\"./fonts/Roboto-Regular.woff2\\") format(\\"woff\\"),
+    url(\\"./fonts/Roboto-Regular.woff\\") format(\\"woff\\"),
+    url(\\"./fonts/Roboto-Regular.ttf\\") format(\\"truetype\\"),
+    url(\\"./fonts/Roboto-Regular.svg#Roboto-Regular\\") format(\\"svg\\");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: \\"Roboto\\";
+  src: /** webpackIgnore: true **/ url(\\"./fonts/Roboto-Regular.eot\\");
+  src: /** webpackIgnore: true **/
+    url(\\"./fonts/Roboto-Regular.eot#iefix\\") format(\\"embedded-opentype\\"),
+    url(\\"./fonts/Roboto-Regular.woff2\\") format(\\"woff\\"),
+    url(\\"./fonts/Roboto-Regular.woff\\") format(\\"woff\\"),
+    url(\\"./fonts/Roboto-Regular.ttf\\") format(\\"truetype\\"),
+    url(\\"./fonts/Roboto-Regular.svg#Roboto-Regular\\") format(\\"svg\\");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: \\"Roboto\\";
+  src: url(/webpack/public/path/Roboto-Regular.eot);
+  src:
+    url(/webpack/public/path/Roboto-Regular.eot#iefix) format(\\"embedded-opentype\\"),
+      /** webpackIgnore: true **/
+    url(\\"./fonts/Roboto-Regular.woff2\\") format(\\"woff\\"),
+    url(/webpack/public/path/Roboto-Regular.woff) format(\\"woff\\"),
+      /** webpackIgnore: true **/
+    url(\\"./fonts/Roboto-Regular.ttf\\") format(\\"truetype\\"),
+    url(/webpack/public/path/Roboto-Regular.svg#Roboto-Regular) format(\\"svg\\");
+  font-weight: 400;
+  font-style: normal;
+}
+
+/*webpackIgnore:  true*/
+.class {
+  background-image: image-set(
+    url(./url/img.png) 2x,
+    url(./url/img.png) 3x,
+    url(./url/img.png) 4x,
+    url(./url/img.png) 5x,
+    url(./url/img.png) 6x,
+    url(./url/img.png) 7x
+  );
+}
+
+.class {
+  background-image: /*webpackIgnore:  true*/ image-set(
+    url(./url/img.png) 2x,
+    url(./url/img.png) 3x,
+    url(./url/img.png) 4x,
+    url(./url/img.png) 5x,
+    url(./url/img.png) 6x,
+    url(./url/img.png) 7x
+  );
+}
+
+.class {
+  background-image: image-set(
+    url(/webpack/public/path/img.png) 2x,
+    url(/webpack/public/path/img.png) 3x,
+      /*webpackIgnore:  true*/
+    url(./url/img.png) 4x,
+    url(/webpack/public/path/img.png) 5x,
+    url(/webpack/public/path/img.png) 6x,
+      /*webpackIgnore:  true*/
+    url(./url/img.png) 7x
+  );
+}
+
+",
+    "",
+  ],
+]
+`;
+
+exports[`loader should work with webpackIgnore comment: warnings 1`] = `Array []`;
+
 exports[`loader should work: errors 1`] = `Array []`;
 
 exports[`loader should work: module 1`] = `