{"id":16124293,"url":"https://github.com/jongacnik/lilcss","last_synced_at":"2025-03-18T12:31:37.530Z","repository":{"id":68335748,"uuid":"81039625","full_name":"jongacnik/lilcss","owner":"jongacnik","description":"⚗ distill out css bloat","archived":false,"fork":false,"pushed_at":"2017-09-18T04:42:07.000Z","size":5,"stargazers_count":18,"open_issues_count":3,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-28T09:21:02.620Z","etag":null,"topics":["clean","css"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jongacnik.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-02-06T02:24:27.000Z","updated_at":"2023-11-19T14:42:38.000Z","dependencies_parsed_at":"2023-04-10T03:01:01.490Z","dependency_job_id":null,"html_url":"https://github.com/jongacnik/lilcss","commit_stats":{"total_commits":6,"total_committers":1,"mean_commits":6.0,"dds":0.0,"last_synced_commit":"be635d4b8f71e6f95bb0f4f6259b58eaf3fff204"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jongacnik%2Flilcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jongacnik%2Flilcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jongacnik%2Flilcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jongacnik%2Flilcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jongacnik","download_url":"https://codeload.github.com/jongacnik/lilcss/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243926063,"owners_count":20369911,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["clean","css"],"created_at":"2024-10-09T21:20:28.128Z","updated_at":"2025-03-18T12:31:37.522Z","avatar_url":"https://github.com/jongacnik.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003elilcss ⚗\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://nodejs.org/api/documentation.html#documentation_stability_index\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/stability-experimental-orange.svg?style=flat-square\" alt=\"Stability\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/lilcss\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/lilcss.svg?style=flat-square\" alt=\"NPM version\" /\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\nDistill out css bloat by parsing static files for selectors\n\n## Example\n\nLet'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.\n\n```\n$ lilcss fat.css -f templates/*.js \u003e lil.css\n```\n\n\u003cdetails\u003e\n  \u003csummary\u003efat.css\u003c/summary\u003e\n\n  ```css\n  .c1{width:8.333333333333332%}\n  .c2{width:16.666666666666664%}\n  .c3{width:25%}\n  .c4{width:33.33333333333333%}\n  .c5{width:41.66666666666667%}\n  .c6{width:50%}\n  .c7{width:58.333333333333336%}\n  .c8{width:66.66666666666666%}\n  .c9{width:75%}\n  .c10{width:83.33333333333334%}\n  .c11{width:91.66666666666666%}\n  .c12{width:100%}\n  .df{display:flex}\n  .db{display:block}\n  .dib{display:inline-block}\n  .di{display:inline}\n  .dt{display:table}\n  .dtc{display:table-cell}\n  .dtr{display:table-row}\n  .dn{display:none}\n  ```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003etemplates\u003c/summary\u003e\n\n  ```js\n  module.exports = html`\n    \u003cdiv class=\"c2 ${show ? 'db' : 'dn'}\"\u003e\u003c/div\u003e\n  `\n  ```\n\n  ```js\n  module.exports = html`\n    \u003cdiv class=\"c4 dib\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"c8 dib\"\u003e\u003c/div\u003e\n  `\n  ```\n\n\u003c/details\u003e\n\nOur new file will now only contain the css we need:\n\n```css\n.c2{width:16.666666666666664%}\n.c4{width:33.33333333333333%}\n.c8{width:66.66666666666666%}\n.db{display:block}\n.dib{display:inline-block}\n.dn{display:none}\n```\n\n## API\n\n#### `lilcss(css, src, options)`\n\nReturns the distilled css.\n\n| option | default | controls |\n| --- | --- | --- |\n| ignore | `[]` | any selectors to ignore |\n| attr | `['class', 'sm', 'md', 'lg', 'xl']` | attributes to parse from files |\n\n## Notes\n\n`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:\n\n1. A single css file will be parsed\n2. The css file must not be minified prior to being parsed\n3. General selectors, such as `body` or `input` will always be preserved\n4. Any attribute selector will be treated as `~=`\n5. Only class and attribute selectors are supported\n6. Only HTML-like attributes will be parsed, things like `classList.add()` are not supported:\n\nInput template to parse:\n```html\n\u003cdiv class=\"c1 dn\" sm=\"c2\"\u003e\n```\n\nExtracted selectors:\n```js\n['.c1', '.dn', '[sm~=\"c2\"]']\n```\n\nAnything which does not match these selectors will be removed from the css.\n\n## Why?\n\nRemoving 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.\n\n`lilcss` has specific requirements but this allows the code to stay small and concise. More functionality may be introduced as needed.\n\n## See Also\n\n- [gr8](https://github.com/jongacnik/gr8)\n- [gr8-util](https://github.com/jongacnik/gr8-util)\n- [quick-styles](https://github.com/jongacnik/quick-styles)\n\n## Todo\n\n- [ ] Tests\n- [ ] Better regex (or perhaps ditch and ast this thing)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjongacnik%2Flilcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjongacnik%2Flilcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjongacnik%2Flilcss/lists"}