p tags get merged and className removed

We’re using mdx together with next.js’ static export. Everything works perfect, besides one problem.

Certain p tags get merged together when the javascript has been run on the static html. The problem is that their className gets lost. As we use styled-components (would be the same problem with styled-jsx), the styling is broken at that point. An example is this page: https://docs-beta.prisma.io/1.13/understand-prisma/prisma-basics-server-services-data-model-avrp/ At the very bottom, you’ll see a paragraph with bad line-height.

If you disable javascript in the browser (in chrome dev tools settings -> preferences -> Debugger -> Disable JavaScript), you can see, that it’s rendered correctly without javascript enabled, with an empty <p></p> tag before the p tag that will be broken.

I saw that mdx is using remark-squeeze-paragraphs which as far as I understand should fix exactly this problem. The actual remark-squeeze-paragraphs just removes not used p tags - so this should work.

Now the question is, where in the stack does this p tag merging happen and how can we fix it?

Thanks!

[johno]

I suspect that this is happening due to JS minification since we haven’t been able to reproduce. If you are able to create a repro without code minifying please open an issue and we can keep digging!

[shawnbot]

No test case yet, but I did confirm that disabling mangling in next.config.js fixes the problem for us:

module.exports = {
  webpack(config, {dev}) {
    // only disable mangling in production
    if (dev) {
      return config
    }
    for (const plugin of config.plugins) {
      // duck type: is this an UglifyJS plugin?
      if (plugin.options && plugin.options.uglifyOptions) {
        console.warn('*** disabling mangling in UglifyJS plugin ***')
        plugin.options.uglifyOptions.compress = {keep_fnames: true}
        plugin.options.uglifyOptions.mangle.keep_fnames = true
      }
    }
    return config
  }
}

I’ve attempted to trace the source of whatever is calling our mangled function name in our production bundles, but I haven’t figured it out yet. I’m 80% sure that the mangled icon function p() declaration is bleeding into MDX’s scope somehow, and whatever is rendering paragraphs is calling that function instead.