lilcss ⚗

Distill out css bloat by parsing static files for selectors

Example

Let's run lilcss via the command line, passing in our css file containing a bunch of unused styles, and all of our site templates. We'll pipe the results to a new file.

$ lilcss fat.css -f templates/*.js > lil.css

fat.css

.c1{width:8.333333333333332%}
.c2{width:16.666666666666664%}
.c3{width:25%}
.c4{width:33.33333333333333%}
.c5{width:41.66666666666667%}
.c6{width:50%}
.c7{width:58.333333333333336%}
.c8{width:66.66666666666666%}
.c9{width:75%}
.c10{width:83.33333333333334%}
.c11{width:91.66666666666666%}
.c12{width:100%}
.df{display:flex}
.db{display:block}
.dib{display:inline-block}
.di{display:inline}
.dt{display:table}
.dtc{display:table-cell}
.dtr{display:table-row}
.dn{display:none}

templates

module.exports = html`
  <div class="c2 ${show ? 'db' : 'dn'}"></div>
`

module.exports = html`
  <div class="c4 dib"></div>
  <div class="c8 dib"></div>
`

Our new file will now only contain the css we need:

.c2{width:16.666666666666664%}
.c4{width:33.33333333333333%}
.c8{width:66.66666666666666%}
.db{display:block}
.dib{display:inline-block}
.dn{display:none}

API

lilcss(css, src, options)

Returns the distilled css.

option	default	controls
ignore	[]	any selectors to ignore
attr	['class', 'sm', 'md', 'lg', 'xl']	attributes to parse from files

Notes

lilcss aims to solve similar problems as uncss and purifycss but is a much less general solution. To minimize complexity, it is assumed:

1. A single css file will be parsed
2. The css file must not be minified prior to being parsed
3. General selectors, such as body or input will always be preserved
4. Any attribute selector will be treated as ~=
5. Only class and attribute selectors are supported
6. Only HTML-like attributes will be parsed, things like classList.add() are not supported:

Input template to parse:

<div class="c1 dn" sm="c2">

Extracted selectors:

['.c1', '.dn', '[sm~="c2"]']

Anything which does not match these selectors will be removed from the css.

Why?

Removing unused css output is important but the existing tools don't work well for my needs. uncss requires code to be run in a headless browser but this assumes too much about how you are building your site. purifycss does a bit better in that it parses static files, but the results are generally unpredictable and attribute selectors are fully unsupported.

lilcss has specific requirements but this allows the code to stay small and concise. More functionality may be introduced as needed.

See Also

• gr8
• gr8-util
• quick-styles

Todo

• Tests
• Better regex (or perhaps ditch and ast this thing)