Add html and body to PurgeCSS whitelist #2435

darrenjacoby · 2020-04-05T12:35:10Z

Purgecss removes styling for html and body which will have an impact of normalise/resets, add both to whitelist. FullHuman/purgecss-webpack-plugin#69

Purgecss removes styling for html and body which will have an impact of normalise/resets, add both to whitelist. FullHuman/purgecss-webpack-plugin#69)

knowler

Thanks @darrenjacoby. This is a good change. Can you please rebase this or resolve the merge conflicts?

MWDelaney · 2020-05-11T19:38:33Z

This is still removing some block styles for me. I'm not sure how to usefully show that.

oxyc · 2020-05-11T19:55:50Z

I think it's just that index.php isn't checked by purgecss. See list of defaults paths.

   .purgeCss({
     extend: {
       content: [path.join(__dirname, 'index.php')],
     },
   })

Log1x · 2020-05-16T23:23:43Z

I'm kind of torn on this whole situation right now.

The reason the styles aren't being purged is because I extracted a majority of app.blade.php back to index.php due to #2116

Generally, I am unhappy at the idea of not using Blade for everything. Moving everything to index.php effectively kills the efficiency of Blade features such as Stacks (assuming you want them in your <head>, etc.)

Personally, I go out of my way on my own projects to revert the change and put everything back into app.blade.php - but, I am not using any plugins affected by hooks firing out of order. The noteworthy plugin to really eat shit without this change is Gravity Forms.

While the approach used in Sage 9 isn't the prettiest – it is still an option to just do the same in Sage 10 (behind the scenes in Acorn).

The only thing I'm unsure of is if/is there is any noteworthy technical debt of the Sage 9 approach. Otherwise.... it works.

codewithfeeling · 2020-05-18T00:25:39Z

I just encountered this very issue. Lots of styles were missing when I ran the production build - it was not finding header styles etc. Easily fixed by extending the purgeCss as described by @oxyc but it might be good to extend out to include ^front-page.blade.php for custom homepages, and to make sure standard navigation area classes are captured - I couldn't see any partials in the whitelistPatterns array.

Log1x · 2020-05-18T00:35:23Z

but it might be good to extend out to include ^front-page.blade.php for custom homepages, and to make sure standard navigation area classes are captured - I couldn't see any partials in the whitelistPatterns array.

All of resources/ is already covered by https://github.com/spatie/postcss-purgecss-laravel/blob/master/src/defaultConfig.js – only index.php should have this issue due to it being in the theme root.

codewithfeeling · 2020-05-18T00:47:14Z

All of resources/ is already covered by https://github.com/spatie/postcss-purgecss-laravel/blob/master/src/defaultConfig.js – only index.php should have this issue due to it being in the theme root.

@Log1x Thanks for the pointer. I'm not 100% sure I understand what you mean - ie. if this is already supposed to be present in Sage 10. The Sage 10 webpack.mix.js doesn't include that, only purgecss-with-wordpress, which doesn't include any of these patterns. Not sure how to edit that file to include them.

Log1x · 2020-05-18T00:48:45Z

The rules are bundled into mix.purgeCss() it's self so they are added no matter what. purgecss-with-wordpress is just appended to them.

https://github.com/spatie/laravel-mix-purgecss

codewithfeeling · 2020-05-18T00:51:14Z

OK thanks. I just can't get it to work well - loads of styles missing even after adding the index.php rule.

Log1x · 2020-05-18T01:06:29Z

You might have to make a few whitelist rules depending on your application and where styles are rendered (e.g. plugin styles would need their own pattern whitelisted, etc.)

There is the option of whitelisting in the CSS directly https://purgecss.com/whitelisting.html#in-the-css-directly

Otherwise, as far as front-page.blade.php and other partials not working – I am slightly confused on why it wouldn't be working for you out of the box.

codewithfeeling · 2020-05-18T01:08:30Z

Thanks again for the pointers - I will dig into this tomorrow. Certain things just won’t work - for example a custom icon font. But I’m sure I’ll be able to figure it out thanks to your guide in the right direction.

codewithfeeling · 2020-05-18T09:48:29Z

@Log1x tl;dr There is no inherent issue with Sage 10 here, and the purgeCss rules are fine.

Thanks again for your pointers. I am using Roots Soil, which changes the name of all menu item classes to menu-*, and I'm using a custom icon font which take the form <span class="icon icon-instagram"> for example. Adding this to webpack.mix.js resolved those problems and the page renders as expected:

.purgeCss({
    extend: {
      content: [path.join(__dirname, 'index.php')],
      whitelistPatterns: [/^menu(-.*)?$/, /^icon(-.*)?$/],
    },
   });

