From 8227b0b950ceaff049ce64ba9b5c443ba8944150 Mon Sep 17 00:00:00 2001 From: Roger Date: Thu, 12 Dec 2019 09:02:55 -0500 Subject: [PATCH] fix(gatsby-remark-images): add styles to webp `img` tags (#20086) --- .../src/__tests__/__snapshots__/index.js.snap | 40 +++++++++++++++++++ .../src/__tests__/index.js | 19 +++++++++ packages/gatsby-remark-images/src/index.js | 1 + 3 files changed, 60 insertions(+) diff --git a/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap b/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap index c7c6998a3170f..90d734bdc6974 100644 --- a/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap +++ b/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap @@ -288,6 +288,46 @@ exports[`it transforms images in markdown with query strings 1`] = ` " `; +exports[`it transforms images in markdown with the "withWebp" option 1`] = ` +" + + + + + + \\"image\\" + + + " +`; + exports[`it uses tracedSVG placeholder when enabled 1`] = ` " { expect(node.value).not.toMatch(``) }) +test(`it transforms images in markdown with the "withWebp" option`, async () => { + const imagePath = `images/my-image.jpeg` + const content = ` + +![image](./${imagePath}) + `.trim() + + const nodes = await plugin(createPluginOptions(content, imagePath), { + withWebp: true, + }) + + expect(nodes.length).toBe(1) + + const node = nodes.pop() + expect(node.type).toBe(`html`) + expect(node.value).toMatchSnapshot() + expect(node.value).not.toMatch(``) +}) + test(`it transforms multiple images in markdown`, async () => { const imagePaths = [`images/my-image.jpeg`, `images/other-image.jpeg`] diff --git a/packages/gatsby-remark-images/src/index.js b/packages/gatsby-remark-images/src/index.js index 06e097fb49a03..d8e028fb0c824 100644 --- a/packages/gatsby-remark-images/src/index.js +++ b/packages/gatsby-remark-images/src/index.js @@ -249,6 +249,7 @@ module.exports = ( alt="${alt}" title="${title}" loading="${loading}" + style="${imageStyle}" /> `.trim()