npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vite-plugin-purgecss

v0.2.12

Published

PurgeCSS plugin for Vite

Downloads

8,695

Readme

Fork of vite-plugin-html-purgecss

vite-plugin-purgecss

This Vite plugin automatically removes unused CSS based on HTML & JS output using PurgeCSS.

  • Lightweight install and runtime environment

Install

npm

npm i vite-plugin-purgecss

Usage

Configuration

Use plugin in your Vite config (vite.config.ts)

import htmlPurge from 'vite-plugin-purgecss'

export default {
    plugins: [
        htmlPurge({ ...options }),
    ]
}

Usage with Javascript and non-HTML frameworks

When using frameworks that don't export to HTML (or settings styles via JS), PurgeCSS typically doesn't find anything. To fix this, I've hardcoded the plugin to feed JS code into PurgeCSS (instead of just HTML) to scan for any inlined CSS strings.

This isn't a perfect solution, as it doesn't catch explicit style changes (x.style.color = 'red';). This could potentially be resolved with FullHuman/purgecss-from-js, but it uses CJS which is incompatible with Vite. A better solution might present itself later on.

That being said, this solution should work with most frameworks. It should even work better than a normal PurgeCSS CLI pass. I tested with SvelteKit with @sveltejs/adapter-cloudflare, and it worked flawlessly.

Options

Optionally supply a UserDefinedOptions as you would with PurgeCSS.

If some of your CSS classes aren't making it to the final output, try adding them to safelist in the options object.

An example of this would be Popovers in Bootstrap. Sometimes, the arrow on popovers won't be picked up by PurgeCSS, so I might set:

safelist: [ /popover/ ]

to manually whitelist all Popover related classes.