fix: correctly resolve file imports with query params (Anidetrix#148)

Resolves Anidetrix#132
plumelo · Oct 7, 2020 · 71bfe87 · 71bfe87
1 parent 7532971
commit 71bfe87
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 3 deletions.
diff --git a/__tests__/__snapshots__/index.test.ts.snap b/__tests__/__snapshots__/index.test.ts.snap
@@ -177,6 +177,10 @@ exports[`basic resolvers: css 1`] = `
   );
   background-image: image-set(\\"/pubpath/cat.png\\" 1x);
 }
+
+.foo3 {
+  background-image: url(\\"/pubpath/bg.png?query\\");
+}
 .bar {
   background-image: url(\\"/pubpath/bg1.png\\");
   background-image: url(\\"/pubpath/bg2.testing.regex.png\\"); }
@@ -215,6 +219,10 @@ exports[`basic resolvers-hash: css 1`] = `
   );
   background-image: image-set(\\"/pubpath/cat-ef753cf2.png\\" 1x);
 }
+
+.foo3 {
+  background-image: url(\\"/pubpath/bg-bd25d3fd.png?query\\");
+}
 .bar {
   background-image: url(\\"/pubpath/bg-cc57d19a.png\\");
   background-image: url(\\"/pubpath/bg.testing.regex-e13f1639.png\\"); }
@@ -253,6 +261,10 @@ exports[`basic resolvers-url-inline: css 1`] = `
   );
   background-image: image-set(\\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGkAAABpBAMAAADLrBAJAAAAG1BMVEXMzMyWlpacnJy+vr6jo6PFxcW3t7eqqqqxsbHbm8QuAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAnElEQVRYhe3PsQrCMBSF4VMlXscUBVdFa1dxcqxKnSs4dLTgA+QRIijtYytEoVvuKHK+7R8ONwGIiIiIiH7DAJIjnfUiSV1sNNyjFe/6IfFTpkFmMg+M/THEvFa8MIHFZFECaxfCbqeVbvV8AE31We3qQrF6Pwpn4L75hrGKVSudv8EsixC+G2luSW4OJeR6CoHLKv4vIiIiIvoXL2T2FCChkjByAAAAAElFTkSuQmCC\\" 1x);
 }
+
+.foo3 {
+  background-image: url(\\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGYAAABmBAMAAADL8flRAAAAG1BMVEXMzMyWlpacnJy+vr6jo6PFxcW3t7eqqqqxsbHbm8QuAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAArUlEQVRYhe3QIQ+CUBTF8cPTB8RHsKMTqQQ/gMqmVRkj4+ZmZQRnNBD42F7Afp3N7fxIN/zH2wGIiIiI6J8ZBKk95NMRo23KdaYksz36oKtv47F14et59HdKY69I7AoX9PMMlTPnIrZOe5sHJ18Hc5fDeXKH2n+mpmzgLz6NPWmJNIlNNkA4NvK2ov6ikQ1kqWKYYdggVxNpgtREER6ygTyzbZaRugERERER/eYNUMwTiwsgIHkAAAAASUVORK5CYII=\\");
+}
 .bar {
   background-image: url(\\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAAG1BMVEXMzMyWlpacnJy+vr6jo6PFxcW3t7eqqqqxsbHbm8QuAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAiklEQVRYhe3QMQ6EIBAF0C+GSInF9mYTs+1ewRsQbmBlayysKefYO2asXbbYxvxHQj6ECQMAEREREf2NQ/fCtp5Zky6vtRMkSJEzhyISynWJnzH6Z8oQlzS7lEc/fLmmQUSvc16OrCPqRl1JePxQYo1ZSWVj9nxrrOb5esw+eXdvzTWfTERERHRXH4tWFZGswQ2yAAAAAElFTkSuQmCC\\");
   background-image: url(\\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGUAAABlBAMAAACmUjD8AAAAG1BMVEXMzMyWlpacnJy+vr6jo6PFxcW3t7eqqqqxsbHbm8QuAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAi0lEQVRYhe3QoQ7CMBRG4b/bGipr8DMNFsEL7A2WifkpLEGgl2D62NwRmG2RJOcT7a04SXMlAAAA/LNGh5Mdn1n3m/pS0g7K4Tl857DmSyw1flHyaZFyN9rcjNNcbOQUFZ00XbfZvd+1TTj+0iTf7439rarJYd3/ZjuoamzX1jy683bZrssNAAAApBeYlQ7gQL3QgQAAAABJRU5ErkJggg==\\"); }

diff --git a/__tests__/fixtures/resolvers/features/foo.css b/__tests__/fixtures/resolvers/features/foo.css
@@ -12,3 +12,7 @@
   );
   background-image: image-set("cat/cat.png" 1x);
 }
+
+.foo3 {
+  background-image: url("./bg.png?query");
+}
diff --git a/src/loaders/postcss/url/index.ts b/src/loaders/postcss/url/index.ts
@@ -156,7 +156,7 @@ const plugin: postcss.Plugin<UrlOptions> = postcss.plugin(
         continue;
       }
 
-      const { source, from } = resolved;
+      const { source, from, urlQuery } = resolved;
       if (!(source instanceof Uint8Array) || typeof from !== "string") {
         decl.warn(res, `Incorrectly resolved URL \`${url}\` in \`${decl.toString()}\``);
         continue;
@@ -180,7 +180,11 @@ const plugin: postcss.Plugin<UrlOptions> = postcss.plugin(
         usedNames.set(to, from);
 
         node.type = "string";
-        node.value = publicPath + (/[/\\]$/.test(publicPath) ? "" : "/") + path.basename(to);
+        node.value =
+          publicPath +
+          (/[/\\]$/.test(publicPath) ? "" : "/") +
+          path.basename(to) +
+          (urlQuery ?? "");
 
         to = normalizePath(assetDir, to);
         res.messages.push({ plugin: name, type: "asset", to, source });

diff --git a/src/loaders/postcss/url/resolve.ts b/src/loaders/postcss/url/resolve.ts
@@ -8,6 +8,8 @@ export interface UrlFile {
   from: string;
   /** File source */
   source: Uint8Array;
+  /** Original query extracted from the input path */
+  urlQuery?: string;
 }
 
 /** URL resolver */
@@ -16,12 +18,18 @@ export type UrlResolve = (url: string, basedir: string) => Promise<UrlFile>;
 const resolve: UrlResolve = async (url, basedir) => {
   const options = { basedir };
   let from: string;
+  const urlWithQueryMatch = /([^?]*)(\?.*)/.exec(url);
+  let urlQuery = "";
+  if (urlWithQueryMatch) {
+    url = urlWithQueryMatch[1];
+    urlQuery = urlWithQueryMatch[2];
+  }
   try {
     from = await resolveAsync(url, options);
   } catch {
     from = await resolveAsync(`./${url}`, options);
   }
-  return { from, source: await fs.readFile(from) };
+  return { from, source: await fs.readFile(from), urlQuery };
 };
 
 export default resolve;
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,3 +12,7 @@ @@
       );
       background-image: image-set("cat/cat.png" 1x);
     }
+    .foo3 {
+      background-image: url("./bg.png?query");
+    }