Package: cssclean
CSS Clean!This is a library for cleaning up css based on styles that are actually used in html files.
Although there arelibraries that use npmI am not a fan so I wanted something in Python.ApproachWe take a conservative approach to filtering, meaning:for any style block, one matching class or identifier is sufficient for inclusionmultiple levels selectors are not combined (e.g., using "button" is sufficient to add.button. red.we always keep keyframes and imports. Additional parsing could be added to support checking, but they are fairly rare (imho).The library isnewand I may have missed a case! Pleaseopen an issueif you find something.Of course this could be improved upon but we would need more careful token parsing!
Pleaseopen an issueif you are interested.UsageInstallFirst, clone and install.$gitclonehttps://github.com/vsoch/cssclean
$cdcssclean
$pipinstall-e.or install from pip.$pipinstallcsscleanAnd then try running an example!Clean DirectoryBelow we ask cssclean to automatically detect files (css and html) under the same test directory:$csscleanclean--csscssclean/tests/testdata/1--htmlcssclean/tests/testdata/1
Sheetstyle.csshas124rules.
Sheetstyle.cssfiltereddownto43rules.1fileswritten:style.css=>/home/vanessa/Desktop/Code/unused-css/cssclean/tests/testdata/1/style.clean.cssAs 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--cssand--html.$csscleanclean--csscssclean/tests/testdata/1--htmlcssclean/tests/testdata/1/home.html--htmlcssclean/tests/testdata/1/table.htmlDry RunYou can also do a dry run to print the filtered style to the screen:$csscleanclean--csscssclean/tests/testdata/1--htmlcssclean/tests/testdata/1--dry-run
...
.card.yellow{background-color:var(--color-yellow);}tr{background-color:white;}SCSSWe have support for cleaning of scss files, meaning that you will generate a final cleaned
css file from a potential directory of inputs. As an example, we can use the hierarchy under
test data, where the main style file isstyle.scssthat includes all the others:$csscleanclean--csscssclean/tests/testdata/3/style.scss--htmlcssclean/tests/testdata/3/index.htmlSheetstyle.csshas638rules.
Sheetstyle.cssfiltereddownto298rules.1fileswritten:style.css=>cssclean/tests/testdata/3/style.clean.cssAll imports are required to exist since we are actually rendering the sass into css
in the library.MinifyAnd you can ask for the same preview, but minified:$csscleanclean--csscssclean/tests/testdata/1--htmlcssclean/tests/testdata/1--dry-run--minifyOr a non-preview minified:$csscleanclean--csscssclean/tests/testdata/1--htmlcssclean/tests/testdata/1--outdir./out--minifySheetstyle.csshas124rules.
Sheetstyle.cssfiltereddownto43rules.1fileswritten:style.css=>./out/style.clean.min.cssNote that "min" is added to the saved filename, and also note that this is experimental - I'll need to do
some more tests and reading to figure out what exactly the process is.Output DirectoryYou can also ask for a custom output directory:$mkdirout
$csscleanclean--csscssclean/tests/testdata/1--htmlcssclean/tests/testdata/1--outdir./outSheetstyle.csshas124rules.
Sheetstyle.cssfiltereddownto43rules.1fileswritten:style.css=>./out/style.clean.cssExampleAs an example, I tested against the usrse site. We can render the site into_site:$bundleexecjekyllbuildand then run the clean in place. Here is the original style file:$ls-lstyle.css-rw-rw-r--1dinosaurdinosaur263390Jun420:57style.cssWe can then run the clean in place:$csscleanclean--cssassets/css/style.css--html_site/--in-place
Sheetstyle.csshas4080rules.
Sheetstyle.cssfiltereddownto1380rules.1fileswritten:style.css=>assets/css/style.cssAnd what is the new size?$ls-lstyle.css-rw-rw-r--1dinosaurdinosaur201347Jun515:11style.cssSo there is a huge reduction in size when we first remove unused stuff (-62043 bytes)!
To summarize:original: ~263KBcleaned: ~201KBAnd importantly, the site looks the same!So personally, I don't have issue with the size differences between minified and cleaned - my preference is not to
minify so I can easily read it, but I can also imagine a workflow where you minify just for the production
site and the development version is just cleaned. It's really up to you!GitHub ActionYou can use this tool as a GitHub action! Here's how.-name:Test CSS Cleanuses:vsoch/cssclean/action/clean@mainwith:css:cssclean/tests/testdata/1/style.csshtml:cssclean/tests/testdata/1/table.html cssclean/tests/testdata/1/home.htmlin_place:trueSee theactionfolder, action.yml file for more parameters and descriptions.ContributorsWe use theall-contributorstool to generate a contributors graphic below.Vanessasaurus💻Thanks!This library wouldn't be possible without these fantastic other libraries!libsass-pythontinycss2BeautifulSoup4TODOadd tests for different casescreate GitHub action to detect (fail if unused)automated releasesome kind of summary command that shows used/unused styles, or the countcan we use asp to determine used rules?LicenseThis code is licensed under the MPL 2.0LICENSE.