https://github.com/jongacnik/lilcss
⚗ distill out css bloat
https://github.com/jongacnik/lilcss
clean css
Last synced: about 1 year ago
JSON representation
⚗ distill out css bloat
- Host: GitHub
- URL: https://github.com/jongacnik/lilcss
- Owner: jongacnik
- Created: 2017-02-06T02:24:27.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-09-18T04:42:07.000Z (over 8 years ago)
- Last Synced: 2025-02-28T09:21:02.620Z (over 1 year ago)
- Topics: clean, css
- Language: JavaScript
- Size: 4.88 KB
- Stars: 18
- Watchers: 1
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
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
```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
```js
module.exports = html`
`
```
```js
module.exports = html`
`
```
Our new file will now only contain the css we need:
```css
.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](https://github.com/giakki/uncss) and [purifycss](https://github.com/purifycss/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:
```html
```
Extracted selectors:
```js
['.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](https://github.com/giakki/uncss) requires code to be run in a headless browser but this assumes too much about *how* you are building your site. [purifycss](https://github.com/purifycss/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](https://github.com/jongacnik/gr8)
- [gr8-util](https://github.com/jongacnik/gr8-util)
- [quick-styles](https://github.com/jongacnik/quick-styles)
## Todo
- [ ] Tests
- [ ] Better regex (or perhaps ditch and ast this thing)