Sage 10: PureCSS removes a lot of necessary code

sage
,
1

Had an issue with my production site missing a lot of menu stylings and custom code for lazy loading plugins (like b-Lazy to name one) as well as other unfortunately named components with matching classes. Really took me for a spin until I was able to figure out that the webpack.mix.jsfile had a laravel-mix-purgecss package for Wordpress that was removing some chunks of the stylesheets that it deemed to be unnecessary.

Posting this in here in case someone else runs into the same issue with some styles ghosting on production. Don’t think this is safe and ready to roll out until better whitelist patterns are implemented by default.

Obviously just comment this portion out of the webpack.mix.js file to remove this:

// .purgeCss({
//   whitelist: require('purgecss-with-wordpress').whitelist,
//   whitelistPatterns: require('purgecss-with-wordpress').whitelistPatterns,
// })

Hope this may save you some time troubleshooting!

2

Are you using

/* purgecss start ignore */
   ...required css...
/* purgecss end ignore */

around required css?

3

I think that would definitely be a solution, but I don’t see that anywhere in the theme’s styles or documentation? Let me know if I am missing something here and thank you.