Extract CSS from the page into a separate bundle

[jvenki]

How do I make REMIX+VITE to emit CSS as a separate bundle and not inline it in the HTML when the underlying page components uses some CSS-IN-JS solution?

I am using MUI which internally uses Emotion (CSS-IN-JS as its styling engine). Everything works fine including the final rendering. However, the HTML has a huge blob of CSS inlined in the HEAD of the HTML. This CSS is not going to change and therefore I dont want to bloat the HTML for every request from the customer.

How can I make REMIX+VITE to make this CSS not to be inlined in the HEAD. Rather emit it as a separate bundle and linked through LINK tag.

I already tried the below suggestions from community but doesnt work for me

1. https://mui.com/material-ui/guides/server-rendering/ by using emotion cache
2. Tried to use https://www.npmjs.com/package/@mojojoejo/vite-plugin-purgecss as explained in https://www.sitepoint.com/webpack-vite-migration/#step4plugins
3. Followed the suggested vite configuration from https://stackoverflow.com/questions/74328212/how-to-extract-css-as-a-separate-css-file-in-vite