CSS Clean!

This is a library for cleaning up css based on styles that are actually used in html files. Although there are libraries that use npm I am not a fan so I wanted something in Python.

Approach

We take a conservative approach to filtering, meaning:

• for any style block, one matching class or identifier is sufficient for inclusion
• multiple levels selectors are not combined (e.g., using "button" is sufficient to add .button. red.

Of course this could be improved upon but we would need more careful token parsing! Please open an issue if you are interested.

Usage

Install

First, clone and install.

$ git clone https://github.com/vsoch/cssclean
$ cd cssclean
$ pip install -e .

or install from pip.

$ pip install cssclean

And then try running an example!

Clean Directory

Below we ask cssclean to automatically detect files (css and html) under the same test directory:

$ cssclean clean --css cssclean/tests/testdata/1 --html cssclean/tests/testdata/1
Sheet style.css has 124 rules.
Sheet style.css filtered down to 43 rules.
1 files written:
  style.css => /home/vanessa/Desktop/Code/unused-css/cssclean/tests/testdata/1/style.clean.css

As you can see, by default, it will write the updated css files alongside the old files but with .clean added. Note that you can provide individual files, one at a time too, for both of --css and --html.

$ cssclean clean --css cssclean/tests/testdata/1 --html cssclean/tests/testdata/1/home.html --html cssclean/tests/testdata/1/table.html

Dry Run

You can also do a dry run to print the filtered style to the screen:

$ cssclean clean --css cssclean/tests/testdata/1 --html cssclean/tests/testdata/1 --dry-run
...
.card.yellow {
  background-color: var(--color-yellow);
}
tr {
  background-color: white;
}

Minify

And you can ask for the same preview, but minified:

$ cssclean clean --css cssclean/tests/testdata/1 --html cssclean/tests/testdata/1 --dry-run --minify

Or a non-preview minified:

$ cssclean clean --css cssclean/tests/testdata/1 --html cssclean/tests/testdata/1 --outdir ./out --minify

Sheet style.css has 124 rules.
Sheet style.css filtered down to 43 rules.
1 files written:
  style.css => ./out/style.clean.min.css

Note that "min" is added to the saved filename.

Output Directory

You can also ask for a custom output directory:

$ mkdir out
$ cssclean clean --css cssclean/tests/testdata/1 --html cssclean/tests/testdata/1 --outdir ./out

Sheet style.css has 124 rules.
Sheet style.css filtered down to 43 rules.
1 files written:
  style.css => ./out/style.clean.css

Contributors

We use the all-contributors tool to generate a contributors graphic below.

Vanessasaurus 💻

TODO

• add tests for different cases
• create GitHub actions - one to actually clean and one to detect (fail if unused)
• automated release
• some kind of summary command that shows used/unused styles, or the count
• contributors workflow

License

This code is licensed under the MPL 2.0 LICENSE.