gatsby-plugin-mdx wraps images from gatsby-remark-images in a <div>, breaking some styling

MorrisonCole commented 2 years ago

Preliminary Checks

[X] This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
[X] This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

I think this is a bug since it was not behaviour in pre-V2 versions.

I've been upgrading a long-term project to MDX V2 and found that whilst everything else works, gatsby images have lost important styling.

Pre V2 the generated HTML for this example image was:

<span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 1200px; width: 100%; grid-column: 1 / 6; margin-bottom: 16px;">
    <span class="gatsby-resp-image-background-image" style="padding-bottom: 51.1667%; position: relative; bottom: 0px; left: 0px; background-image: url(example;); background-size: cover; display: block; opacity: 0;"></span>
    <picture>
      <source>...</source>
    </picture>
</span>

Post V2 it is now wrapped in an extra div:

<div>
    <span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 1200px; width: 100%; grid-column: 1 / 6; margin-bottom: 16px;">
        <span class="gatsby-resp-image-background-image" style="padding-bottom: 51.1667%; position: relative; bottom: 0px; left: 0px; background-image: url(example;); background-size: cover; display: block; transition: opacity 0.5s ease 0.5s; opacity: 0;"></span>
        <picture>
            <source>...</source>
        </picture>
    </span>
</div>

The remark to mdx HTML plugin seems to now add a wrapping <div> to raw/HTML nodes which breaks styling in my case (I have full-bleed images that are part of a CSS grid, and nesting them under a div constrains them).

Please note that does not appear to be solvable with the 'unwrap-images-plugin' or similar that are often mentioned since Gatsby adds this plugin after user plugins: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-mdx/src/plugin-options.ts#L118

I suppose it could be worked around by transforming the HTML with a rehype plugin, but it would nice if those extra divs weren't there in the first place.

Reproduction Link

https://github.com/MorrisonCole/image-wrapping-repro

Steps to Reproduce

Clone the repository
Run npm start
Open http://localhost:8000/
Inspect the cat and see that it has a surprise <div> wrapper!

Expected Result

Cat image doesn't have an extra <div> wrapper.

Actual Result

Cat image has a wrapper.

Environment

System:
    OS: macOS 12.6
    CPU: (10) arm64 Apple M1 Max
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.12.1 - /opt/homebrew/opt/node@18/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.19.2 - /opt/homebrew/opt/node@18/bin/npm
  Browsers:
    Chrome: 107.0.5304.110
    Safari: 16.0
  npmPackages:
    gatsby: ^5.0.0 => 5.0.0
    gatsby-plugin-image: ^3.0.0 => 3.0.0
    gatsby-plugin-manifest: ^5.0.0 => 5.0.0
    gatsby-plugin-mdx: ^5.0.0 => 5.0.0
    gatsby-plugin-sharp: ^5.0.0 => 5.0.0
    gatsby-remark-images: ^7.0.0 => 7.0.0
    gatsby-source-filesystem: ^5.0.0 => 5.0.0
    gatsby-transformer-sharp: ^5.0.0 => 5.0.0

Config Flags

No response

LekoArts commented 2 years ago

Hi!

This is expected behavior and not considered a bug. You can use https://developer.mozilla.org/en-US/docs/Web/CSS/:has if you need to style the wrapper.