search

facebook / docusaurus

Easy to maintain open source documentation websites.
https://docusaurus.io
MIT License
55.28k stars 8.29k forks source link

Purge CSS Docusaurus Plugin #3655

Open shadowtime2000 opened 3 years ago

shadowtime2000 commented 3 years ago

📚 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 commented 3 years ago

Hi,

That seems like a good idea. We'll also likely need this if we want to provide a Tailwind theme: https://github.com/facebook/docusaurus/issues/2961

shadowtime2000 commented 3 years ago

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

slorber commented 3 years ago

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

shadowtime2000 commented 3 years ago

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 commented 3 years ago

thanks

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

slorber commented 3 years ago

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

shadowtime2000 commented 3 years ago

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 commented 2 years ago

Should be solved with cssnano minimizer already

lex111 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

aersosi commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

@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.