refactor: postcss plugins (#946)

Author: evilebottnawi

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)

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;

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\\", \\"\\"]);