code-for-chapel-hill / NC-COVID-Support

Community support site, supporting COVID-19 business opening hours, Food Banks, School Meals, Farms and Social Services.
https://nccovidsupport.org
GNU General Public License v3.0
16 stars 39 forks source link

Issues with PurgeCSS being over zealous in it's purging :) #246

Open readingdancer opened 4 years ago

readingdancer commented 4 years ago

Describe the bug

I have added a package called PurgeCSS to the build process to reduce the amount of unused CSS so that it improves the page load and the Google speed score.

However, currently it is purging some CSS that it shouldn't be, so I think we probably just need to whitelist some dynamic class names, the white list can be found in the vue.config.js file.

Full details about PurgeCSS can be found on it's website here:

https://purgecss.com/guides/vue.html#use-the-vue-cli-plugin

The branch where I have made these changes is here:

https://github.com/code-for-chapel-hill/NC-COVID-Support/tree/adding-purgecss

To Reproduce Steps to reproduce the behavior:

Checkout the above branch and run it locally ( I assume you already have the solution working and know how to run it, if not, check out our main help pages )

Expected behavior

The site looks identical to the current live site, same spacing / fonts / colors etc.

Screenshots

Annotation 2020-06-29 112759

eparadise commented 4 years ago

I'll try this!

readingdancer commented 4 years ago

@joonyoungleeduke - If you fancy doing some investigation into this issue, it would be great to have this one fixed.

aevix commented 4 years ago

I added some more items in whitelist and it seems to have fixed most of the issues but I can't seem to figure out why the fonts are different. Maybe its just not loading locally. image