fix(postcss-normalize-url): disable URL parameter sorting (#1226)

Close #843 Close #812 Sorting the parameters calls URL.searchParams.sort() under the hood, which uses the WHATWG specification for deciding which characters to encode. The WHATWG is different from the IETF URI spec, so sorting the parameters causes the URL to be encoded differently. See (https://nodejs.org/docs/latest-v16.x/api/url.html#class-urlsearchparams) Add test to check for slashes in URL parameters.
cssnano · Nov 10, 2021 · c38f14c · c38f14c
1 parent 31d5c07
commit c38f14c
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 2 deletions.
diff --git a/packages/cssnano/src/__tests__/issue315.js b/packages/cssnano/src/__tests__/issue315.js
@@ -12,7 +12,7 @@ test('should work with postcss-font-magician', () => {
     .process(css, { from: undefined })
     .then((result) => {
       expect(result.css).toMatchInlineSnapshot(
-        `"@font-face{font-family:Alice;font-style:normal;font-weight:400;src:local(\\"Alice Regular\\"),local(Alice-Regular),url(//fonts.gstatic.com/s/alice/v12/OpNCnoEEmtHa6GcOrgo.eot#) format(\\"eot\\"),url(//fonts.gstatic.com/s/alice/v12/OpNCnoEEmtHa6GcOrg4.woff2) format(\\"woff2\\"),url(//fonts.gstatic.com/s/alice/v12/OpNCnoEEmtHa6GcOrgg.woff) format(\\"woff\\")}body{font-family:Alice}"`
+        `"@font-face{font-family:Alice;font-style:normal;font-weight:400;src:local(\\"Alice Regular\\"),local(Alice-Regular),url(//fonts.gstatic.com/s/alice/v12/OpNCnoEEmtHa6GcOrgo.eot?#) format(\\"eot\\"),url(//fonts.gstatic.com/s/alice/v12/OpNCnoEEmtHa6GcOrg4.woff2) format(\\"woff2\\"),url(//fonts.gstatic.com/s/alice/v12/OpNCnoEEmtHa6GcOrgg.woff) format(\\"woff\\")}body{font-family:Alice}"`
       );
     });
 });
diff --git a/packages/cssnano/src/__tests__/issue420.js b/packages/cssnano/src/__tests__/issue420.js
@@ -13,7 +13,7 @@ test('should work with postcss-font-magician with `display` parameter', () => {
     .process(css, { from: undefined })
     .then((result) => {
       expect(result.css).toMatchInlineSnapshot(
-        `"@font-face{font-display:optional;font-family:Alice;font-style:normal;font-weight:400;src:local(\\"Alice Regular\\"),local(Alice-Regular),url(//fonts.gstatic.com/s/alice/v12/OpNCnoEEmtHa6GcOrgo.eot#) format(\\"eot\\"),url(//fonts.gstatic.com/s/alice/v12/OpNCnoEEmtHa6GcOrg4.woff2) format(\\"woff2\\"),url(//fonts.gstatic.com/s/alice/v12/OpNCnoEEmtHa6GcOrgg.woff) format(\\"woff\\")}body{font-family:Alice}"`
+        `"@font-face{font-display:optional;font-family:Alice;font-style:normal;font-weight:400;src:local(\\"Alice Regular\\"),local(Alice-Regular),url(//fonts.gstatic.com/s/alice/v12/OpNCnoEEmtHa6GcOrgo.eot?#) format(\\"eot\\"),url(//fonts.gstatic.com/s/alice/v12/OpNCnoEEmtHa6GcOrg4.woff2) format(\\"woff2\\"),url(//fonts.gstatic.com/s/alice/v12/OpNCnoEEmtHa6GcOrgg.woff) format(\\"woff\\")}body{font-family:Alice}"`
       );
     });
 });
diff --git a/packages/postcss-normalize-url/src/__tests__/index.js b/packages/postcss-normalize-url/src/__tests__/index.js
@@ -275,6 +275,13 @@ test(
   )
 );
 
+test(
+  'should preserve paths in parameters',
+  passthroughCSS(
+    'background: url(https://ss0.example.com/70cFuh_Q1Yn/it/u=5088,2842&fm=26&gp=0.jpg?imageView2/1/w/750/h/1334)'
+  )
+);
+
 test(
   "should pass through when it doesn't find a url function",
   passthroughCSS('h1{color:black;font-weight:bold}')

diff --git a/packages/postcss-normalize-url/src/index.js b/packages/postcss-normalize-url/src/index.js
@@ -98,6 +98,7 @@ function pluginCreator(opts) {
     {},
     {
       normalizeProtocol: false,
+      sortQueryParameters: false,
       stripHash: false,
       stripWWW: false,
       stripTextFragment: false,