{"id":19475447,"url":"https://github.com/artdecocode/trapcss","last_synced_at":"2025-08-02T16:35:10.093Z","repository":{"id":50779545,"uuid":"236992442","full_name":"artdecocode/trapcss","owner":"artdecocode","description":"Removes unused selectors from CSS files to achieve maximum optimisation. Can be used as an API function or with CLI.","archived":false,"fork":false,"pushed_at":"2021-05-30T01:40:12.000Z","size":464,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-01T01:07:28.770Z","etag":null,"topics":["browser","css","minifier","web"],"latest_commit_sha":null,"homepage":"https://art-deco.github.io/trapcss","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/artdecocode.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"COPYING","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-01-29T13:48:22.000Z","updated_at":"2020-03-10T06:57:05.000Z","dependencies_parsed_at":"2022-08-24T08:50:23.481Z","dependency_job_id":null,"html_url":"https://github.com/artdecocode/trapcss","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":"mnpjs/package","purl":"pkg:github/artdecocode/trapcss","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artdecocode%2Ftrapcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artdecocode%2Ftrapcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artdecocode%2Ftrapcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artdecocode%2Ftrapcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/artdecocode","download_url":"https://codeload.github.com/artdecocode/trapcss/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artdecocode%2Ftrapcss/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268256952,"owners_count":24221053,"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","status":"online","status_checked_at":"2025-08-01T02:00:08.611Z","response_time":67,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["browser","css","minifier","web"],"created_at":"2024-11-10T19:32:52.603Z","updated_at":"2025-08-02T16:35:10.046Z","avatar_url":"https://github.com/artdecocode.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# trapcss\n\n[![npm version](https://badge.fury.io/js/trapcss.svg)](https://www.npmjs.com/package/trapcss)\n\n`trapcss` removes unused selectors from CSS files to achieve maximum optimisation. Can be used as an API function or with CLI.\n\nIt is a [fork](https://github.com/leeoniya/dropcss) which is _\"An exceptionally fast, thorough and tiny unused-CSS cleaner\"_, but has a binary and has been optimised with Closure Compiler.\n\n```sh\nyarn add trapcss\nnpm install -D trapcss\n```\n\n## Introduction\n\n_TrapCSS_ takes your HTML and CSS as input and returns only the used CSS as output. Its custom HTML and CSS parsers are highly optimized for the 99% use case and thus avoid the overhead of handling malformed markup or stylesheets, so well-formed input is required. There is minimal handling for complex escaping rules, so there will always exist cases of valid input that cannot be processed by TrapCSS; for these infrequent cases, please [start a discussion](https://github.com/leeoniya/dropcss/issues). While the HTML spec allows `html`, `head`, `body` and `tbody` to be implied/omitted, TrapCSS makes no such assumptions; selectors will only be retained for tags that can be parsed from provided markup.\n\nIt's also a good idea to run your CSS through a structural optimizer like [clean-css](https://github.com/jakubpawlowicz/clean-css), [csso](https://github.com/css/csso), [cssnano](https://github.com/cssnano/cssnano) or [crass](https://github.com/mattbasta/crass) to re-group selectors, merge redundant rules, etc. It probably makes sense to do this after TrapCSS, which can leave redundant blocks, e.g. `.foo, .bar { color: red; } .bar { width: 50%; }` -\u003e `.bar { color: red; } .bar { width: 50%; }` if `.foo` is absent from your markup.\n\nMore on this project's backstory \u0026 discussions: v0.1.0 alpha: [/r/javascript](https://old.reddit.com/r/javascript/comments/b3mcu8/dropcss_010_a_minimal_and_thorough_unused_css/), [Hacker News](https://news.ycombinator.com/item?id=19469080) and v1.0.0 release: [/r/javascript](https://old.reddit.com/r/javascript/comments/bb7im2/dropcss_v100_an_exceptionally_fast_thorough_and/).\n\n\u003ckbd\u003e📙 [READ WIKI PAGES](../../wiki)\u003c/kbd\u003e\n\n## Table Of Contents\n\n- [Introduction](#introduction)\n- [Table Of Contents](#table-of-contents)\n- [API](#api)\n- [`trapcss(config: Config): Return`](#trapcssconfig-config-return)\n  * [`Config`](#type-config)\n  * [`Return`](#type-return)\n- [CLI](#cli)\n- [Copyright \u0026 License](#copyright--license)\n\n\u003cp align=\"center\"\u003e\u003ca href=\"#table-of-contents\"\u003e\n  \u003cimg src=\"/.documentary/section-breaks/0.svg?sanitize=true\"\u003e\n\u003c/a\u003e\u003c/p\u003e\n\n## API\n\nThe package is available by importing its default function:\n\n```js\nimport trapcss from 'trapcss'\n```\n\n\u003cp align=\"center\"\u003e\u003ca href=\"#table-of-contents\"\u003e\n  \u003cimg src=\"/.documentary/section-breaks/1.svg?sanitize=true\"\u003e\n\u003c/a\u003e\u003c/p\u003e\n\n## \u003ccode\u003e\u003cins\u003etrapcss\u003c/ins\u003e(\u003c/code\u003e\u003csub\u003e\u003cbr/\u003e\u0026nbsp;\u0026nbsp;`config: Config,`\u003cbr/\u003e\u003c/sub\u003e\u003ccode\u003e): \u003ci\u003eReturn\u003c/i\u003e\u003c/code\u003e\nParses the supplied HTML and CSS and removes\nunused selectors. Also removes empty CSS rules.\n\n - \u003ckbd\u003e\u003cstrong\u003econfig*\u003c/strong\u003e\u003c/kbd\u003e \u003cem\u003e\u003ccode\u003e\u003ca href=\"#type-config\" title=\"Options for the program.\"\u003eConfig\u003c/a\u003e\u003c/code\u003e\u003c/em\u003e: The options for _TrapCSS_.\n\n__\u003ca name=\"type-config\"\u003e`Config`\u003c/a\u003e__: Options for the program.\n\n\n|     Name      |               Type                |                                                                                                     Description                                                                                                      | Default |\n| ------------- | --------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |\n| __html*__     | \u003cem\u003estring\u003c/em\u003e                   | The input HTML.                                                                                                                                                                                                      | -       |\n| __css*__      | \u003cem\u003estring\u003c/em\u003e                   | The CSS to drop selectors from.                                                                                                                                                                                      | -       |\n| keepAlternate | \u003cem\u003eboolean\u003c/em\u003e                  | Whether to keep the `@alternate` comment for\u003cbr/\u003eClosure Stylesheets.                                                                                                                                                | `false` |\n| shouldDrop    | \u003cem\u003e(sel: string) =\u003e boolean\u003c/em\u003e | Whether _TrapCSS_ should remove this selector.\u003cbr/\u003eThe `shouldDrop` hook is called for every CSS selector\u003cbr/\u003ethat could not be matched in the html. Return `false`\u003cbr/\u003eto retain the selector or `true` to drop it. | -       |\n\n\n__\u003ca name=\"type-return\"\u003e`Return`\u003c/a\u003e__: Return Type.\n\n\n|   Name    |            Type             |     Description     |\n| --------- | --------------------------- | ------------------- |\n| __css*__  | \u003cem\u003estring\u003c/em\u003e             | The dropped CSS.    |\n| __sels*__ | \u003cem\u003e!Set\u0026lt;string\u0026gt;\u003c/em\u003e | The used selectors. |\n\n```js\nimport trapcss from 'trapcss'\n\nlet html = `\n    \u003chtml\u003e\n        \u003chead\u003e\u003c/head\u003e\n        \u003cbody\u003e\n            \u003cp\u003eHello World!\u003c/p\u003e\n        \u003c/body\u003e\n    \u003c/html\u003e\n`\n\nlet css = `\n    html {\n      background: yellow;\n      /* @alternate */\n      background: green;\n    }\n    .card {\n      padding: 8px;\n    }\n    p:hover a:first-child {\n      color: red;\n    }\n`\n\nconst whitelist = /#foo|\\.bar/\n\nlet dropped = new Set()\n\nlet cleaned = trapcss({\n  html,\n  css,\n  shouldDrop(sel) {\n    if (whitelist.test(sel))\n      return false\n    else {\n      dropped.add(sel)\n      return true\n    }\n  },\n})\n\nconsole.log(cleaned.css)\n\nconsole.error(dropped)\n```\n\n```css\nhtml{background: yellow;background: green;}\n```\n```js\nSet { '.card', 'p:hover a:first-child' }\n```\n\n\u003cp align=\"center\"\u003e\u003ca href=\"#table-of-contents\"\u003e\n  \u003cimg src=\"/.documentary/section-breaks/2.svg?sanitize=true\"\u003e\n\u003c/a\u003e\u003c/p\u003e\n\n## CLI\n\nThe package can also be used from the CLI.\n\n\u003ctable\u003e\n \u003cthead\u003e\n  \u003ctr\u003e\n   \u003cth\u003eArgument\u003c/th\u003e \n   \u003cth\u003eShort\u003c/th\u003e\n   \u003cth\u003eDescription\u003c/th\u003e\n  \u003c/tr\u003e\n \u003c/thead\u003e\n  \u003ctr\u003e\n   \u003ctd\u003einput\u003c/td\u003e\n   \u003ctd\u003e\u003c/td\u003e\n   \u003ctd\u003eThe HTML files to read.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n   \u003ctd\u003e--css\u003c/td\u003e\n   \u003ctd\u003e-c\u003c/td\u003e\n   \u003ctd\u003eThe CSS file to drop selectors from.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n   \u003ctd\u003e--output\u003c/td\u003e\n   \u003ctd\u003e-o\u003c/td\u003e\n   \u003ctd\u003eThe destination where to save output.\n    If not passed, prints to stdout.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n   \u003ctd\u003e--help\u003c/td\u003e\n   \u003ctd\u003e-h\u003c/td\u003e\n   \u003ctd\u003ePrint the help information and exit.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n   \u003ctd\u003e--version\u003c/td\u003e\n   \u003ctd\u003e-v\u003c/td\u003e\n   \u003ctd\u003eShow the version's number and exit.\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\nFor example, having these two files, we can use `trapcss` from the command line:\n\n\u003ctable\u003e\n\u003ctr\u003e\n  \u003cth\u003eHTML file\u003c/th\u003e\n  \u003cth\u003eCSS file\u003c/th\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\n\n  ```html\n  \u003chtml\u003e\n    \u003chead\u003e\n      \u003ctitle\u003eTrapCSS ftw\u003c/title\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n        \u003cp\u003eHello World!\u003c/p\u003e\n    \u003c/body\u003e\n  \u003c/html\u003e\n  ```\n  \u003c/td\u003e\n  \u003ctd\u003e\n\n  ```css\n  html {\n    background: yellow;\n    /* @alternate */\n    background: green;\n  }\n  .card {\n    padding: 8px;\n  }\n  p:hover a:first-child {\n    color: red;\n  }\n  ```\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n```console\ntrapcss:~$ trapcss example/cli/index.html -c example/cli/style.css\n```\n\n```css\nhtml{background: yellow;background: green;}\n```\n\nThe help can be accessed with the `-h` command:\n\n```\nRemove unused CSS\n\n  trapcss input.html[,n.html,...] -c style.css [-o output] [-hv]\n\n\tinput        \tThe HTML files to read.\n\t--css, -c    \tThe CSS file to drop selectors from.\n\t--output, -o \tThe destination where to save output.\n\t             \tIf not passed, prints to stdout.\n\t--help, -h   \tPrint the help information and exit.\n\t--version, -v\tShow the version's number and exit.\n\n  Example:\n\n    trapcss index.html example.html -c style.css -o style-dropped.css\n```\n\n\u003cp align=\"center\"\u003e\u003ca href=\"#table-of-contents\"\u003e\n  \u003cimg src=\"/.documentary/section-breaks/3.svg?sanitize=true\"\u003e\n\u003c/a\u003e\u003c/p\u003e\n\n## Copyright \u0026 License\n\nGNU Affero General Public License v3.0\n\nOriginal work on [_DropCSS_](https://github.com/leeoniya/dropcss) package\nby [Leon Sorokin](https://github.com/leeoniya) under MIT license found in [COPYING](COPYING).\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/38815725?v=4\u0026amp;s=100\" alt=\"artdecocode\"\u003e\u003c/td\u003e\n    \u003ctd\u003e© \u003ca href=\"https://www.artd.eco\"\u003eArt Deco™\u003c/a\u003e 2020\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003cp align=\"center\"\u003e\u003ca href=\"#table-of-contents\"\u003e\n  \u003cimg src=\"/.documentary/section-breaks/-1.svg?sanitize=true\"\u003e\n\u003c/a\u003e\u003c/p\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartdecocode%2Ftrapcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fartdecocode%2Ftrapcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartdecocode%2Ftrapcss/lists"}