fix(gatsby-remark-images): add styles to webp img tags (#20086)

gatsbyjs · Dec 12, 2019 · 8227b0b · 8227b0b
1 parent b8bb661
commit 8227b0b
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 0 deletions.
diff --git 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`] = `
     </span>"
 `;
 
+exports[`it transforms images in markdown with the "withWebp" option 1`] = `
+"<span
+      class=\\"gatsby-resp-image-wrapper\\"
+      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
+    >
+      <a
+    class=\\"gatsby-resp-image-link\\"
+    href=\\"not-a-real-dir/images/my-image.jpeg\\"
+    style=\\"display: block\\"
+    target=\\"_blank\\"
+    rel=\\"noopener\\"
+  >
+    <span
+    class=\\"gatsby-resp-image-background-image\\"
+    style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw'); background-size: cover; display: block;\\"
+  ></span>
+  <picture>
+        <source
+          srcset=\\"not-a-real-dir/images/my-image.jpeg, not-a-real-dir/images/my-image.jpeg\\"
+          sizes=\\"(max-width: 650px) 100vw, 650px\\"
+          type=\\"undefined\\"
+        />
+        <source
+          srcset=\\"not-a-real-dir/images/my-image.jpeg, not-a-real-dir/images/my-image.jpeg\\"
+          sizes=\\"(max-width: 650px) 100vw, 650px\\"
+          type=\\"undefined\\"
+        />
+        <img
+          class=\\"gatsby-resp-image-image\\"
+          src=\\"not-a-real-dir/images/my-image.jpeg\\"
+          alt=\\"image\\"
+          title=\\"image\\"
+          loading=\\"lazy\\"
+          style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\\"
+        />
+      </picture>
+  </a>
+    </span>"
+`;
+
 exports[`it uses tracedSVG placeholder when enabled 1`] = `
 "<span
       class=\\"gatsby-resp-image-wrapper\\"

diff --git a/packages/gatsby-remark-images/src/__tests__/index.js b/packages/gatsby-remark-images/src/__tests__/index.js
@@ -125,6 +125,25 @@ test(`it transforms images in markdown`, async () => {
   expect(node.value).not.toMatch(`<html>`)
 })
 
+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(`<html>`)
+})
+
 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
@@ -249,6 +249,7 @@ module.exports = (
           alt="${alt}"
           title="${title}"
           loading="${loading}"
+          style="${imageStyle}"
         />
       </picture>
       `.trim()