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
gatsbyjs · Aug 24, 2021 · 63eaabf · 63eaabf
1 parent c409352
commit 63eaabf
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 11 deletions.
diff --git 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
@@ -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,