feat(gatsby-remark-images): add disableBgImage option (#19152)

dsewnr · pieh · commit d3d90205de69 · 2019-11-04T12:47:21.000+01:00
* Add disableBgImage option for gatsby-remark-images package to prevent "Stylesheet too long" error on AMP

* Add disableBgImage option for gatsby-remark-images package to prevent "Stylesheet too long" error on AMP

* Test disableBgImage

* Update gatsby-remark-images snapshot

* Update packages/gatsby-remark-images/README.md

Co-Authored-By: Michal Piechowiak &lt;misiek.piechowiak@gmail.com&gt;

* chore: format

* fix snapshot
diff --git a/packages/gatsby-remark-images/README.md b/packages/gatsby-remark-images/README.md
@@ -58,6 +58,7 @@ plugins: [
 | `tracedSVG`             | `false` | Use traced SVGs for placeholder images instead of the "blur up" effect. Pass `true` for traced SVGs with the default settings (seen [here][3]), or an object of options to override the defaults. For example, pass `{ color: "#F00", turnPolicy: "TURNPOLICY_MAJORITY" }` to change the color of the trace to red and the turn policy to TURNPOLICY_MAJORITY. See [`node-potrace` parameter documentation][4] for a full listing and explanation of the available options.                                                                                                                                                        |
 | `loading`               | `lazy`  | Set the browser's native lazy loading attribute. One of `lazy`, `eager` or `auto`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
 | `disableBgImageOnAlpha` | `false` | Images containing transparent pixels around the edges results in images with blurry edges. As a result, these images do not work well with the "blur up" technique used in this plugin. As a workaround to disable background images with blurry edges on images containing transparent pixels, enable this setting.                                                                                                                                                                                                                                                                                                               |
+| `disableBgImage`        | `false` | Remove background image and its' inline style. Useful to prevent `Stylesheet too long` error on AMP.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
 
 ## dynamic wrapperStyle example
 
diff --git a/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap b/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap
@@ -1,5 +1,63 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`disableBgImage disables background image when disableBgImage === true 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; display: block;\\"
+  ></span>
+  <img
+        class=\\"gatsby-resp-image-image\\"
+        alt=\\"some alt\\"
+        title=\\"some title\\"
+        src=\\"not-a-real-dir/images/my-image.jpeg\\"
+        srcset=\\"not-a-real-dir/images/my-image.jpeg, not-a-real-dir/images/my-image.jpeg\\"
+        sizes=\\"(max-width: 650px) 100vw, 650px\\"
+        loading=\\"lazy\\"
+      />
+  </a>
+    </span>"
+`;
+
+exports[`disableBgImage does not disable background image when disableBgImage === false 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>
+  <img
+        class=\\"gatsby-resp-image-image\\"
+        alt=\\"some alt\\"
+        title=\\"some title\\"
+        src=\\"not-a-real-dir/images/my-image.jpeg\\"
+        srcset=\\"not-a-real-dir/images/my-image.jpeg, not-a-real-dir/images/my-image.jpeg\\"
+        sizes=\\"(max-width: 650px) 100vw, 650px\\"
+        loading=\\"lazy\\"
+      />
+  </a>
+    </span>"
+`;
+
 exports[`disableBgImageOnAlpha disables background image on transparent images when disableBgImageOnAlpha === true 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
@@ -622,3 +622,33 @@ describe(`disableBgImageOnAlpha`, () => {
     expect(node.value).toMatchSnapshot()
   })
 })
+
+describe(`disableBgImage`, () => {
+  it(`does not disable background image when disableBgImage === false`, async () => {
+    const imagePath = `images/my-image.jpeg`
+    const content = `![some alt](./${imagePath} "some title")`
+
+    const nodes = await plugin(createPluginOptions(content, imagePath), {
+      disableBgImage: false,
+    })
+    expect(nodes.length).toBe(1)
+
+    const node = nodes.pop()
+    expect(node.type).toBe(`html`)
+    expect(node.value).toMatchSnapshot()
+  })
+
+  it(`disables background image when disableBgImage === true`, async () => {
+    const imagePath = `images/my-image.jpeg`
+    const content = `![some alt](./${imagePath} "some title")`
+
+    const nodes = await plugin(createPluginOptions(content, imagePath), {
+      disableBgImage: true,
+    })
+    expect(nodes.length).toBe(1)
+
+    const node = nodes.pop()
+    expect(node.type).toBe(`html`)
+    expect(node.value).toMatchSnapshot()
+  })
+})
diff --git a/packages/gatsby-remark-images/src/constants.js b/packages/gatsby-remark-images/src/constants.js
@@ -9,6 +9,7 @@ exports.DEFAULT_OPTIONS = {
   tracedSVG: false,
   loading: `lazy`,
   disableBgImageOnAlpha: false,
+  disableBgImage: false,
 }
 
 exports.imageClass = `gatsby-resp-image-image`
diff --git a/packages/gatsby-remark-images/src/index.js b/packages/gatsby-remark-images/src/index.js
@@ -287,6 +287,9 @@ module.exports = (
       const imageStats = await stats({ file: imageNode, reporter })
       if (imageStats && imageStats.isTransparent) removeBgImage = true
     }
+    if (options.disableBgImage) {
+      removeBgImage = true
+    }
 
     const bgImage = removeBgImage
       ? ``

Original file line number	Diff line number	Diff line change
`@@ -9,6 +9,7 @@ exports.DEFAULT_OPTIONS = {`
`9`	`9`	`tracedSVG: false,`
`10`	`10`	loading: `lazy`,
`11`	`11`	`disableBgImageOnAlpha: false,`
	`12`	`+ disableBgImage: false,`
`12`	`13`	`}`
`13`	`14`
`14`	`15`	exports.imageClass = `gatsby-resp-image-image`
Original file line number	Diff line number	Diff line change
`@@ -287,6 +287,9 @@ module.exports = (`
`287`	`287`	`const imageStats = await stats({ file: imageNode, reporter })`
`288`	`288`	`if (imageStats && imageStats.isTransparent) removeBgImage = true`
`289`	`289`	`}`
	`290`	`+ if (options.disableBgImage) {`
	`291`	`+ removeBgImage = true`
	`292`	`+ }`
`290`	`293`
`291`	`294`	`const bgImage = removeBgImage`
`292`	`295`	? ``