Purge CSS Docusaurus Plugin

[shadowtime2000]

📚 Documentation

The Docusaurus classic preset ships the entire Infima CSS framework with the site which results in a lot of unused CSS. An official Docusaurus plugin to remove unused CSS would be great, and it would be nice if it was added to the classic preset.

Have you read the Contributing Guidelines on issues?

Yes

[slorber]

Hi,

That seems like a good idea.
We'll also likely need this if we want to provide a Tailwind theme: #2961

[shadowtime2000]

We could also just do a PostCSS plugin and then users could use the PurgeCSS plugin inside of it.

[slorber]

make sense, would you be interested to contribute such plugin?
I think we can make it a core plugin

[shadowtime2000]

make sense, would you be interested to contribute such plugin?
I think we can make it a core plugin

I would be interested in contributing this plugin. Looking through the documentation and the core package I think I would need to use the configureWebpack function to accomplish this.

[slorber]

thanks

configureWebpack is a good way, let me know if this does not work out

[slorber]

@lex111 can we consider this done with the cssnano preset etc?

[shadowtime2000]

Another way to handle this would be to allow complete customization with a postcss.config.js if it detected, and if not use whatever is currently being used with the postcss-loader. Kind of like how NextJS does it.

[Josh-Cena]

Should be solved with cssnano minimizer already

[lex111]

CSS minifier only mitigates this issue (by reducing CSS bundle size), but not solves it in any way. We still have unused CSS a lot that can be removed via PurgeCSS.

[Josh-Cena]

CSS minifier only mitigates this issue (by reducing CSS bundle size), but not solves it in any way. We still have unused CSS a lot that can be removed via PurgeCSS.

Should this be in the core? Would that be competing w/ cssnano? (I remember having problems with multiple minimizers a while ago)

[lex111]

It's hard to say, PurgeCSS could have many non-obvious consequences, so it might be worth implementing it as plugin. However, there should not be conflicts with the current minifiers (we have two CSS minimizers), since it is different kinds of tools.

[Josh-Cena]

Afaik PurgeCSS has a different mechanism from typical minimizers, so it may be useful to add. Let's reopen 👍

[aersosi]

It would be nice if infima was mandatory.

You could make the theming modular, install infima by default but detach infima with a flag e.g. npx create-docusaurus@latest website classic --no-infima.

[slorber]

@aersosi that doesn't really seem related to the current issue.

It would be nice if infima was mandatory.

You probably mean optional?

The classic theme IS based on Infima, so we don't plan to allow a non-classic Infima theme

Now we plan to provide at least 2 themes (most likely Infima + Tailwind) with the same UX, but those would have a different name so there wouldn't be such an option anyway.

[aersosi]

@slorber
Thank you for your time and reply.

Yes, I mean optional. Sorry, my mistake. I wasn't aware that a tailwind base theme was in the works when I wrote that, but found out shortly after. I'm looking forward to the tailwind theme, hoping to have more options to configure the styles without overriding them, and to have a smaller footprint.