From 891f83b16c7350b53e6cab46db8e1b93506ade2f Mon Sep 17 00:00:00 2001 From: LekoArts Date: Tue, 8 Mar 2022 10:28:26 +0100 Subject: [PATCH 1/4] handle duotone --- .../src/__tests__/index.js | 21 +++++++++++++++++++ packages/gatsby-plugin-sharp/src/index.js | 3 ++- 2 files changed, 23 insertions(+), 1 deletion(-) diff --git a/packages/gatsby-plugin-sharp/src/__tests__/index.js b/packages/gatsby-plugin-sharp/src/__tests__/index.js index 2fee9ed0d9867..328bf62207b47 100644 --- a/packages/gatsby-plugin-sharp/src/__tests__/index.js +++ b/packages/gatsby-plugin-sharp/src/__tests__/index.js @@ -615,6 +615,27 @@ describe(`gatsby-plugin-sharp`, () => { const result = await fluid({ file, args }) expect(result).toMatchSnapshot() }) + + it(`creates two different images for different duotone settings`, async () => { + const firstImage = await fluid({ + file, + args: { + maxWidth: 100, + width: 100, + duotone: { highlight: `#ffffff`, shadow: `#cccccc` }, + }, + }) + const secondImage = await fluid({ + file, + args: { + maxWidth: 100, + width: 100, + duotone: { highlight: `#000`, shadow: `#ffffff` }, + }, + }) + + expect(firstImage.src).not.toEqual(secondImage.src) + }) }) describe(`stats`, () => { diff --git a/packages/gatsby-plugin-sharp/src/index.js b/packages/gatsby-plugin-sharp/src/index.js index 2f0091c754136..04f76bda8da62 100644 --- a/packages/gatsby-plugin-sharp/src/index.js +++ b/packages/gatsby-plugin-sharp/src/index.js @@ -83,7 +83,8 @@ function calculateImageDimensionsAndAspectRatio(file, options) { } function prepareQueue({ file, args }) { - const { pathPrefix, ...options } = args + const { pathPrefix, duotone, ...rest } = args + const options = Object.assign(rest, duotone) const argsDigestShort = createArgsDigest(options) const imgSrc = `/${file.name}.${options.toFormat}` const outputDir = path.join( From 332a5dec964f4b4ec807a2eb852add7a6317a1e4 Mon Sep 17 00:00:00 2001 From: LekoArts Date: Wed, 9 Mar 2022 10:37:18 +0100 Subject: [PATCH 2/4] update tests --- .../src/__tests__/__snapshots__/index.js.snap | 18 +++++++++--------- .../gatsby-plugin-sharp/src/__tests__/index.js | 9 +++++---- 2 files changed, 14 insertions(+), 13 deletions(-) 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 904734059256f..93329e8e5166f 100644 --- a/packages/gatsby-plugin-sharp/src/__tests__/__snapshots__/index.js.snap +++ b/packages/gatsby-plugin-sharp/src/__tests__/__snapshots__/index.js.snap @@ -5,7 +5,7 @@ Object { "aspectRatio": 1, "height": 20, "originalName": "test.png", - "src": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAACXBIWXMAAAsTAAALEwEAmpwYAAABP0lEQVQ4y2P4r8ZANmKgvuZ/agy/VaHojyopmv+CNf/XQCCoCEHNf1VBqv+oM5yVY1giwbBakuG2AkjknzoW/eh2/tdgOCPHYM7OwMDAwAgiGFgYGMJ5GF4og43ApRmuk58JqpMJRjIwMBizMbxTZviPaj8ihCD6rThAStkgljJATWEHc3P5wT5SxdD8B2ztERmQIiYGdAAxSpaF4T2q5TDN4HCaLgZSxMyAE1yQgwY+Fs1zxQloviSPTTMktM7JgVzIiKEH4hElFoavKogAQgltiJA3F0gdOyPC58yw8GsUwhFgUMvVGR4oMqiwogQbhOHLxfBLDcVabIlEneGxEkMMLwMvTLc4M0OdEMN3VfRIxp48/6mDnPdCieGkHCiRflRh+K+JPXljz1IQJ0AzhjrRGQPZC5As+ZeuhQGRmgHU8mT34D0STQAAAABJRU5ErkJggg==", + "src": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAACXBIWXMAAAsTAAALEwEAmpwYAAABRElEQVQ4y7WUzUrDQBSFT37aij8UFFqFNmriZFy7s8/QF+iiz+ArCL6EGzeufBDBRVEQV67ciLgR3YgoyVju3IkxTaa2osNw4Yb57pmcOzP4jPHrib+HVYwkRiIopnPBBtjNZ2opMZnTIomPGKMuTts4W8ftFn1JJW1nGsyClwH2GwDgUIDvYLCMx4hKKBvM5ChA0yXGBTwddYa9Op5KfO4Qx94CLa2xaDbqOj1oUvWkDCda9rxjNCcGl+r4eC6KZ7Ag+LhFizxYx3VgzK+AT9o/wDebVTC7dRXQDp0Swz8S1vC6kxtUcFvpDveXtEPfSriZf0dr2jBha5XE3TYi35jEk2X7i3gXBdmqQyJxH2K4YrrtABseDlfxJqYeki9eSdreQ4iLLp2Zl8iYpGa5GCm3XWYXQ1Kq5rrPXMKG/dtjMCM8Br7rZPFvbj2AAAAAAElFTkSuQmCC", "width": 20, } `; @@ -26,8 +26,8 @@ Object { "base64": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAHNUN2pAAAAD1BMVEXugW5lZmbMemybcGl6aWdJY41OAAAACXBIWXMAAAPoAAAD6AG1e1JrAAAAVUlEQVQY062QUQ6AMAhD28L9z2w2RObEH+P7WJquK2TAgEh0SoVfF+GQPk9DC5kvxNLv+QYJ1eBVy0VGxJYJltFfkI/q+87T2mzxQo3pj8rmI6QPGx6CUQCaU8vWagAAAABJRU5ErkJggg==", "height": 100, "originalName": "test.png", - "src": "/static/1234/df2e1/test.png", - "srcSet": "/static/1234/df2e1/test.png 1x", + "src": "/static/1234/31820/test.png", + "srcSet": "/static/1234/31820/test.png 1x", "tracedSVG": undefined, "width": 100, } @@ -38,15 +38,15 @@ Object { "aspectRatio": 1, "base64": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAHNUN2pAAAAD1BMVEXugW5lZmbMemybcGl6aWdJY41OAAAACXBIWXMAAAPoAAAD6AG1e1JrAAAAVUlEQVQY062QUQ6AMAhD28L9z2w2RObEH+P7WJquK2TAgEh0SoVfF+GQPk9DC5kvxNLv+QYJ1eBVy0VGxJYJltFfkI/q+87T2mzxQo3pj8rmI6QPGx6CUQCaU8vWagAAAABJRU5ErkJggg==", "density": 72, - "originalImg": "/static/1234/df2e1/test.png", + "originalImg": "/static/1234/31820/test.png", "originalName": "test.png", "presentationHeight": 100, "presentationWidth": 100, "sizes": "(max-width: 100px) 100vw, 100px", - "src": "/static/1234/df2e1/test.png", - "srcSet": "/static/1234/bd373/test.png 25w, -/static/1234/3a8be/test.png 50w, -/static/1234/df2e1/test.png 100w", + "src": "/static/1234/31820/test.png", + "srcSet": "/static/1234/c6018/test.png 25w, +/static/1234/c752e/test.png 50w, +/static/1234/31820/test.png 100w", "srcSetType": "image/png", "tracedSVG": undefined, } @@ -1014,7 +1014,7 @@ exports[`gatsby-plugin-sharp fluid ensure maxWidth is in srcSet breakpoints 1`] exports[`gatsby-plugin-sharp fluid includes responsive image properties, e.g. sizes, srcset, etc. 1`] = ` Object { "aspectRatio": 1, - "base64": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAACXBIWXMAAAsTAAALEwEAmpwYAAABP0lEQVQ4y2P4r8ZANmKgvuZ/agy/VaHojyopmv+CNf/XQCCoCEHNf1VBqv+oM5yVY1giwbBakuG2AkjknzoW/eh2/tdgOCPHYM7OwMDAwAgiGFgYGMJ5GF4og43ApRmuk58JqpMJRjIwMBizMbxTZviPaj8ihCD6rThAStkgljJATWEHc3P5wT5SxdD8B2ztERmQIiYGdAAxSpaF4T2q5TDN4HCaLgZSxMyAE1yQgwY+Fs1zxQloviSPTTMktM7JgVzIiKEH4hElFoavKogAQgltiJA3F0gdOyPC58yw8GsUwhFgUMvVGR4oMqiwogQbhOHLxfBLDcVabIlEneGxEkMMLwMvTLc4M0OdEMN3VfRIxp48/6mDnPdCieGkHCiRflRh+K+JPXljz1IQJ0AzhjrRGQPZC5As+ZeuhQGRmgHU8mT34D0STQAAAABJRU5ErkJggg==", + "base64": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAACXBIWXMAAAsTAAALEwEAmpwYAAABRElEQVQ4y7WUzUrDQBSFT37aij8UFFqFNmriZFy7s8/QF+iiz+ArCL6EGzeufBDBRVEQV67ciLgR3YgoyVju3IkxTaa2osNw4Yb57pmcOzP4jPHrib+HVYwkRiIopnPBBtjNZ2opMZnTIomPGKMuTts4W8ftFn1JJW1nGsyClwH2GwDgUIDvYLCMx4hKKBvM5ChA0yXGBTwddYa9Op5KfO4Qx94CLa2xaDbqOj1oUvWkDCda9rxjNCcGl+r4eC6KZ7Ag+LhFizxYx3VgzK+AT9o/wDebVTC7dRXQDp0Swz8S1vC6kxtUcFvpDveXtEPfSriZf0dr2jBha5XE3TYi35jEk2X7i3gXBdmqQyJxH2K4YrrtABseDlfxJqYeki9eSdreQ4iLLp2Zl8iYpGa5GCm3XWYXQ1Kq5rrPXMKG/dtjMCM8Br7rZPFvbj2AAAAAAElFTkSuQmCC", "density": 72, "originalImg": "/static/1234/7e516/test.png", "originalName": "test.png", diff --git a/packages/gatsby-plugin-sharp/src/__tests__/index.js b/packages/gatsby-plugin-sharp/src/__tests__/index.js index 328bf62207b47..7f8400615b81d 100644 --- a/packages/gatsby-plugin-sharp/src/__tests__/index.js +++ b/packages/gatsby-plugin-sharp/src/__tests__/index.js @@ -617,20 +617,21 @@ describe(`gatsby-plugin-sharp`, () => { }) it(`creates two different images for different duotone settings`, async () => { + const testName = `duotone-digest-test` const firstImage = await fluid({ - file, + file: getFileObject(path.join(__dirname, `images/test.png`), testName), args: { maxWidth: 100, width: 100, - duotone: { highlight: `#ffffff`, shadow: `#cccccc` }, + duotone: { highlight: `#BBFFE6`, shadow: `#51758D` }, }, }) const secondImage = await fluid({ - file, + file: getFileObject(path.join(__dirname, `images/test.png`), testName), args: { maxWidth: 100, width: 100, - duotone: { highlight: `#000`, shadow: `#ffffff` }, + duotone: { highlight: `#F1D283`, shadow: `#000000` }, }, }) From 2cfff49133de2e02cbf186eee7cb754bc1fe2dd4 Mon Sep 17 00:00:00 2001 From: Lennart Date: Wed, 9 Mar 2022 11:03:47 +0100 Subject: [PATCH 3/4] Update index.js.snap --- .../src/__tests__/__snapshots__/index.js.snap | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 93329e8e5166f..3429438aaca65 100644 --- a/packages/gatsby-plugin-sharp/src/__tests__/__snapshots__/index.js.snap +++ b/packages/gatsby-plugin-sharp/src/__tests__/__snapshots__/index.js.snap @@ -5,7 +5,7 @@ Object { "aspectRatio": 1, "height": 20, "originalName": "test.png", - "src": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAACXBIWXMAAAsTAAALEwEAmpwYAAABRElEQVQ4y7WUzUrDQBSFT37aij8UFFqFNmriZFy7s8/QF+iiz+ArCL6EGzeufBDBRVEQV67ciLgR3YgoyVju3IkxTaa2osNw4Yb57pmcOzP4jPHrib+HVYwkRiIopnPBBtjNZ2opMZnTIomPGKMuTts4W8ftFn1JJW1nGsyClwH2GwDgUIDvYLCMx4hKKBvM5ChA0yXGBTwddYa9Op5KfO4Qx94CLa2xaDbqOj1oUvWkDCda9rxjNCcGl+r4eC6KZ7Ag+LhFizxYx3VgzK+AT9o/wDebVTC7dRXQDp0Swz8S1vC6kxtUcFvpDveXtEPfSriZf0dr2jBha5XE3TYi35jEk2X7i3gXBdmqQyJxH2K4YrrtABseDlfxJqYeki9eSdreQ4iLLp2Zl8iYpGa5GCm3XWYXQ1Kq5rrPXMKG/dtjMCM8Br7rZPFvbj2AAAAAAElFTkSuQmCC", + "src": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAACXBIWXMAAAsTAAALEwEAmpwYAAABP0lEQVQ4y2P4r8ZANmKgvuZ/agy/VaHojyopmv+CNf/XQCCoCEHNf1VBqv+oM5yVY1giwbBakuG2AkjknzoW/eh2/tdgOCPHYM7OwMDAwAgiGFgYGMJ5GF4og43ApRmuk58JqpMJRjIwMBizMbxTZviPaj8ihCD6rThAStkgljJATWEHc3P5wT5SxdD8B2ztERmQIiYGdAAxSpaF4T2q5TDN4HCaLgZSxMyAE1yQgwY+Fs1zxQloviSPTTMktM7JgVzIiKEH4hElFoavKogAQgltiJA3F0gdOyPC58yw8GsUwhFgUMvVGR4oMqiwogQbhOHLxfBLDcVabIlEneGxEkMMLwMvTLc4M0OdEMN3VfRIxp48/6mDnPdCieGkHCiRflRh+K+JPXljz1IQJ0AzhjrRGQPZC5As+ZeuhQGRmgHU8mT34D0STQAAAABJRU5ErkJggg==", "width": 20, } `; @@ -1014,7 +1014,7 @@ exports[`gatsby-plugin-sharp fluid ensure maxWidth is in srcSet breakpoints 1`] exports[`gatsby-plugin-sharp fluid includes responsive image properties, e.g. sizes, srcset, etc. 1`] = ` Object { "aspectRatio": 1, - "base64": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAACXBIWXMAAAsTAAALEwEAmpwYAAABRElEQVQ4y7WUzUrDQBSFT37aij8UFFqFNmriZFy7s8/QF+iiz+ArCL6EGzeufBDBRVEQV67ciLgR3YgoyVju3IkxTaa2osNw4Yb57pmcOzP4jPHrib+HVYwkRiIopnPBBtjNZ2opMZnTIomPGKMuTts4W8ftFn1JJW1nGsyClwH2GwDgUIDvYLCMx4hKKBvM5ChA0yXGBTwddYa9Op5KfO4Qx94CLa2xaDbqOj1oUvWkDCda9rxjNCcGl+r4eC6KZ7Ag+LhFizxYx3VgzK+AT9o/wDebVTC7dRXQDp0Swz8S1vC6kxtUcFvpDveXtEPfSriZf0dr2jBha5XE3TYi35jEk2X7i3gXBdmqQyJxH2K4YrrtABseDlfxJqYeki9eSdreQ4iLLp2Zl8iYpGa5GCm3XWYXQ1Kq5rrPXMKG/dtjMCM8Br7rZPFvbj2AAAAAAElFTkSuQmCC", + "base64": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAACXBIWXMAAAsTAAALEwEAmpwYAAABP0lEQVQ4y2P4r8ZANmKgvuZ/agy/VaHojyopmv+CNf/XQCCoCEHNf1VBqv+oM5yVY1giwbBakuG2AkjknzoW/eh2/tdgOCPHYM7OwMDAwAgiGFgYGMJ5GF4og43ApRmuk58JqpMJRjIwMBizMbxTZviPaj8ihCD6rThAStkgljJATWEHc3P5wT5SxdD8B2ztERmQIiYGdAAxSpaF4T2q5TDN4HCaLgZSxMyAE1yQgwY+Fs1zxQloviSPTTMktM7JgVzIiKEH4hElFoavKogAQgltiJA3F0gdOyPC58yw8GsUwhFgUMvVGR4oMqiwogQbhOHLxfBLDcVabIlEneGxEkMMLwMvTLc4M0OdEMN3VfRIxp48/6mDnPdCieGkHCiRflRh+K+JPXljz1IQJ0AzhjrRGQPZC5As+ZeuhQGRmgHU8mT34D0STQAAAABJRU5ErkJggg==", "density": 72, "originalImg": "/static/1234/7e516/test.png", "originalName": "test.png", From e8c3ff344dba05c6641272be8a3de659bba7ba35 Mon Sep 17 00:00:00 2001 From: LekoArts Date: Fri, 11 Mar 2022 09:45:21 +0100 Subject: [PATCH 4/4] incorporate review comments --- packages/gatsby-plugin-sharp/src/index.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/gatsby-plugin-sharp/src/index.js b/packages/gatsby-plugin-sharp/src/index.js index 04f76bda8da62..5ceadcfd28e47 100644 --- a/packages/gatsby-plugin-sharp/src/index.js +++ b/packages/gatsby-plugin-sharp/src/index.js @@ -84,9 +84,11 @@ function calculateImageDimensionsAndAspectRatio(file, options) { function prepareQueue({ file, args }) { const { pathPrefix, duotone, ...rest } = args - const options = Object.assign(rest, duotone) - const argsDigestShort = createArgsDigest(options) - const imgSrc = `/${file.name}.${options.toFormat}` + // Duotone is a nested object inside transformOptions and has a [Object: Null Prototype] + // So it's flattened into a new object so that createArgsDigest also takes duotone into account + const digestArgs = Object.assign(rest, duotone) + const argsDigestShort = createArgsDigest(digestArgs) + const imgSrc = `/${file.name}.${args.toFormat}` const outputDir = path.join( process.cwd(), `public`, @@ -100,11 +102,11 @@ function prepareQueue({ file, args }) { const { width, height, aspectRatio } = calculateImageDimensionsAndAspectRatio( file, - options + args ) // encode the file name for URL - const encodedImgSrc = `/${encodeURIComponent(file.name)}.${options.toFormat}` + const encodedImgSrc = `/${encodeURIComponent(file.name)}.${args.toFormat}` // Prefix the image src. const digestDirPrefix = `${file.internal.contentDigest}/${argsDigestShort}`