I do think that the unexpected nature of styles missing for the first time on build:production will cause many users to (a) think the theme isn't working and (b) get frustrated by a sudden bottleneck in the development process as they have to figure out what has gone wrong, then learn how to configure purgeCss / write patterns needed to make their styles render. Just an opinion based on this experience.

That said, it works incredibly well and I love it. My CSS file is 10k despite a full import of Bootstrap in the SCSS (I used to have to break out the @import rules to just bring in what I need but even then there was awful bloat).

Log1x · 2020-05-18T09:52:49Z

Glad you got it working!

I do think that the unexpected nature of styles missing for the first time on build:production, followed by the learning curve of having to write patterns etc. for PurgeCSS will cause many users just to think the theme isn't working. Just an opinion based on this experience.

I agree. Once the documentation is written, I'm hoping we will be able to make any "gotchas" like that very clear from the beginning.

Log1x · 2020-05-18T10:04:55Z

Sorry for the bump – as far as the menu styles go, check out https://github.com/log1x/navi – it will save your sanity & solve the need to whitelist the menu rules by having the markup in a view.

Check my repos for a lot of other Sage 10 goodies.

codewithfeeling · 2020-05-18T10:29:09Z

Sorry for the bump

No need for apologise, always glad to get more info - I'll look at your repos for goodies.

PS: Do you never sleep? ;)

PPS: I'm actually sitting with my jaw on the floor - navi is a game-changer. Man, you guys are just killing it with this stuff. Brilliant.

Log1x · 2020-08-20T14:52:08Z

Added @oxyc's implementation in #2520

Update webpack.mix.js whitelist

d22c964

Purgecss removes styling for html and body which will have an impact of normalise/resets, add both to whitelist. FullHuman/purgecss-webpack-plugin#69)

retlehs changed the base branch from 10.0.0-dev to master May 10, 2020 22:25

knowler suggested changes May 11, 2020

View reviewed changes

knowler changed the title ~~Update webpack.mix.js whitelist~~ Add html and body to PurgeCSS whitelist May 11, 2020

Log1x closed this Aug 20, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add html and body to PurgeCSS whitelist #2435

Add html and body to PurgeCSS whitelist #2435

darrenjacoby commented Apr 5, 2020 •

edited

Loading

knowler left a comment

MWDelaney commented May 11, 2020

oxyc commented May 11, 2020

Log1x commented May 16, 2020 •

edited

Loading

codewithfeeling commented May 18, 2020

Log1x commented May 18, 2020 •

edited

Loading

codewithfeeling commented May 18, 2020

Log1x commented May 18, 2020 •

edited

Loading

codewithfeeling commented May 18, 2020 •

edited

Loading

Log1x commented May 18, 2020

codewithfeeling commented May 18, 2020

codewithfeeling commented May 18, 2020 •

edited

Loading

Log1x commented May 18, 2020 •

edited

Loading

Log1x commented May 18, 2020 •

edited

Loading

codewithfeeling commented May 18, 2020 •

edited

Loading

Log1x commented Aug 20, 2020

Add html and body to PurgeCSS whitelist #2435

Add html and body to PurgeCSS whitelist #2435

Conversation

darrenjacoby commented Apr 5, 2020 • edited Loading

knowler left a comment

Choose a reason for hiding this comment

MWDelaney commented May 11, 2020

oxyc commented May 11, 2020

Log1x commented May 16, 2020 • edited Loading

codewithfeeling commented May 18, 2020

Log1x commented May 18, 2020 • edited Loading

codewithfeeling commented May 18, 2020

Log1x commented May 18, 2020 • edited Loading

codewithfeeling commented May 18, 2020 • edited Loading

Log1x commented May 18, 2020

codewithfeeling commented May 18, 2020

codewithfeeling commented May 18, 2020 • edited Loading

Log1x commented May 18, 2020 • edited Loading

Log1x commented May 18, 2020 • edited Loading

codewithfeeling commented May 18, 2020 • edited Loading

Log1x commented Aug 20, 2020

darrenjacoby commented Apr 5, 2020 •

edited

Loading

Log1x commented May 16, 2020 •

edited

Loading

Log1x commented May 18, 2020 •

edited

Loading

Log1x commented May 18, 2020 •

edited

Loading

codewithfeeling commented May 18, 2020 •

edited

Loading

codewithfeeling commented May 18, 2020 •

edited

Loading

Log1x commented May 18, 2020 •

edited

Loading

Log1x commented May 18, 2020 •

edited

Loading

codewithfeeling commented May 18, 2020 •

edited

Loading