Update optimization to take into account more complex sizes values

vercel · Jan 29, 2021 · 130c8fb · 130c8fb
1 parent d7bfe91
commit 130c8fb
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 7 deletions.
diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
@@ -98,11 +98,15 @@ function getWidths(
     layout === 'responsive'
   ) {
     if (sizes) {
-      const percentSize = sizes.match(/^(1?\d?\d)vw$/)
-      if (percentSize) {
-        const ratio = parseInt(percentSize[1]) * 0.01
+      const percentSizes = [...sizes.matchAll(/(^|\s)(1?\d?\d)vw/g)].map((m) =>
+        parseInt(m[2])
+      )
+      if (percentSizes.length) {
+        const smallestRatio = Math.min(...percentSizes) * 0.01
         return {
-          widths: allSizes.filter((s) => s >= configDeviceSizes[0] * ratio),
+          widths: allSizes.filter(
+            (s) => s >= configDeviceSizes[0] * smallestRatio
+          ),
           kind: 'w',
         }
       }

diff --git a/test/integration/image-component/default/pages/layout-fill.js b/test/integration/image-component/default/pages/layout-fill.js
@@ -26,7 +26,9 @@ const Page = () => {
           layout="fill"
           objectFit="cover"
           objectPosition="left center"
-          sizes="50vw"
+          sizes="(min-width: 1200px) 90vw, 
+                 (min-width: 800px) 30vw,
+                 100vw"
         />
       </div>
     </div>

diff --git a/test/integration/image-component/default/test/index.test.js b/test/integration/image-component/default/test/index.test.js
@@ -379,10 +379,10 @@ function runTests(mode) {
         '/_next/image?url=%2Fwide.png&w=3840&q=75'
       )
       expect(await browser.elementById(id).getAttribute('srcset')).toBe(
-        '/_next/image?url=%2Fwide.png&w=640&q=75 640w, /_next/image?url=%2Fwide.png&w=750&q=75 750w, /_next/image?url=%2Fwide.png&w=828&q=75 828w, /_next/image?url=%2Fwide.png&w=1080&q=75 1080w, /_next/image?url=%2Fwide.png&w=1200&q=75 1200w, /_next/image?url=%2Fwide.png&w=1920&q=75 1920w, /_next/image?url=%2Fwide.png&w=2048&q=75 2048w, /_next/image?url=%2Fwide.png&w=3840&q=75 3840w"'
+        '/_next/image?url=%2Fwide.png&w=640&q=75 640w, /_next/image?url=%2Fwide.png&w=750&q=75 750w, /_next/image?url=%2Fwide.png&w=828&q=75 828w, /_next/image?url=%2Fwide.png&w=1080&q=75 1080w, /_next/image?url=%2Fwide.png&w=1200&q=75 1200w, /_next/image?url=%2Fwide.png&w=1920&q=75 1920w, /_next/image?url=%2Fwide.png&w=2048&q=75 2048w, /_next/image?url=%2Fwide.png&w=3840&q=75 3840w'
       )
       expect(await browser.elementById('fill3').getAttribute('srcset')).toBe(
-        'srcset="/_next/image?url=%2Fwide.png&w=384&q=75 384w, /_next/image?url=%2Fwide.png&w=640&q=75 640w, /_next/image?url=%2Fwide.png&w=750&q=75 750w, /_next/image?url=%2Fwide.png&w=828&q=75 828w, /_next/image?url=%2Fwide.png&w=1080&q=75 1080w, /_next/image?url=%2Fwide.png&w=1200&q=75 1200w, /_next/image?url=%2Fwide.png&w=1920&q=75 1920w, /_next/image?url=%2Fwide.png&w=2048&q=75 2048w, /_next/image?url=%2Fwide.png&w=3840&q=75 3840w"'
+        '/_next/image?url=%2Fwide.png&w=256&q=75 256w, /_next/image?url=%2Fwide.png&w=384&q=75 384w, /_next/image?url=%2Fwide.png&w=640&q=75 640w, /_next/image?url=%2Fwide.png&w=750&q=75 750w, /_next/image?url=%2Fwide.png&w=828&q=75 828w, /_next/image?url=%2Fwide.png&w=1080&q=75 1080w, /_next/image?url=%2Fwide.png&w=1200&q=75 1200w, /_next/image?url=%2Fwide.png&w=1920&q=75 1920w, /_next/image?url=%2Fwide.png&w=2048&q=75 2048w, /_next/image?url=%2Fwide.png&w=3840&q=75 3840w'
       )
       expect(await browser.elementById(id).getAttribute('sizes')).toBe('100vw')
       expect(await getComputed(browser, id, 'width')).toBe(width)