From 729a314529cd0607c374b07bdf425337f9a778d4 Mon Sep 17 00:00:00 2001 From: Alexander Akait <4567934+alexander-akait@users.noreply.github.com> Date: Mon, 8 Feb 2021 16:18:16 +0300 Subject: [PATCH] fix: pass query with hash to other loaders (#1261) --- src/utils.js | 4 +-- test/__snapshots__/loader.test.js.snap | 31 +++++++++++++++++++++ test/fixtures/other-loader-query.css | 3 ++ test/fixtures/other-loader-query.js | 5 ++++ test/fixtures/url/image.svg | 5 ++++ test/helpers/svg-color-loader.js | 11 ++++++++ test/loader.test.js | 38 ++++++++++++++++++++++++++ 7 files changed, 95 insertions(+), 2 deletions(-) create mode 100644 test/fixtures/other-loader-query.css create mode 100644 test/fixtures/other-loader-query.js create mode 100644 test/fixtures/url/image.svg create mode 100644 test/helpers/svg-color-loader.js diff --git a/src/utils.js b/src/utils.js index 294f9cd8..b33bcfed 100644 --- a/src/utils.js +++ b/src/utils.js @@ -85,10 +85,10 @@ function normalizeUrl(url, isStringValue) { } if (matchNativeWin32Path.test(url)) { - return decodeURIComponent(normalizedUrl); + return decodeURI(normalizedUrl); } - return decodeURIComponent(unescape(normalizedUrl)); + return decodeURI(unescape(normalizedUrl)); } function requestify(url, rootContext) { diff --git a/test/__snapshots__/loader.test.js.snap b/test/__snapshots__/loader.test.js.snap index 8db06c70..841a14b0 100644 --- a/test/__snapshots__/loader.test.js.snap +++ b/test/__snapshots__/loader.test.js.snap @@ -64,6 +64,37 @@ Array [ exports[`loader should not generate console.warn when plugins disabled and hideNothingWarning is "true": warnings 1`] = `Array []`; +exports[`loader should pass queries to other loader: errors 1`] = `Array []`; + +exports[`loader should pass queries to other loader: 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/image.svg?color=%23BAAFDB%3F\\"; +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___, { hash: \\"#foo\\" }); +// Module +___CSS_LOADER_EXPORT___.push([module.id, \\".example {\\\\n background-image: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\", \\"\\"]); +// Exports +export default ___CSS_LOADER_EXPORT___; +" +`; + +exports[`loader should pass queries to other loader: result 1`] = ` +Array [ + Array [ + "./other-loader-query.css", + ".example { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=#foo); +} +", + "", + ], +] +`; + +exports[`loader should pass queries to other loader: warnings 1`] = `Array []`; + exports[`loader should reuse \`ast\` from "postcss-loader": errors 1`] = `Array []`; exports[`loader should reuse \`ast\` from "postcss-loader": module 1`] = ` diff --git a/test/fixtures/other-loader-query.css b/test/fixtures/other-loader-query.css new file mode 100644 index 00000000..bf6816c5 --- /dev/null +++ b/test/fixtures/other-loader-query.css @@ -0,0 +1,3 @@ +.example { + background-image: url('./url/image.svg?color=%23BAAFDB%3F#foo'); +} diff --git a/test/fixtures/other-loader-query.js b/test/fixtures/other-loader-query.js new file mode 100644 index 00000000..a7207362 --- /dev/null +++ b/test/fixtures/other-loader-query.js @@ -0,0 +1,5 @@ +import css from './other-loader-query.css'; + +__export__ = css; + +export default css; diff --git a/test/fixtures/url/image.svg b/test/fixtures/url/image.svg new file mode 100644 index 00000000..b1761cae --- /dev/null +++ b/test/fixtures/url/image.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/test/helpers/svg-color-loader.js b/test/helpers/svg-color-loader.js new file mode 100644 index 00000000..61a78024 --- /dev/null +++ b/test/helpers/svg-color-loader.js @@ -0,0 +1,11 @@ +const querystring = require("querystring"); + +module.exports = function loader() { + const query = querystring.parse(this.resourceQuery.slice(1)); + + if (typeof query.color === "undefined" || query.color !== "#BAAFDB?") { + throw new Error(`Error, 'color' is '${query.color}'`); + } + + return `export default "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=";`; +}; diff --git a/test/loader.test.js b/test/loader.test.js index e072f719..81df60ce 100644 --- a/test/loader.test.js +++ b/test/loader.test.js @@ -472,4 +472,42 @@ describe("loader", () => { expect(getWarnings(stats)).toMatchSnapshot("warnings"); expect(getErrors(stats)).toMatchSnapshot("errors"); }); + + it("should pass queries to other loader", async () => { + const compiler = getCompiler( + "./other-loader-query.js", + {}, + { + module: { + rules: [ + { + test: /\.svg$/i, + resourceQuery: /color/, + enforce: "pre", + use: { + loader: path.resolve( + __dirname, + "./helpers/svg-color-loader.js" + ), + }, + }, + { + test: /\.css$/i, + rules: [{ loader: path.resolve(__dirname, "../src") }], + }, + ], + }, + } + ); + const stats = await compile(compiler); + + expect(getModuleSource("./other-loader-query.css", stats)).toMatchSnapshot( + "module" + ); + expect(getExecutedCode("main.bundle.js", compiler, stats)).toMatchSnapshot( + "result" + ); + expect(getWarnings(stats)).toMatchSnapshot("warnings"); + expect(getErrors(stats)).toMatchSnapshot("errors"); + }); });