From 8c885e7902ba0cc276590ae681ca486b3e905e4a Mon Sep 17 00:00:00 2001 From: Kevin Stone Date: Wed, 4 Sep 2019 12:38:27 -0500 Subject: [PATCH 1/3] Added failing test for #17162 Tests running the `gatsby-plugin-sharp` with duotone --- .../src/__tests__/__snapshots__/index.js.snap | 32 +++++++++++++++++++ .../src/__tests__/index.js | 18 +++++++++++ 2 files changed, 50 insertions(+) diff --git a/packages/gatsby-plugin-sharp/src/__tests__/__snapshots__/index.js.snap b/packages/gatsby-plugin-sharp/src/__tests__/__snapshots__/index.js.snap index 40b27b2a80c7a..c3c9665cfb044 100644 --- a/packages/gatsby-plugin-sharp/src/__tests__/__snapshots__/index.js.snap +++ b/packages/gatsby-plugin-sharp/src/__tests__/__snapshots__/index.js.snap @@ -10,6 +10,38 @@ Object { } `; +exports[`gatsby-plugin-sharp duotone fixed 1`] = ` +Object { + "aspectRatio": 1, + "base64": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAACXBIWXMAAAPoAAAD6AG1e1JrAAABk0lEQVQ4y7VUy07DMBDsf9IDhcauaVM4IajUIuALOFRI/R24wB8AgkpInJKI9ME5zDi24rx5HjZKvOP17Hg2neh8nNjo8CGESGL7sbpwMvrlaepriF4J3dQLMlsXvzbVFCKHLJ3J8+5PRxqlF0OzleFLkSG7Xrp4faiyRaI/Lgs13QhNVB5uCUyUTDyUloidvkjezvyMEB8B4uZkqAHCiR44bYtCcecSirD5XQDmIGzVjOrEiJo4fhvY2jWTG3C6g/TLmZ+8VwEJekWy20+loUSzA5kDp15BKJmXhmD6Iqcjtep5eSArk0ZQPPpqPNAaWiBpbKt0pLgEU2xuIOewTh7rmFWFRH9/M78uaG8yNuox4oYbbrQEhaI4HKEh7mvfS2OE98WR0r6P26zj2ofW5rWowlzY2WduAQxZ14odmNZuMWA0h6wo5pplDxj+MrgnqDM3W32E/QYNxaxN2f7ztNx6qWUCOC3H+F/Y35EU2XCw3QkGhBrHX/WXLbwG4wewoAwMst84t/0jH4ZG36DFLv9m7E/1HjvIa/canAAAAABJRU5ErkJggg==", + "height": 100, + "originalName": undefined, + "src": "/static/1234/59dbf/test.png", + "srcSet": "/static/1234/59dbf/test.png 1x", + "tracedSVG": undefined, + "width": 100, +} +`; + +exports[`gatsby-plugin-sharp duotone fluid 1`] = ` +Object { + "aspectRatio": 1, + "base64": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAACXBIWXMAAAPoAAAD6AG1e1JrAAABk0lEQVQ4y7VUy07DMBDsf9IDhcauaVM4IajUIuALOFRI/R24wB8AgkpInJKI9ME5zDi24rx5HjZKvOP17Hg2neh8nNjo8CGESGL7sbpwMvrlaepriF4J3dQLMlsXvzbVFCKHLJ3J8+5PRxqlF0OzleFLkSG7Xrp4faiyRaI/Lgs13QhNVB5uCUyUTDyUloidvkjezvyMEB8B4uZkqAHCiR44bYtCcecSirD5XQDmIGzVjOrEiJo4fhvY2jWTG3C6g/TLmZ+8VwEJekWy20+loUSzA5kDp15BKJmXhmD6Iqcjtep5eSArk0ZQPPpqPNAaWiBpbKt0pLgEU2xuIOewTh7rmFWFRH9/M78uaG8yNuox4oYbbrQEhaI4HKEh7mvfS2OE98WR0r6P26zj2ofW5rWowlzY2WduAQxZ14odmNZuMWA0h6wo5pplDxj+MrgnqDM3W32E/QYNxaxN2f7ztNx6qWUCOC3H+F/Y35EU2XCw3QkGhBrHX/WXLbwG4wewoAwMst84t/0jH4ZG36DFLv9m7E/1HjvIa/canAAAAABJRU5ErkJggg==", + "density": 72, + "originalImg": "/static/1234/59dbf/test.png", + "originalName": undefined, + "presentationHeight": 100, + "presentationWidth": 100, + "sizes": "(max-width: 100px) 100vw, 100px", + "src": "/static/1234/59dbf/test.png", + "srcSet": "/static/1234/51d83/test.png 25w, +/static/1234/851fc/test.png 50w, +/static/1234/59dbf/test.png 100w", + "srcSetType": "image/png", + "tracedSVG": undefined, +} +`; + exports[`gatsby-plugin-sharp fluid includes responsive image properties, e.g. sizes, srcset, etc. 1`] = ` Object { "aspectRatio": 1, diff --git a/packages/gatsby-plugin-sharp/src/__tests__/index.js b/packages/gatsby-plugin-sharp/src/__tests__/index.js index 9d606800a6480..93d52c9a1e30a 100644 --- a/packages/gatsby-plugin-sharp/src/__tests__/index.js +++ b/packages/gatsby-plugin-sharp/src/__tests__/index.js @@ -373,6 +373,24 @@ describe(`gatsby-plugin-sharp`, () => { expect(fluidSvg).toMatchSnapshot() }) }) + + describe(`duotone`, () => { + const args = { + maxWidth: 100, + width: 100, + duotone: { highlight: `#ffffff`, shadow: `#cccccc`, opacity: 50 }, + } + + it(`fixed`, async () => { + let result = await fixed({ file, args }) + expect(result).toMatchSnapshot() + }) + + it(`fluid`, async () => { + let result = await fluid({ file, args }) + expect(result).toMatchSnapshot() + }) + }) }) function getFileObject(absolutePath, name = `test`) { From 99dd04ba9cf7e989d29333118b4ff0c966748966 Mon Sep 17 00:00:00 2001 From: Kevin Stone Date: Wed, 4 Sep 2019 12:40:25 -0500 Subject: [PATCH 2/3] Migrated overlayWith to composite `overlayWith` was removed in sharp `v0.23`. The replacement (`composite`) provides the superset functionality supporting an array of images to overlay/composite --- packages/gatsby-plugin-sharp/src/duotone.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/gatsby-plugin-sharp/src/duotone.js b/packages/gatsby-plugin-sharp/src/duotone.js index bde8df7889dbf..50633e0bfda3a 100644 --- a/packages/gatsby-plugin-sharp/src/duotone.js +++ b/packages/gatsby-plugin-sharp/src/duotone.js @@ -108,9 +108,12 @@ async function overlayDuotone( .toBuffer() return await originalImage - .overlayWith(duotoneWithTransparency, { - raw: { width: info.width, height: info.height, channels: 4 }, - }) + .composite([ + { + input: duotoneWithTransparency, + raw: { width: info.width, height: info.height, channels: 4 }, + }, + ]) .toBuffer({ resolveWithObject: true }) .then(({ data, info }) => sharp(data, { From 2eef3fdc7351c3de122da897af2f36dff7c98d29 Mon Sep 17 00:00:00 2001 From: Kevin Stone Date: Thu, 5 Sep 2019 09:20:36 -0500 Subject: [PATCH 3/3] Specify explcit blend: over mode for sharp composite --- packages/gatsby-plugin-sharp/src/duotone.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/gatsby-plugin-sharp/src/duotone.js b/packages/gatsby-plugin-sharp/src/duotone.js index 50633e0bfda3a..977d8e3b35ac6 100644 --- a/packages/gatsby-plugin-sharp/src/duotone.js +++ b/packages/gatsby-plugin-sharp/src/duotone.js @@ -111,6 +111,7 @@ async function overlayDuotone( .composite([ { input: duotoneWithTransparency, + blend: `over`, raw: { width: info.width, height: info.height, channels: 4 }, }, ])