From 63eaabf09465ac44064abb08483e2592415cb7d4 Mon Sep 17 00:00:00 2001
From: Michael <michael@whiteshadows.me>
Date: Tue, 24 Aug 2021 19:05:15 +0930
Subject: [PATCH] chore(gatsby-remark-images): Only convert supported image
 extensions (#32868)

* chore(gatsby-remark-images): Only convert supported image extensions

* chore: Note supportedExtensions source

* test: Validate videos aren't transformed by remark-images
---
 .../src/__tests__/index.js                    | 11 ++++++++
 packages/gatsby-remark-images/src/index.js    | 25 +++++++++++--------
 2 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/packages/gatsby-remark-images/src/__tests__/index.js b/packages/gatsby-remark-images/src/__tests__/index.js
index 622c6be488939..183b6f93deacd 100644
--- a/packages/gatsby-remark-images/src/__tests__/index.js
+++ b/packages/gatsby-remark-images/src/__tests__/index.js
@@ -108,6 +108,17 @@ test(`it leaves non-relative images alone`, async () => {
   expect(result).toEqual([])
 })
 
+test(`it leaves files with unsupported file extensions alone`, async () => {
+  const imagePath = `video/my-video.mp4`
+  const content = `
+![video](./${imagePath})
+  `.trim()
+
+  const result = await plugin(createPluginOptions(content, imagePath))
+
+  expect(result).toEqual([])
+})
+
 test(`it transforms images in markdown`, async () => {
   const imagePath = `images/my-image.jpeg`
   const content = `
diff --git a/packages/gatsby-remark-images/src/index.js b/packages/gatsby-remark-images/src/index.js
index c88b7e9ddeb24..aa00ff298eae1 100644
--- a/packages/gatsby-remark-images/src/index.js
+++ b/packages/gatsby-remark-images/src/index.js
@@ -17,6 +17,16 @@ const cheerio = require(`cheerio`)
 const { slash } = require(`gatsby-core-utils`)
 const chalk = require(`chalk`)
 
+// Should be the same as https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-transformer-sharp/src/supported-extensions.js
+const supportedExtensions = {
+  jpeg: true,
+  jpg: true,
+  png: true,
+  webp: true,
+  tif: true,
+  tiff: true,
+}
+
 // If the image is relative (not hosted elsewhere)
 // 1. Find the image file
 // 2. Find the image's size
@@ -421,13 +431,8 @@ module.exports = (
           }
           const fileType = getImageInfo(node.url).ext
 
-          // Ignore gifs as we can't process them,
-          // svgs as they are already responsive by definition
-          if (
-            isRelativeUrl(node.url) &&
-            fileType !== `gif` &&
-            fileType !== `svg`
-          ) {
+          // Only attempt to convert supported extensions
+          if (isRelativeUrl(node.url) && supportedExtensions[fileType]) {
             return generateImagesAndUpdateNode(
               node,
               resolve,
@@ -488,12 +493,10 @@ module.exports = (
 
               const fileType = getImageInfo(formattedImgTag.url).ext
 
-              // Ignore gifs as we can't process them,
-              // svgs as they are already responsive by definition
+              // Only attempt to convert supported extensions
               if (
                 isRelativeUrl(formattedImgTag.url) &&
-                fileType !== `gif` &&
-                fileType !== `svg`
+                supportedExtensions[fileType]
               ) {
                 const rawHTML = await generateImagesAndUpdateNode(
                   formattedImgTag,