fix(gatsby-plugin-image): Use inline-block in class so users can over…

…ride (#29148) * Use inline-block in class so users can override * fix tests * forgot quotes, oops * escape quotes * not catching quotes * this should have worked before and I'm confused * since styles now live int eh class we don't need this test
gatsbyjs · Jan 25, 2021 · f945049 · f945049
1 parent 25912f0
commit f945049
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 61 deletions.
diff --git a/e2e-tests/gatsby-static-image/cypress/integration/image.js b/e2e-tests/gatsby-static-image/cypress/integration/image.js
@@ -13,13 +13,6 @@ describe(`Production gatsby-image`, () => {
           .its(`length`)
           .should(`eq`, 1)
       })
-
-      it(`contains position relative`, () => {
-        cy.getTestElement(fluidTestId)
-          .find(`.gatsby-image-wrapper`)
-          .should(`have.attr`, `style`)
-          .and(`contains`, `position:relative`)
-      })
     })
   })
 

diff --git a/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.browser.tsx b/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.browser.tsx
@@ -36,9 +36,9 @@ describe(`GatsbyImage browser`, () => {
     beforeHydrationContent = document.createElement(`div`)
     beforeHydrationContent.innerHTML = `
       <div
-        class="gatsby-image-wrapper"
+        class="gatsby-image-wrapper gatsby-image-wrapper-constrained"
         data-gatsby-image-wrapper=""
-        style="position: relative; display: inline-block;"
+        style="position: relative;"
       >
         <div
           style="max-width: 100px; display: block;"

diff --git a/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.server.tsx b/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.server.tsx
@@ -41,7 +41,7 @@ describe(`GatsbyImage server`, () => {
   })
 
   describe(`style verifications`, () => {
-    it(`has a valid style attributes for fullWidth layout`, () => {
+    it(`has a valid className for fullWidth layout`, () => {
       const layout = `fullWidth`
 
       const image: IGatsbyImageData = {
@@ -59,22 +59,9 @@ describe(`GatsbyImage server`, () => {
       )
 
       const wrapper = document.querySelector(`[data-gatsby-image-wrapper=""]`)
-      expect((wrapper as HTMLElement).style).toMatchInlineSnapshot(`
-        CSSStyleDeclaration {
-          "0": "position",
-          "1": "overflow",
-          "_importants": Object {
-            "overflow": undefined,
-            "position": undefined,
-          },
-          "_length": 2,
-          "_onChange": [Function],
-          "_values": Object {
-            "overflow": "hidden",
-            "position": "relative",
-          },
-        }
-      `)
+      expect((wrapper as HTMLElement).className).toMatchInlineSnapshot(
+        `"gatsby-image-wrapper"`
+      )
     })
 
     it(`has a valid style attributes for fixed layout`, () => {
@@ -97,29 +84,23 @@ describe(`GatsbyImage server`, () => {
       const wrapper = document.querySelector(`[data-gatsby-image-wrapper=""]`)
       expect((wrapper as HTMLElement).style).toMatchInlineSnapshot(`
         CSSStyleDeclaration {
-          "0": "position",
-          "1": "overflow",
-          "2": "width",
-          "3": "height",
+          "0": "width",
+          "1": "height",
           "_importants": Object {
             "height": undefined,
-            "overflow": undefined,
-            "position": undefined,
             "width": undefined,
           },
-          "_length": 4,
+          "_length": 2,
           "_onChange": [Function],
           "_values": Object {
             "height": "100px",
-            "overflow": "hidden",
-            "position": "relative",
             "width": "100px",
           },
         }
       `)
     })
 
-    it(`has a valid style attributes for constrained layout`, () => {
+    it(`has a valid className for constrained layout`, () => {
       const layout = `constrained`
 
       const image: IGatsbyImageData = {
@@ -137,25 +118,9 @@ describe(`GatsbyImage server`, () => {
       )
 
       const wrapper = document.querySelector(`[data-gatsby-image-wrapper=""]`)
-      expect((wrapper as HTMLElement).style).toMatchInlineSnapshot(`
-        CSSStyleDeclaration {
-          "0": "position",
-          "1": "overflow",
-          "2": "display",
-          "_importants": Object {
-            "display": undefined,
-            "overflow": undefined,
-            "position": undefined,
-          },
-          "_length": 3,
-          "_onChange": [Function],
-          "_values": Object {
-            "display": "inline-block",
-            "overflow": "hidden",
-            "position": "relative",
-          },
-        }
-      `)
+      expect((wrapper as HTMLElement).className).toMatchInlineSnapshot(
+        `"gatsby-image-wrapper gatsby-image-wrapper-constrained"`
+      )
     })
   })
 

diff --git a/packages/gatsby-plugin-image/src/components/hooks.ts b/packages/gatsby-plugin-image/src/components/hooks.ts
@@ -55,20 +55,22 @@ export function getWrapperProps(
 ): Pick<HTMLAttributes<HTMLElement>, "className" | "style"> & {
   "data-gatsby-image-wrapper": string
 } {
-  const wrapperStyle: CSSProperties = {
-    position: `relative`,
-    overflow: `hidden`,
-  }
+  const wrapperStyle: CSSProperties = {}
+
+  let className = `gatsby-image-wrapper`
 
   if (layout === `fixed`) {
     wrapperStyle.width = width
     wrapperStyle.height = height
   } else if (layout === `constrained`) {
-    wrapperStyle.display = `inline-block`
+    if (!global.GATSBY___IMAGE) {
+      wrapperStyle.display = `inline-block`
+    }
+    className = `gatsby-image-wrapper gatsby-image-wrapper-constrained`
   }
 
   return {
-    className: `gatsby-image-wrapper`,
+    className,
     "data-gatsby-image-wrapper": ``,
     style: wrapperStyle,
   }

diff --git a/packages/gatsby-plugin-image/src/gatsby-ssr.tsx b/packages/gatsby-plugin-image/src/gatsby-ssr.tsx
@@ -17,6 +17,10 @@ export function onRenderBody({ setHeadComponents }: RenderBodyArgs): void {
     <style
       key="gatsby-image-style"
       dangerouslySetInnerHTML={generateHtml(cssNanoMacro`
+  .gatsby-image-wrapper {
+    position: relative;
+    overflow: hidden;
+  }
   .gatsby-image-wrapper img {
     all: inherit;
     bottom: 0;
@@ -36,6 +40,9 @@ export function onRenderBody({ setHeadComponents }: RenderBodyArgs): void {
     transform: translateZ(0px);
     transition: opacity 250ms linear;
     will-change: opacity;
+  }
+  .gatsby-image-wrapper-constrained {
+    display: inline-block;
   }
     `)}
     />,