PurgeCSS Removing MDX Styles in Nextjs Despite Being Included in Purge Content Option

[pdevito3]

Hey all, so I have a Nextjs project that has some mdx pages for the docs section of the site. Everything is running fine locally, but when I deployed to vercel yesterday I noticed that my mdx pages were getting purged. I double checked that the content config included mdx files, but it's still wiping those styles.

I was able to confirm that it was a purge issue by setting enabled: true in my purge setting, but I'm not sure how to resolve it.

I even tried explicitly calling out the docs path in my purge settings. What am I missing?

  purge: {
    content:[
      './src/**/*.{js,jsx,mdx}',
      './src/pages/docs/*.mdx',
    ]
  },

[pdevito3]

So in my myriad of code iterations, I gave this a go and it works... not sure why, but I'll take it. weird.

If anyone else is using this in the future, obviously make sure you take out the enabled: true, as that was just for testing

  purge: {
    enabled: true,
    content:[
      './src/**/*.js',
      './*/*.{js,mdx}',
    ]
  },

[simonswiss]

I have unmarked this solution as the correct answer (it worked, but it wasn't the solution).

If you read the new "marked answer", you'll probably understand why this solution you landed on was also working 👍

[pdevito3]

@simonswiss any thoughts on why this is in case anyone else comes across this? Would be nice to know, but as long as it works, I guess I'm happy 😆

[simonswiss]

Hey!

Would it be possible to have a look at that repo? What version of Tailwind are you on? What does your Tailwind config look like?

[pdevito3]

Yup! TW 2.0. pulled several chunks of it from y'all website actually, so some it it might look familiar :-)

https://github.com/pdevito3/wrapt.dev

[simonswiss]

Hola!

I had a look at your repo shared above, and I figured out what's happening.

The prose class name, which is responsible for applying all the styles from the Typography plugin, is nowhere to be found on any of the files within ./src/**/*.*

That class is actually only present in plain text (what Purge CSS cares about) in the withProse file within the remark folder.

For that reason, purge strips out the prose class and kills all the Typography styles you rely on for the docs pages!

Your solution is to add the path to that withProse file in your purge.content array, or add prose as a purge.options.safelist value:

purge: {
  content: [
    "./src/**/*.{js,mdx}", 
+    "./remark/withProse.js"
  ],
},

or

purge: {
  content: ["./src/**/*.{js,mdx}"],
+  options: {
+    safelist: ["prose"],
+  },
},

Hope it helps you understand what was happening! 🎉

[pdevito3]

Damn that makes complete sense 🤦🏻‍♂️ Good find. Preciate ya!