refactor: Purge plugin overhaul

[AdrianGonz97]

Plugin Overhaul - v0.3.0

This PR introduces a new purging strategy that's more focused, and less prone to errors.

The old...

Prior to version 0.3.0, we would analyze the module graph and extract out any possible selectors. We would then indiscriminately pass these selectors off to PurgeCSS for final processing. This worked in most cases, but it often became a source of confusion and bugs when selectors were being unintentionally purged. To curb these issues, escape hatches, such as safelisting, were required.

What's new?

Today, we'll only be purging excess tailwindcss classes, leaving everything else untouched. Safelisting, and most other PurgeCSS options, will no longer be necessary. This new approach is far more accurate and efficient, leading to even smaller bundle sizes.

Note

In some cases, bundle sizes may be larger in projects that are importing CSS from other sources, such as a CSS based icon library, such as Font Awesome. For these cases, we recommend implementing your own purging strategy (or use component based icon library, such as Lucide, instead of CSS).

Additions

• We've also added a before and after stats for the CSS bundle size:

• For backwards compatibility, 0.3.0 also introduces a legacy mode, which brings back the old plugin behavior.

Breaking Changes

• The new default purging strategy (which now only purges tailwindcss classes)
• tailwindcss has been added as a peer-dependency. v3.3.0 or higher is now required.
• The plugin's config option types have been updated. In 99% of cases, you should be able to just delete it entirely

Migration

1. Update to the latest version with npm (or your preferred package manager):

npm add -D vite-plugin-tailwind-purgecss@latest

2. If you're not on TailwindCSS v3.3.0 or greater, it must be updated as well:

npm add -D tailwindcss@latest

3. Remove the plugin config:

// vite.config.ts
import { purgeCss } from 'vite-plugin-tailwind-purgecss';

const config: UserConfig = {
-  plugins: [ purgeCss({ safelist: { greedy: [...] }}) ],
+  plugins: [ purgeCss() ],
};

And you're all set!

Keeping the old behavior (not recommended)

If you wish to keep the old behavior, see legacy mode.

---

TODOs

• Update docs describing the new purge strategy
• Add bundle size logs
• Add legacy mode
• Implement new purging strategy

closes #14
closes #17
closes #24

[changeset-bot]

🦋 Changeset detected

Latest commit: e36ecaf

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
vite-plugin-tailwind-purgecss	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR