fix(gatsby-remark-images): override all default styling with wrapperStyle (#12200)

Addressing issue [12199](#12199) where the default values couldn't be overwritten.

Co-authored-by: Ward Peeters <[email protected]>

Author: florinpop17

packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap

@@ -3,7 +3,7 @@
 exports[`it handles goofy nesting properly 1`] = `
 "<span
     class=\\"gatsby-resp-image-wrapper\\"
-    style=\\"position: relative; display: block;  max-width: 300px; margin-left: auto; margin-right: auto;\\"
+    style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
   >
     <span
       class=\\"gatsby-resp-image-background-image\\"
@@ -24,7 +24,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;  max-width: 300px; margin-left: auto; margin-right: auto;\\"
+    style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
   >
     <span
       class=\\"gatsby-resp-image-background-image\\"
@@ -44,23 +44,23 @@ 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;  max-width: 300px; margin-left: auto; margin-right: auto;\\">
+  <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\\" style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\\" alt=\\"this image already has a link\\" title=\\"\\" 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\\">
   </span>
 </a>"
 `;
 
 exports[`it leaves single-line linked HTML img tags alone 1`] = `
-"<span class=\\"gatsby-resp-image-wrapper\\" style=\\"position: relative; display: block;  max-width: 300px; margin-left: auto; margin-right: auto;\\">
+"<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\\" style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\\" alt=\\"this image already has a link\\" title=\\"\\" 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\\">
   </span>"
 `;
 
 exports[`it transforms HTML img tags 1`] = `
 "<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-wrapper\\" style=\\"position: relative; display: block;  max-width: 300px; margin-left: auto; margin-right: auto;\\">
+    <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\\" style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\\" alt=\\"my image\\" title=\\"\\" 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\\">
   </span>
@@ -69,7 +69,7 @@ exports[`it transforms HTML img tags 1`] = `
 
 exports[`it transforms HTML img tags with query strings 1`] = `
 "<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-wrapper\\" style=\\"position: relative; display: block;  max-width: 300px; margin-left: auto; margin-right: auto;\\">
+    <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\\" style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\\" alt=\\"my image\\" title=\\"\\" 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\\">
   </span>
@@ -86,7 +86,7 @@ exports[`it transforms image references in markdown 1`] = `
   >
     <span
     class=\\"gatsby-resp-image-wrapper\\"
-    style=\\"position: relative; display: block;  max-width: 300px; margin-left: auto; margin-right: auto;\\"
+    style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
   >
     <span
       class=\\"gatsby-resp-image-background-image\\"
@@ -115,7 +115,7 @@ exports[`it transforms images in markdown 1`] = `
   >
     <span
     class=\\"gatsby-resp-image-wrapper\\"
-    style=\\"position: relative; display: block;  max-width: 300px; margin-left: auto; margin-right: auto;\\"
+    style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
   >
     <span
       class=\\"gatsby-resp-image-background-image\\"
@@ -144,7 +144,7 @@ exports[`it transforms images in markdown with query strings 1`] = `
   >
     <span
     class=\\"gatsby-resp-image-wrapper\\"
-    style=\\"position: relative; display: block;  max-width: 300px; margin-left: auto; margin-right: auto;\\"
+    style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
   >
     <span
       class=\\"gatsby-resp-image-background-image\\"
@@ -173,7 +173,7 @@ exports[`it uses tracedSVG placeholder when enabled 1`] = `
   >
     <span
     class=\\"gatsby-resp-image-wrapper\\"
-    style=\\"position: relative; display: block;  max-width: 300px; margin-left: auto; margin-right: auto;\\"
+    style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
   >
     <span
       class=\\"gatsby-resp-image-background-image\\"

packages/gatsby-remark-images/src/index.js

@@ -245,9 +245,9 @@ module.exports = (
     let rawHTML = `
   <span
     class="${imageWrapperClass}"
-    style="position: relative; display: block; ${
+    style="position: relative; display: block; margin-left: auto; margin-right: auto; ${
       showCaptions ? `` : wrapperStyle
-    } max-width: ${presentationWidth}px; margin-left: auto; margin-right: auto;"
+    } max-width: ${presentationWidth}px;"
   >
     <span
       class="${imageBackgroundClass}"