fix(gatsby-plugin-sharp): ignore sizeByPixelDensity option and add deprecation warning (#13852)

* fix(gatsby-plugin-sharp): ignore sizeByPixelDensity option and add deprecation warning

fixes #12743

* docs: add deprecation notice to plugin README

* fix: delete tests

* Remove pixel density test snapshots

Author: Jason Lengstorf

packages/gatsby-plugin-sharp/README.md

@@ -107,10 +107,11 @@ fit strategies `CONTAIN` and `FILL` will not work when `cropFocus` is assigned t
 - `maxWidth` (int, default: 800)
 - `maxHeight` (int)
 - `quality` (int, default: 50)
-- `sizeByPixelDensity` (bool, default: false)
 - `srcSetBreakpoints` (array of int, default: [])
 - `fit` (string, default: '[sharp.fit.cover][6]')
 - `background` (string, default: 'rgba(0,0,0,1)')
+- [deprecated] `sizeByPixelDensity` (bool, default: false)
+  - Pixel density is only used in vector images, which Gatsby’s implementation of Sharp doesn’t support. This option is currently a no-op and will be removed in the next major version of Gatsby.
 
 #### Returns
 

packages/gatsby-plugin-sharp/src/__tests__/__snapshots__/index.js.snap

@@ -10,42 +10,6 @@ Object {
 }
 `;
 
-exports[`gatsby-plugin-sharp fluid accounts for pixel density 1`] = `
-Object {
-  "aspectRatio": 2.0661764705882355,
-  "base64": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAABYlAAAWJQFJUiTwAAABAklEQVQoz61R7WrCQBDM+7+Cv1qhlIogoUWMoH8KrfgOLVXRKDV4d7kkl6/pbsxpqBIo9mBuZ7N3k51bB7TKsrwZVsexyS2rKerwFhYFVI1DnkMQOHIuCaLB+ayuwXlMaApXgvMoxjTU8MIQE4rMx8SnNffUkU/qM/bbiPAeRfgw5n8tB+QgO1kmUvwROdm0kYHmUNoe+NoU2wZTdVjQH7Isg9YRpFIXor8vpGmKjb/FQQgslit8fi3wvQ/OHXLhxRvDHY7Qd5+x3e2udmNzTUN4fZvhoddH566L+8cn9AZuVcvpLR3e9kEAISWEkDAmbRXkGCcJ1r4PRRNPEkPu9Kn2Azs0CqJYU3JKAAAAAElFTkSuQmCC",
-  "density": 144,
-  "originalImg": "/static/1234/e681d/test.png",
-  "originalName": undefined,
-  "presentationHeight": 68,
-  "presentationWidth": 141,
-  "sizes": "(max-width: 141px) 100vw, 141px",
-  "src": "/static/1234/e681d/test.png",
-  "srcSet": "/static/1234/9ec3c/test.png 200w,
-/static/1234/e681d/test.png 281w",
-  "srcSetType": "image/png",
-  "tracedSVG": undefined,
-}
-`;
-
-exports[`gatsby-plugin-sharp fluid can optionally ignore pixel density 1`] = `
-Object {
-  "aspectRatio": 2.0661764705882355,
-  "base64": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAABYlAAAWJQFJUiTwAAABAklEQVQoz61R7WrCQBDM+7+Cv1qhlIogoUWMoH8KrfgOLVXRKDV4d7kkl6/pbsxpqBIo9mBuZ7N3k51bB7TKsrwZVsexyS2rKerwFhYFVI1DnkMQOHIuCaLB+ayuwXlMaApXgvMoxjTU8MIQE4rMx8SnNffUkU/qM/bbiPAeRfgw5n8tB+QgO1kmUvwROdm0kYHmUNoe+NoU2wZTdVjQH7Isg9YRpFIXor8vpGmKjb/FQQgslit8fi3wvQ/OHXLhxRvDHY7Qd5+x3e2udmNzTUN4fZvhoddH566L+8cn9AZuVcvpLR3e9kEAISWEkDAmbRXkGCcJ1r4PRRNPEkPu9Kn2Azs0CqJYU3JKAAAAAElFTkSuQmCC",
-  "density": 144,
-  "originalImg": "/static/1234/e681d/test.png",
-  "originalName": undefined,
-  "presentationHeight": 136,
-  "presentationWidth": 281,
-  "sizes": "(max-width: 281px) 100vw, 281px",
-  "src": "/static/1234/e681d/test.png",
-  "srcSet": "/static/1234/9ec3c/test.png 200w,
-/static/1234/e681d/test.png 281w",
-  "srcSetType": "image/png",
-  "tracedSVG": undefined,
-}
-`;
-
 exports[`gatsby-plugin-sharp fluid includes responsive image properties, e.g. sizes, srcset, etc. 1`] = `
 Object {
   "aspectRatio": 1,

packages/gatsby-plugin-sharp/src/__tests__/index.js

@@ -116,28 +116,6 @@ describe(`gatsby-plugin-sharp`, () => {
       expect(path.parse(result.srcSet).name).toBe(file.name)
     })
 
-    it(`accounts for pixel density`, async () => {
-      const result = await fluid({
-        file: getFileObject(path.join(__dirname, `images/144-density.png`)),
-        args: {
-          sizeByPixelDensity: true,
-        },
-      })
-
-      expect(result).toMatchSnapshot()
-    })
-
-    it(`can optionally ignore pixel density`, async () => {
-      const result = await fluid({
-        file: getFileObject(path.join(__dirname, `images/144-density.png`)),
-        args: {
-          sizeByPixelDensity: false,
-        },
-      })
-
-      expect(result).toMatchSnapshot()
-    })
-
     it(`does not change the arguments object it is given`, async () => {
       const args = { maxWidth: 400 }
       await fluid({

packages/gatsby-plugin-sharp/src/index.js

@@ -244,6 +244,23 @@ async function getTracedSVG(options, file) {
 
 async function fluid({ file, args = {}, reporter, cache }) {
   const options = healOptions(getPluginOptions(), args, file.extension)
+
+  if (options.sizeByPixelDensity) {
+    /*
+     * We learned that `sizeByPixelDensity` is only valid for vector images,
+     * and Gatsby’s implementation of Sharp doesn’t support vector images.
+     * This means we should remove this option in the next major version of
+     * Gatsby, but for now we can no-op and warn.
+     *
+     * See https://github.com/gatsbyjs/gatsby/issues/12743
+     *
+     * TODO: remove the sizeByPixelDensity option in the next breaking release
+     */
+    reporter.warn(
+      `the option sizeByPixelDensity is deprecated and should not be used. It will be removed in the next major release of Gatsby.`
+    )
+  }
+
   // Account for images with a high pixel density. We assume that these types of
   // images are intended to be displayed at their native resolution.
   let metadata
@@ -255,11 +272,6 @@ async function fluid({ file, args = {}, reporter, cache }) {
   }
 
   const { width, height, density, format } = metadata
-  const defaultImagePPI = 72 // Standard digital image pixel density
-  const pixelRatio =
-    options.sizeByPixelDensity && typeof density === `number` && density > 0
-      ? density / defaultImagePPI
-      : 1
 
   // if no maxWidth is passed, we need to resize the image based on the passed maxHeight
   const fixedDimension =
@@ -275,16 +287,10 @@ async function fluid({ file, args = {}, reporter, cache }) {
 
   let presentationWidth, presentationHeight
   if (fixedDimension === `maxWidth`) {
-    presentationWidth = Math.min(
-      options.maxWidth,
-      Math.round(width / pixelRatio)
-    )
+    presentationWidth = Math.min(options.maxWidth, width)
     presentationHeight = Math.round(presentationWidth * (height / width))
   } else {
-    presentationHeight = Math.min(
-      options.maxHeight,
-      Math.round(height / pixelRatio)
-    )
+    presentationHeight = Math.min(options.maxHeight, height)
     presentationWidth = Math.round(presentationHeight * (width / height))
   }