Add purgecss ignore to hooper.css

[marcfilleul]

Hi,

I've struggled for days with carousel solutions and Nuxt SSR.
When trying harder to make Hooper work, I've finally found what was the issue in my case but it could be the case for others so I'm here to share.

I'm using PurgeCSS to lighten my final CSS bundle size in production and it was removing all the hooper CSS except the first hooper class.

I've pasted hooper.css in an external file and have added PurgeCSS ignore to it.
With this simple addition, everything works fine.

I think it won't be a problem to have it even for those who don't use PurgeCSS, so adding it directly to the hooper.css file could make sense.

https://github.com/FullHuman/purgecss-docs/blob/master/whitelisting.md#in-the-css-directly

So, here is the simple trick, you just have to wrap the css content between 2 comments:

/* purgecss start ignore */

hooper.css content

/* purgecss end ignore */

And then it works in production ;)

[logaretm]

I could argue you could whitelist it like you would with any other library and since hooper does indeed use all the CSS it imports it wouldn't be an issue for your bundle size. Normally you do whitelist all 3rd party libs when using purgeCSS since it can't tell what selectors to leave out.

I don't think we are adding this on our end since it could break down easily with other CSS-stripping tools. I think a simple note in the documentation would be suitable for everyone.

[jake-101]

thanks for this, you saved me a lot of time!

[marcfilleul]

Great ! That was the initial goal 😉