Excessive CSS Bundle Size

— Shubham Gulati

I love the idea behind RadixUI Themes.

However, it does add a lot of unused css to the bundle. I am trying to figure out the best way to axe as much unused css from the bundle as possible but I have not been able to find an elegant way to do it so far.

The only way I could reduce some of it was by cloning @radix-ui/themes package into my monorepo and manually removing the unused css imports from it’s css export.

Doing this cut down the overall css bundle by half. And Pagespeed also stopped complaining about unused css.

I know, I know. I am not trying to justify my approach with the results. It is bad in so many ways. Adds a bunch of maintenance debt which will eventually be the reason I stop using the dependency in my next annual website design refresh. But, I don’t like to obsess too much on just reaching the end goal.

<Text as="p" size="4" mt="6" mb="6">
  <Quote>The process of how you reach there is just as important.</Quote>
</Text>

So, I am still exploring ways to get this done more elegantly without having to clone a bunch of code within my monorepo.

Update — three days later.

  • Removed the cloned package.
  • Applied my changes to the dependency using pnpm patch.

Since the changes I needed in the css were inside src directory, I couldn’t directly patch target css files. The exported css in dependency is compiled on build step. So, I had to build the package with my changes applied, and copy the output css from dist directory and apply the patch using pnpm patch.

Still not ideal, but something that works and is better than not having it.