fix(gatsby-transformer-sharp): Add checkSupportedExtensions… (#22565)

* Add 'checkSupportedExtensions' option

* modify "parsing algorithm" note

Co-authored-by: gatsbybot <mathews.kyle+gatsbybot@gmail.com>

Author: LekoArts

packages/gatsby-transformer-sharp/README.md

@@ -38,6 +38,28 @@ It recognizes files with the following extensions as images.
 
 Each image file is parsed into a node of type `ImageSharp`.
 
+## Configuration options
+
+`checkSupportedExtensions` [boolean][optional]
+
+Sharp only supports certain image formats (see the Parsing algorithm section above) and hence throws a warning when you e.g. use a .gif in an `ImageSharp` query. You'll need to use `publicURL` instead. With this option you can disable the warning behavior.
+
+```javascript
+// In your gatsby-config.js
+module.exports = {
+  plugins: [
+    `gatsby-plugin-sharp`,
+    {
+      resolve: `gatsby-transformer-sharp`,
+      options: {
+        // The option defaults to true
+        checkSupportedExtensions: false,
+      },
+    },
+  ],
+}
+```
+
 ## Troubleshooting
 
 ### Incompatible library version: sharp.node requires version X or later, but Z provides version Y

packages/gatsby-transformer-sharp/src/create-resolvers.js

@@ -1,11 +1,17 @@
 const { supportedExtensions } = require(`./supported-extensions`)
 
-module.exports = ({ createResolvers, reporter }) => {
+module.exports = ({ createResolvers, reporter }, pluginOptions = {}) => {
+  const { checkSupportedExtensions = true } = pluginOptions
+
   const resolvers = {
     File: {
       childImageSharp: {
         resolve: (parent, args, context, info) => {
-          if (!supportedExtensions[parent.extension]) {
+          // TODO: In future when components from GraphQL are possible make sure that we can support both supported & unsupported image formats
+          if (
+            !supportedExtensions[parent.extension] &&
+            checkSupportedExtensions
+          ) {
             reporter.warn(
               `You can't use childImageSharp together with ${parent.name}.${parent.extension} — use publicURL instead. The childImageSharp portion of the query in this file will return null:\n${context.componentPath}`
             )