search

okkur / syna

Highly customizable open source theme for Hugo based static websites
https://syna.okkur.org/demo/
Apache License 2.0
250 stars 134 forks source link

Purge unused CSS via postCSS #746

Closed stp-ip closed 4 years ago

stp-ip commented 4 years ago

Is this a BUG REPORT or FEATURE REQUEST?: feature

What happened: Currently the full CSS file is delivered even unused parts.

What you expected to happen: Purge unused CSS parts to reduce delivery size.

Anything else we need to know?: Might be possible via https://gohugo.io/hugo-pipes/postprocess/#css-purging-with-postcss

mpourismaiel commented 4 years ago

This works quite easily but it requires installation of npm packages on user websites. We can add it to our exampleSite and use it in our demos, it'll reduce the css size by around 80% (~58KB -> ~11KB). I'll create a PR adding the feature and we can add an explanation on how to do so in a new section in Documentation when we address #761. What do you think?

stp-ip commented 4 years ago

So it would be a configuration feature, if we wanna call it that. Basically the feature is already available besides the resources.Postcss call within Hugo.

So Syna change would be adding the resources.PostCSS hook and then add docs on how to configure it on Hugo's site.

As this needs a js prerequisite I feel like that makes sense. On that note. Should we add in more hooks that could be used by our users or is PostCSS the main one?

Should we document more or add a documentation section on hooks? Aka there are various hooks one can use such as PostCSS hook to purge css or do RTL etc.?

Basically having the feature/config documented, but also a general hooks section linking back to the various features it enables on Syna side? Does that sound reasonable? Also probably agree to push this for after #761.

stp-ip commented 4 years ago

Also damn that change is nice. This paired with fontawesome size decreases with selective fonts would do great for performance. Desktop subsetter is still not available for Linux so. :roll_eyes:

Once we have this I'm happy to push this to the various netlify configs so we optimize the speed.