Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/adriangonz97/vite-plugin-svelte-purgecss
https://github.com/adriangonz97/vite-plugin-svelte-purgecss
Last synced: 21 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/adriangonz97/vite-plugin-svelte-purgecss
- Owner: AdrianGonz97
- License: mit
- Created: 2023-01-07T18:50:45.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-07-28T16:02:53.000Z (over 1 year ago)
- Last Synced: 2024-10-15T17:03:45.777Z (21 days ago)
- Language: TypeScript
- Size: 236 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Notice!
This package has been moved to [vite-plugin-tailwind-purge](https://github.com/AdrianGonz97/vite-plugin-tailwind-purge) as the internals have been refactored to be more generalized. Worry not though, Svelte will still be properly supported!
---
# vite-plugin-svelte-purgecss
[](https://www.npmjs.com/package/vite-plugin-svelte-purgecss)
[](https://github.com/AdrianGonz97/vite-plugin-svelte-purgecss/blob/main/LICENSE)
A simple vite plugin that **thoroughly** purges excess CSS from [Svelte](https://svelte.dev/) projects using [PurgeCSS](https://purgecss.com/). This package should be used in combination with [Tailwind](https://tailwindcss.com/) and a Tailwind specific UI library such as [Skeleton](https://skeleton.dev).
## Motivation
PurgeCSS is an excellent package that removes unused CSS. Their provided plugins for extraction do a decent enough job for simple projects. However, plugins such as [postcss-purgecss](https://github.com/FullHuman/purgecss/tree/main/packages/postcss-purgecss) and [rollup-plugin-purgecss](https://github.com/FullHuman/purgecss/tree/main/packages/rollup-plugin-purgecss) take a rather naive approach to selector extraction. They only analyze the content that is passed to them through their `content` fields, which means that if you pass a UI library to it, none of the selectors that are **unused** in your project (such as components that aren't imported) will be properly purged. Leaving you with a larger than necessary CSS bundle.
Ideally, we'd like to keep the selectors that are only used in your project. We accomplish by analyzing the emitted JS chunks that are generated by Rollup, and extracting out any of their possible selectors. From there, we can pass along the selectors to PurgeCSS for final processing.
## ⚠ Caveats ⚠
This package is still very **experimental**. Breaking changes can occur at any time. We'll stabilize once we hit a `1.0.0` release.
## Usage
### Installation
```bash
npm i -D vite-plugin-svelte-purgecss
```
### Add to Vite
```ts
// vite.config.ts
import { purgeCss } from 'vite-plugin-svelte-purgecss';
const config: UserConfig = {
plugins: [sveltekit(), purgeCss()],
};
```
### Safelisting
If selectors that shouldn't be purged are being removed, simply add them to the `safelist`.
```ts
// vite.config.ts
import { purgeCss } from 'vite-plugin-svelte-purgecss';
const config: UserConfig = {
plugins: [
sveltekit(),
purgeCss({
safelist: {
// any selectors that begin with "hljs-" will not be purged
greedy: [/^hljs-/],
},
}),
],
};
```
Alternatively, if you'd like to safelist selectors directly in your stylesheets, you can do so by adding special comments:
```css
/*! purgecss start ignore */
h1 {
color: red;
}
h2 {
color: blue;
}
/*! purgecss end ignore */
```
You can also safelist selectors directly in the declaration block as well:
```css
h3 {
/*! purgecss ignore current */
color: pink;
}
```
For further configuration, you can learn more [here](https://purgecss.com/configuration.html).