refactor: postcss plugins (#946)

webpack-contrib · Jun 4, 2019 · 4781d81 · 4781d81
1 parent 6701cbd
commit 4781d81
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 37 deletions.
diff --git a/src/index.js b/src/index.js
@@ -62,6 +62,8 @@ export default function loader(content, map, meta) {
     plugins.push(...getModulesPlugins(options, this));
   }
 
+  plugins.push(icssParser());
+
   if (options.import !== false) {
     plugins.push(
       importParser({
@@ -80,8 +82,6 @@ export default function loader(content, map, meta) {
     );
   }
 
-  plugins.push(icssParser());
-
   postcss(plugins)
     .process(content, {
       from: getRemainingRequest(this)

diff --git a/src/plugins/postcss-url-parser.js b/src/plugins/postcss-url-parser.js
@@ -49,38 +49,54 @@ function walkUrls(parsed, callback) {
   });
 }
 
-function walkDeclsWithUrl(css, result, filter) {
-  const items = [];
+function getUrlsFromValue(value, result, filter, decl = null) {
+  if (!needParseDecl.test(value)) {
+    return;
+  }
+
+  const parsed = valueParser(value);
+  const urls = [];
+
+  walkUrls(parsed, (node, url, needQuotes) => {
+    if (url.trim().replace(/\\[\r\n]/g, '').length === 0) {
+      result.warn(
+        `Unable to find uri in '${decl ? decl.toString() : value}'`,
+        decl
+          ? {
+              node: decl,
+            }
+          : {}
+      );
 
-  css.walkDecls((decl) => {
-    if (!needParseDecl.test(decl.value)) {
       return;
     }
 
-    const parsed = valueParser(decl.value);
-    const urls = [];
+    if (filter && !filter(url)) {
+      return;
+    }
 
-    walkUrls(parsed, (node, url, needQuotes) => {
-      if (url.trim().replace(/\\[\r\n]/g, '').length === 0) {
-        result.warn(`Unable to find uri in '${decl.toString()}'`, {
-          node: decl,
-        });
+    urls.push({ url, needQuotes });
+  });
 
-        return;
-      }
+  // eslint-disable-next-line consistent-return
+  return { parsed, urls };
+}
 
-      if (filter && !filter(url)) {
-        return;
-      }
+function walkDeclsWithUrl(css, result, filter) {
+  const items = [];
 
-      urls.push({ url, needQuotes });
-    });
+  css.walkDecls((decl) => {
+    const item = getUrlsFromValue(decl.value, result, filter, decl);
+
+    if (!item) {
+      return;
+    }
 
-    if (urls.length === 0) {
+    if (item.urls.length === 0) {
       return;
     }
 
-    items.push({ decl, parsed, urls });
+    items.push({ decl, parsed: item.parsed, urls: item.urls });
   });
 
   return items;

diff --git a/test/__snapshots__/modules-option.test.js.snap b/test/__snapshots__/modules-option.test.js.snap
@@ -8396,64 +8396,64 @@ exports[`modules composes should supports resolving: module (evaluated) 1`] = `
 Array [
   Array [
     2,
-    "._2Nehoi0wFTN-8p0fEfvUYd {
-  d: d;
-}
-",
-    "(min-width: 100px)",
-  ],
-  Array [
-    3,
     "
 ",
     "",
   ],
   Array [
-    4,
+    3,
     "
 ",
     "",
   ],
   Array [
-    5,
+    4,
     "._22ETk3ZhhvjVe-4dAULcsF {
   display: block;
 }
 ",
     "",
   ],
   Array [
-    6,
+    5,
     ".dSGVakTZ8YY-XNW64tg9F {
   display: inline;
 }
 ",
     "",
   ],
   Array [
-    7,
+    6,
     "._1SUuyapRQ82dAPS8r7zmpY {
   display: flex;
 }
 ",
     "",
   ],
   Array [
-    8,
+    7,
     "._2n5szs-7uGKzfFTp9NTK64 {
   display: inline-block;
 }
 ",
     "",
   ],
   Array [
-    9,
+    8,
     "._37nzOIvIANGnEtP1lWjZDN {
   display: table;
 }
 ",
     "",
   ],
+  Array [
+    9,
+    "._2Nehoi0wFTN-8p0fEfvUYd {
+  d: d;
+}
+",
+    "(min-width: 100px)",
+  ],
   Array [
     1,
     "._14uFt0lIVKKAlKTTT29IIQ {
@@ -8533,14 +8533,14 @@ Array [
 exports[`modules composes should supports resolving: module 1`] = `
 "exports = module.exports = require(\\"../../../src/runtime/api.js\\")(false);
 // Imports
-exports.i(require(\\"-!../../../src/index.js??ref--4-0!./test-other.css\\"), \\"(min-width: 100px)\\");
 exports.i(require(\\"-!../../../src/index.js??ref--4-0!./values.css\\"), \\"\\");
 exports.i(require(\\"-!../../../src/index.js??ref--4-0!./something.css\\"), \\"\\");
 exports.i(require(\\"-!../../../src/index.js??ref--4-0!./imported-simple.css\\"), \\"\\");
 exports.i(require(\\"-!../../../src/index.js??ref--4-0!./relative.css\\"), \\"\\");
 exports.i(require(\\"-!../../../src/index.js??ref--4-0!../modules/top-relative.css\\"), \\"\\");
 exports.i(require(\\"-!../../../src/index.js??ref--4-0!package/style.css\\"), \\"\\");
 exports.i(require(\\"-!../../../src/index.js??ref--4-0!aliasesComposes/alias.css\\"), \\"\\");
+exports.i(require(\\"-!../../../src/index.js??ref--4-0!./test-other.css\\"), \\"(min-width: 100px)\\");
 
 // Module
 exports.push([module.id, \\"._14uFt0lIVKKAlKTTT29IIQ {\\\\n  color: \\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"v-def\\"] + \\";\\\\n}\\\\n\\\\n._3XDgIzfUIQkaUInpEdo7fN {\\\\n  color: blue;\\\\n}\\\\n\\\\n._1wABXM_RabWHj--wsPrhvM {\\\\n  display: block;\\\\n}\\\\n\\\\n._1DFEYnAfn9LZyk4fErI86e {\\\\n  width: \\" + require(\\"-!../../../src/index.js??ref--4-0!./something.css\\").locals[\\"v-something\\"] + \\";\\\\n}\\\\n\\\\n.Ywv5coVC2RU-pIFhN9O4w {\\\\n  color: \\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"v-other\\"] + \\";\\\\n}\\\\n\\\\n._1tAbIwITRWAdZZE6wKNk9O {\\\\n  prop: \\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"v-def\\"] + \\";\\\\n  duplicate: \\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"v-other\\"] + \\";\\\\n}\\\\n\\\\n.Q3SQ3BwtBwUFLlg6adzOI {\\\\n  color: red;\\\\n}\\\\n\\\\n._1n5XhXj4SFnYrwziC3un0d {\\\\n  color: yellow;\\\\n}\\\\n\\\\n._3dnFnGkAVAiMA6etF-naHc {\\\\n  color: gray;\\\\n}\\\\n\\\\n._1xUePnlnafMQ1cExy3PUWT {\\\\n  color: gray;\\\\n}\\\\n\\\\n._26Jdfenl9Xn8HXwb2jipvt {\\\\n  color: gainsboro;\\\\n}\\\\n\\\\n._1ya4VhsDkuPhQeVHQydw2Y {\\\\n  color: #BF4040;\\\\n}\\\\n\\\\n.sGE1Q_LliVEZU2Q4q9j4K {\\\\n  color: black;\\\\n}\\\\n\\\\n@media (min-width: 960px) {\\\\n  ._2zSMJ4hQh0FesbZjiKW_ya {\\\\n    padding: 0 20px;\\\\n  }\\\\n}\\\\n\\\\n.\\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"s-white\\"] + \\" {\\\\n  color: white;\\\\n}\\\\n\\\\n@media \\" + require(\\"-!../../../src/index.js??ref--4-0!./values.css\\").locals[\\"m-small\\"] + \\" {\\\\n  ._2zSMJ4hQh0FesbZjiKW_ya {\\\\n    padding: 20px 20px;\\\\n  }\\\\n}\\\\n\\", \\"\\"]);