fix(gatsby-remark-images): allow default max-width to be overwritten …

…with `wrapperStyle` (#23854) * gatsby-remark-images: allow max-width to overwrite presentationWidth This is useful when you e.g. want to use non-pixel units for max-width Fix #15578 * Fix linting error * Fix test snapshots
gatsbyjs · May 7, 2020 · 02bd7ed · 02bd7ed
1 parent d2de7f7
commit 02bd7ed
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 29 deletions.
diff --git a/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap b/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap
@@ -3,7 +3,7 @@
 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;\\"
+      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 300px; \\"
     >
       <a
     class=\\"gatsby-resp-image-link\\"
@@ -33,7 +33,7 @@ exports[`disableBgImage disables background image when disableBgImage === true 1
 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;\\"
+      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 300px; \\"
     >
       <a
     class=\\"gatsby-resp-image-link\\"
@@ -63,7 +63,7 @@ exports[`disableBgImage does not disable background image when disableBgImage ==
 exports[`disableBgImageOnAlpha disables background image on transparent images when disableBgImageOnAlpha === true 1`] = `
 "<span
       class=\\"gatsby-resp-image-wrapper\\"
-      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
+      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 300px; \\"
     >
       <a
     class=\\"gatsby-resp-image-link\\"
@@ -93,7 +93,7 @@ exports[`disableBgImageOnAlpha disables background image on transparent images w
 exports[`disableBgImageOnAlpha does not disable background image on transparent images when disableBgImageOnAlpha === false 1`] = `
 "<span
       class=\\"gatsby-resp-image-wrapper\\"
-      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
+      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 300px; \\"
     >
       <a
     class=\\"gatsby-resp-image-link\\"
@@ -123,7 +123,7 @@ exports[`disableBgImageOnAlpha does not disable background image on transparent
 exports[`it handles goofy nesting properly 1`] = `
 "<span
       class=\\"gatsby-resp-image-wrapper\\"
-      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
+      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 300px; \\"
     >
       <span
     class=\\"gatsby-resp-image-background-image\\"
@@ -145,7 +145,7 @@ exports[`it handles goofy nesting properly 1`] = `
 exports[`it leaves images that are already linked alone 1`] = `
 "<span
       class=\\"gatsby-resp-image-wrapper\\"
-      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
+      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 300px; \\"
     >
       <span
     class=\\"gatsby-resp-image-background-image\\"
@@ -166,22 +166,22 @@ exports[`it leaves images that are already linked alone 1`] = `
 
 exports[`it leaves linked HTML img tags alone 1`] = `
 "<a href=\\"https://example.org\\">
-  <span class=\\"gatsby-resp-image-wrapper\\" style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\">
+  <span class=\\"gatsby-resp-image-wrapper\\" style=\\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 300px; \\">
       <span class=\\"gatsby-resp-image-background-image\\" style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw&apos;); background-size: cover; display: block;\\"></span>
   <img class=\\"gatsby-resp-image-image\\" alt=\\"this image already has a link\\" title=\\"this image already has a link\\" src=\\"not-a-real-dir/images/this-image-already-has-a-link.jpeg\\" srcset=\\"not-a-real-dir/images/this-image-already-has-a-link.jpeg, not-a-real-dir/images/this-image-already-has-a-link.jpeg\\" sizes=\\"(max-width: 650px) 100vw, 650px\\" style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\\" loading=\\"lazy\\">
     </span>
 </a>"
 `;
 
 exports[`it leaves single-line linked HTML img tags alone 1`] = `
-"<span class=\\"gatsby-resp-image-wrapper\\" style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\">
+"<span class=\\"gatsby-resp-image-wrapper\\" style=\\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 300px; \\">
       <span class=\\"gatsby-resp-image-background-image\\" style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/png;base64,iVBORw&apos;); background-size: cover; display: block;\\"></span>
   <img class=\\"gatsby-resp-image-image\\" alt=\\"this image already has a link\\" title=\\"this image already has a link\\" src=\\"not-a-real-dir/images/this-image-already-has-a-link.jpeg\\" srcset=\\"not-a-real-dir/images/this-image-already-has-a-link.jpeg, not-a-real-dir/images/this-image-already-has-a-link.jpeg\\" sizes=\\"(max-width: 650px) 100vw, 650px\\" style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\\" loading=\\"lazy\\">
     </span>"
 `;
 
 exports[`it transforms HTML img tags 1`] = `
-"<span class=\\"gatsby-resp-image-wrapper\\" style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\">
+"<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/image/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(&apos;data:image/png;base64,iVBORw&apos;); background-size: cover; display: block;\\"></span>
   <img class=\\"gatsby-resp-image-image\\" alt=\\"my image\\" title=\\"my image\\" src=\\"not-a-real-dir/image/my-image.jpeg\\" srcset=\\"not-a-real-dir/image/my-image.jpeg, not-a-real-dir/image/my-image.jpeg\\" sizes=\\"(max-width: 650px) 100vw, 650px\\" style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\\" loading=\\"lazy\\">
@@ -190,7 +190,7 @@ exports[`it transforms HTML img tags 1`] = `
 `;
 
 exports[`it transforms HTML img tags with query strings 1`] = `
-"<span class=\\"gatsby-resp-image-wrapper\\" style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\">
+"<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/image/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(&apos;data:image/png;base64,iVBORw&apos;); background-size: cover; display: block;\\"></span>
   <img class=\\"gatsby-resp-image-image\\" alt=\\"my image\\" title=\\"my image\\" src=\\"not-a-real-dir/image/my-image.jpeg\\" srcset=\\"not-a-real-dir/image/my-image.jpeg, not-a-real-dir/image/my-image.jpeg\\" sizes=\\"(max-width: 650px) 100vw, 650px\\" style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\\" loading=\\"lazy\\">
@@ -201,7 +201,7 @@ exports[`it transforms HTML img tags with query strings 1`] = `
 exports[`it transforms image references in markdown 1`] = `
 "<span
       class=\\"gatsby-resp-image-wrapper\\"
-      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
+      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 300px; \\"
     >
       <a
     class=\\"gatsby-resp-image-link\\"
@@ -231,7 +231,7 @@ exports[`it transforms image references in markdown 1`] = `
 exports[`it transforms images in markdown 1`] = `
 "<span
       class=\\"gatsby-resp-image-wrapper\\"
-      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
+      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 300px; \\"
     >
       <a
     class=\\"gatsby-resp-image-link\\"
@@ -261,7 +261,7 @@ exports[`it transforms images in markdown 1`] = `
 exports[`it transforms images in markdown with query strings 1`] = `
 "<span
       class=\\"gatsby-resp-image-wrapper\\"
-      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
+      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 300px; \\"
     >
       <a
     class=\\"gatsby-resp-image-link\\"
@@ -291,7 +291,7 @@ exports[`it transforms images in markdown with query strings 1`] = `
 exports[`it transforms images in markdown with the "withWebp" option 1`] = `
 "<span
       class=\\"gatsby-resp-image-wrapper\\"
-      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
+      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 300px; \\"
     >
       <a
     class=\\"gatsby-resp-image-link\\"
@@ -331,7 +331,7 @@ exports[`it transforms images in markdown with the "withWebp" option 1`] = `
 exports[`it uses tracedSVG placeholder when enabled 1`] = `
 "<span
       class=\\"gatsby-resp-image-wrapper\\"
-      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
+      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 300px; \\"
     >
       <a
     class=\\"gatsby-resp-image-link\\"
@@ -362,7 +362,7 @@ exports[`markdownCaptions display title in markdown as caption when showCaptions
 "<figure class=\\"gatsby-resp-image-figure\\" style=\\"\\">
     <span
       class=\\"gatsby-resp-image-wrapper\\"
-      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
+      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 300px; \\"
     >
       <a
     class=\\"gatsby-resp-image-link\\"
@@ -395,7 +395,7 @@ exports[`markdownCaptions display title in text as caption when showCaptions ===
 "<figure class=\\"gatsby-resp-image-figure\\" style=\\"\\">
     <span
       class=\\"gatsby-resp-image-wrapper\\"
-      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
+      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 300px; \\"
     >
       <a
     class=\\"gatsby-resp-image-link\\"
@@ -428,7 +428,7 @@ exports[`showCaptions display alt as caption if specified first in showCaptions
 "<figure class=\\"gatsby-resp-image-figure\\" style=\\"\\">
     <span
       class=\\"gatsby-resp-image-wrapper\\"
-      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
+      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 300px; \\"
     >
       <a
     class=\\"gatsby-resp-image-link\\"
@@ -461,7 +461,7 @@ exports[`showCaptions display alt as caption if specified in showCaptions array
 "<figure class=\\"gatsby-resp-image-figure\\" style=\\"\\">
     <span
       class=\\"gatsby-resp-image-wrapper\\"
-      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
+      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 300px; \\"
     >
       <a
     class=\\"gatsby-resp-image-link\\"
@@ -494,7 +494,7 @@ exports[`showCaptions display alt as caption if specified in showCaptions array,
 "<figure class=\\"gatsby-resp-image-figure\\" style=\\"\\">
     <span
       class=\\"gatsby-resp-image-wrapper\\"
-      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
+      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 300px; \\"
     >
       <a
     class=\\"gatsby-resp-image-link\\"
@@ -527,7 +527,7 @@ exports[`showCaptions display alt as caption if title was not found and showCapt
 "<figure class=\\"gatsby-resp-image-figure\\" style=\\"\\">
     <span
       class=\\"gatsby-resp-image-wrapper\\"
-      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
+      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 300px; \\"
     >
       <a
     class=\\"gatsby-resp-image-link\\"
@@ -560,7 +560,7 @@ exports[`showCaptions display title as caption if specified first in showCaption
 "<figure class=\\"gatsby-resp-image-figure\\" style=\\"\\">
     <span
       class=\\"gatsby-resp-image-wrapper\\"
-      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
+      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 300px; \\"
     >
       <a
     class=\\"gatsby-resp-image-link\\"
@@ -593,7 +593,7 @@ exports[`showCaptions display title as caption if specified in showCaptions arra
 "<figure class=\\"gatsby-resp-image-figure\\" style=\\"\\">
     <span
       class=\\"gatsby-resp-image-wrapper\\"
-      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
+      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 300px; \\"
     >
       <a
     class=\\"gatsby-resp-image-link\\"
@@ -626,7 +626,7 @@ exports[`showCaptions display title as caption when showCaptions === true 1`] =
 "<figure class=\\"gatsby-resp-image-figure\\" style=\\"\\">
     <span
       class=\\"gatsby-resp-image-wrapper\\"
-      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
+      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 300px; \\"
     >
       <a
     class=\\"gatsby-resp-image-link\\"
@@ -659,7 +659,7 @@ exports[`showCaptions fallback to alt as caption if specified second in showCapt
 "<figure class=\\"gatsby-resp-image-figure\\" style=\\"\\">
     <span
       class=\\"gatsby-resp-image-wrapper\\"
-      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
+      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 300px; \\"
     >
       <a
     class=\\"gatsby-resp-image-link\\"
@@ -692,7 +692,7 @@ exports[`showCaptions fallback to title as caption if specified second in showCa
 "<figure class=\\"gatsby-resp-image-figure\\" style=\\"\\">
     <span
       class=\\"gatsby-resp-image-wrapper\\"
-      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
+      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 300px; \\"
     >
       <a
     class=\\"gatsby-resp-image-link\\"

diff --git a/packages/gatsby-remark-images/src/index.js b/packages/gatsby-remark-images/src/index.js
@@ -329,9 +329,9 @@ module.exports = (
     rawHTML = `
     <span
       class="${imageWrapperClass}"
-      style="position: relative; display: block; margin-left: auto; margin-right: auto; ${
-        imageCaption ? `` : wrapperStyle
-      } max-width: ${presentationWidth}px;"
+      style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: ${presentationWidth}px; ${
+      imageCaption ? `` : wrapperStyle
+    }"
     >
       ${rawHTML}
     </span>