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..3429438aaca65 100644 --- a/packages/gatsby-plugin-sharp/src/__tests__/__snapshots__/index.js.snap +++ b/packages/gatsby-plugin-sharp/src/__tests__/__snapshots__/index.js.snap @@ -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, } diff --git a/packages/gatsby-plugin-sharp/src/__tests__/index.js b/packages/gatsby-plugin-sharp/src/__tests__/index.js index 2fee9ed0d9867..7f8400615b81d 100644 --- a/packages/gatsby-plugin-sharp/src/__tests__/index.js +++ b/packages/gatsby-plugin-sharp/src/__tests__/index.js @@ -615,6 +615,28 @@ describe(`gatsby-plugin-sharp`, () => { const result = await fluid({ file, args }) expect(result).toMatchSnapshot() }) + + it(`creates two different images for different duotone settings`, async () => { + const testName = `duotone-digest-test` + const firstImage = await fluid({ + file: getFileObject(path.join(__dirname, `images/test.png`), testName), + args: { + maxWidth: 100, + width: 100, + duotone: { highlight: `#BBFFE6`, shadow: `#51758D` }, + }, + }) + const secondImage = await fluid({ + file: getFileObject(path.join(__dirname, `images/test.png`), testName), + args: { + maxWidth: 100, + width: 100, + duotone: { highlight: `#F1D283`, shadow: `#000000` }, + }, + }) + + 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..5ceadcfd28e47 100644 --- a/packages/gatsby-plugin-sharp/src/index.js +++ b/packages/gatsby-plugin-sharp/src/index.js @@ -83,9 +83,12 @@ function calculateImageDimensionsAndAspectRatio(file, options) { } function prepareQueue({ file, args }) { - const { pathPrefix, ...options } = args - const argsDigestShort = createArgsDigest(options) - const imgSrc = `/${file.name}.${options.toFormat}` + const { pathPrefix, duotone, ...rest } = args + // 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`, @@ -99,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}`