feat: emit warning on invalid url (#832)

lib/plugins/postcss-url-parser.js

@@ -20,49 +20,55 @@ function walkUrls(parsed, callback) {
     node.after = '';
     /* eslint-enable */
 
-    if (url.trim().replace(/\\[\r\n]/g, '').length !== 0) {
-      callback(node, url);
-    }
+    callback(node, url);
 
     // Do not traverse inside url
     // eslint-disable-next-line consistent-return
     return false;
   });
 }
 
-function filterUrls(parsed, filter) {
-  const result = [];
+function filterUrls(parsed, result, decl, filter) {
+  const urls = [];
 
-  walkUrls(parsed, (node, content) => {
-    if (!filter(content)) {
+  walkUrls(parsed, (node, url) => {
+    if (url.trim().replace(/\\[\r\n]/g, '').length === 0) {
+      result.warn(`Unable to find uri in '${decl.toString()}'`, {
+        node: decl,
+      });
+
+      return;
+    }
+
+    if (!filter(url)) {
       return;
     }
 
-    result.push(content);
+    urls.push(url);
   });
 
-  return result;
+  return urls;
 }
 
-function walkDeclsWithUrl(css, filter) {
-  const result = [];
+function walkDeclsWithUrl(css, result, filter) {
+  const items = [];
 
   css.walkDecls((decl) => {
     if (!/url\(/i.test(decl.value)) {
       return;
     }
 
     const parsed = valueParser(decl.value);
-    const values = filterUrls(parsed, filter);
+    const values = filterUrls(parsed, result, decl, filter);
 
     if (values.length === 0) {
       return;
     }
 
-    result.push({ decl, parsed, values });
+    items.push({ decl, parsed, values });
   });
 
-  return result;
+  return items;
 }
 
 function flatten(array) {
@@ -92,9 +98,11 @@ function uniq(array) {
 module.exports = postcss.plugin(
   pluginName,
   (options) =>
-    function process(css) {
+    function process(css, result) {
       const urlItems = [];
-      const traversed = walkDeclsWithUrl(css, (value) => isUrlRequest(value));
+      const traversed = walkDeclsWithUrl(css, result, (value) =>
+        isUrlRequest(value)
+      );
       const paths = uniq(flatten(traversed.map((item) => item.values)));
 
       if (paths.length === 0) {

test/__snapshots__/url-option.test.js.snap

@@ -421,4 +421,28 @@ exports.push([module.id, \\".class {\\\\n  background: url(\\" + escape(require(
 "
 `;
 
-exports[`url option true: warnings 1`] = `Array []`;
+exports[`url option true: warnings 1`] = `
+Array [
+  "ModuleWarning: Module Warning (from \`replaced original path\`):
+Warning
+
+(120:3) Unable to find uri in 'background: green url() xyz'",
+  "ModuleWarning: Module Warning (from \`replaced original path\`):
+Warning
+
+(124:3) Unable to find uri in 'background: green url('') xyz'",
+  "ModuleWarning: Module Warning (from \`replaced original path\`):
+Warning
+
+(128:3) Unable to find uri in 'background: green url(\\"\\") xyz'",
+  "ModuleWarning: Module Warning (from \`replaced original path\`):
+Warning
+
+(132:3) Unable to find uri in 'background: green url('') xyz'",
+  "ModuleWarning: Module Warning (from \`replaced original path\`):
+Warning
+
+(136:3) Unable to find uri in 'background: green url(
+  ) xyz'",
+]
+`;

test/url-option.test.js

@@ -1,4 +1,4 @@
-const { webpack, evaluated } = require('./helpers');
+const { webpack, evaluated, normalizeErrors } = require('./helpers');
 
 describe('url option', () => {
   it('true', async () => {
@@ -11,8 +11,10 @@ describe('url option', () => {
     expect(evaluated(module.source, modules)).toMatchSnapshot(
       'module (evaluated)'
     );
-    expect(stats.compilation.warnings).toMatchSnapshot('warnings');
-    expect(stats.compilation.errors).toMatchSnapshot('errors');
+    expect(normalizeErrors(stats.compilation.warnings)).toMatchSnapshot(
+      'warnings'
+    );
+    expect(normalizeErrors(stats.compilation.errors)).toMatchSnapshot('errors');
   });
 
   it('false', async () => {