Sage 11 + purgecss

sage
,
1

Hi

With Sage 10 I used @roots/bud-postcss and @roots/bud-purgecss to minify the theme and bootstrap scss output.

How could I optimise the generated .css file (currently about 600kb ) with Sage 11?

Thank you for any hints!

2

The Vite ecosystem is pretty huge. I’d Google “Vite PurgeCSS” and check out the multiple different packages/guides floating around.

3

Thank you!

In the end it is quite easy :smile:

If this is helpful for somebody:

I’m using this one now: vite-plugin-purgecss - npm

1: Install

npm i vite-plugin-purgecss

2: Import it in vite.config.js:

import htmlPurge from 'vite-plugin-purgecss'

3: and add it under plugins like this:

htmlPurge({ 
      content: ['resources/views/**'],
      safelist: [ 
        /popover/,
        'is-changing', 
        'is-animating', 
      ],
     }),

don’t forget to add all dynamically added classes in the safelist.

3 Likes
4

I decided to try this on a client’s site and I’ve made one revelation about it:

It doesn’t seem to detect the Tailwind breakpoints, meaning “md:px-2” is ignored. Quite annoying. I also noticed several other classes being ignored. It turns out that classes in Tailwind with a : or [ basically come out like this:

“.md\:block”

“.bg-\[\#EFEBE7\]”

The solution? Add wildcards to the safelist:

htmlPurge({
content: [“resources/views/**”],
safelist: [
/popover/,
“is-changing”,
“is-animating”,
/.:./,
/.../,
/.$.$.*/,
],
}),

If anyone knows a better way, feel free speaking up!