{"id":13432014,"url":"https://github.com/purifycss/purifycss","last_synced_at":"2026-01-12T07:57:18.565Z","repository":{"id":32678811,"uuid":"36267537","full_name":"purifycss/purifycss","owner":"purifycss","description":"Remove unused CSS. Also works with single-page apps.","archived":false,"fork":false,"pushed_at":"2020-10-17T03:45:35.000Z","size":349,"stargazers_count":9921,"open_issues_count":84,"forks_count":383,"subscribers_count":150,"default_branch":"master","last_synced_at":"2025-02-28T15:58:07.249Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/purifycss.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-05-26T02:42:17.000Z","updated_at":"2025-02-28T07:38:08.000Z","dependencies_parsed_at":"2022-06-27T00:02:06.576Z","dependency_job_id":null,"html_url":"https://github.com/purifycss/purifycss","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/purifycss%2Fpurifycss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/purifycss%2Fpurifycss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/purifycss%2Fpurifycss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/purifycss%2Fpurifycss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/purifycss","download_url":"https://codeload.github.com/purifycss/purifycss/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243949730,"owners_count":20373650,"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":[],"created_at":"2024-07-31T02:01:07.854Z","updated_at":"2026-01-12T07:57:18.558Z","avatar_url":"https://github.com/purifycss.png","language":"JavaScript","readme":"# PurifyCSS  \n\n[![Travis](https://img.shields.io/travis/purifycss/purifycss/master.svg)]()\n[![npm](https://img.shields.io/npm/dm/purify-css.svg)]()\n[![David](https://img.shields.io/david/purifycss/purifycss.svg)]()\n![Join the chat at https://gitter.im/purifycss/purifycss](https://badges.gitter.im/purifycss/purifycss.svg)\n\n\nA function that takes content (HTML/JS/PHP/etc) and CSS, and returns only the **used CSS**.  \nPurifyCSS does not modify the original CSS files. You can write to a new file, like minification.  \nIf your application is using a CSS framework, this is especially useful as many selectors are often unused.\n\n### Potential reduction\n\n* [Bootstrap](https://github.com/twbs/bootstrap) file: ~140k\n* App using ~40% of selectors.\n* Minified: ~117k\n* Purified + Minified: **~35k**\n\n\n## Usage\n\n### Standalone\n\nInstallation  \n\n```bash\nnpm i -D purify-css\n```\n\n```javascript\nimport purify from \"purify-css\"\nconst purify = require(\"purify-css\")\n\nlet content = \"\"\nlet css = \"\"\nlet options = {\n    output: \"filepath/output.css\"\n}\npurify(content, css, options)\n```\n\n### Build Time\n\n- [Grunt](https://github.com/purifycss/grunt-purifycss)\n- [Gulp](https://github.com/purifycss/gulp-purifycss)\n- [Webpack](https://github.com/purifycss/purifycss-webpack-plugin)\n\n### CLI Usage\n\n```\n$ npm install -g purify-css\n```\n\n```\n$ purifycss -h\n\npurifycss \u003ccss\u003e \u003ccontent\u003e [option]\n\nOptions:\n  -m, --min        Minify CSS                         [boolean] [default: false]\n  -o, --out        Filepath to write purified css to                    [string]\n  -i, --info       Logs info on how much css was removed\n                                                      [boolean] [default: false]\n  -r, --rejected   Logs the CSS rules that were removed\n                                                      [boolean] [default: false]\n  -w, --whitelist  List of classes that should not be removed\n                                                           [array] [default: []]\n  -h, --help       Show help                                           [boolean]\n  -v, --version    Show version number                                 [boolean]\n```\n\n\n## How it works\n\n### Used selector detection\n\nStatically analyzes your code to pick up which selectors are used.  \nBut will it catch all of the cases?  \n\n#### Let's start off simple.\n#### Detecting the use of: `button-active`\n\n``` html\n  \u003c!-- html --\u003e\n  \u003c!-- class directly on element --\u003e\n  \u003cdiv class=\"button-active\"\u003eclick\u003c/div\u003e\n```\n\n``` javascript\n  // javascript\n  // Anytime your class name is together in your files, it will find it.\n  $(button).addClass('button-active');\n```\n\n#### Now let's get crazy.\n#### Detecting the use of: `button-active`\n\n``` javascript\n  // Can detect if class is split.\n  var half = 'button-';\n  $(button).addClass(half + 'active');\n\n  // Can detect if class is joined.\n  var dynamicClass = ['button', 'active'].join('-');\n  $(button).addClass(dynamicClass);\n\n  // Can detect various more ways, including all Javascript frameworks.\n  // A React example.\n  var classes = classNames({\n    'button-active': this.state.buttonActive\n  });\n\n  return (\n    \u003cbutton className={classes}\u003eSubmit\u003c/button\u003e;\n  );\n```\n\n### Examples\n\n\n##### Example with source strings\n\n```js\nvar content = '\u003cbutton class=\"button-active\"\u003e Login \u003c/button\u003e';\nvar css = '.button-active { color: green; }   .unused-class { display: block; }';\n\nconsole.log(purify(content, css));\n```\n\nlogs out:\n\n```\n.button-active { color: green; }\n```\n\n\n##### Example with [glob](https://github.com/isaacs/node-glob) file patterns + writing to a file\n\n```js\nvar content = ['**/src/js/*.js', '**/src/html/*.html'];\nvar css = ['**/src/css/*.css'];\n\nvar options = {\n  // Will write purified CSS to this file.\n  output: './dist/purified.css'\n};\n\npurify(content, css, options);\n```\n\n\n##### Example with both [glob](https://github.com/isaacs/node-glob) file patterns and source strings + minify + logging rejected selectors\n\n```js\nvar content = ['**/src/js/*.js', '**/src/html/*.html'];\nvar css = '.button-active { color: green; } .unused-class { display: block; }';\n\nvar options = {\n  output: './dist/purified.css',\n\n  // Will minify CSS code in addition to purify.\n  minify: true,\n\n  // Logs out removed selectors.\n  rejected: true\n};\n\npurify(content, css, options);\n```\nlogs out:\n\n```\n.unused-class\n```\n\n\n##### Example with callback\n\n```js\nvar content = ['**/src/js/*.js', '**/src/html/*.html'];\nvar css = ['**/src/css/*.css'];\n\npurify(content, css, function (purifiedResult) {\n  console.log(purifiedResult);\n});\n```\n\n\n##### Example with callback + options\n\n```js\nvar content = ['**/src/js/*.js', '**/src/html/*.html'];\nvar css = ['**/src/css/*.css'];\n\nvar options = {\n  minify: true\n};\n\npurify(content, css, options, function (purifiedAndMinifiedResult) {\n  console.log(purifiedAndMinifiedResult);\n});\n```\n\n### API in depth\n\n```javascript\n// Four possible arguments.\npurify(content, css, options, callback);\n```\n\n#####  The `content` argument\n##### Type: `Array` or `String`\n\n**`Array`** of [glob](https://github.com/isaacs/node-glob) file patterns to the files to search through for used classes (HTML, JS, PHP, ERB, Templates, anything that uses CSS selectors).\n\n**`String`** of content to look at for used classes.\n\n\u003cbr /\u003e\n\n##### The `css` argument\n##### Type: `Array` or `String`\n\n**`Array`** of [glob](https://github.com/isaacs/node-glob) file patterns to the CSS files you want to filter.\n\n**`String`** of CSS to purify.\n\n\u003cbr /\u003e\n\n##### The (optional) `options` argument\n##### Type: `Object`\n\n##### Properties of options object:\n\n* **`minify:`** Set to `true` to minify. Default: `false`.\n\n* **`output:`** Filepath to write purified CSS to. Returns raw string if `false`. Default: `false`.\n\n* **`info:`** Logs info on how much CSS was removed if `true`. Default: `false`.\n\n* **`rejected:`** Logs the CSS rules that were removed if `true`. Default: `false`.\n\n* **`whitelist`** Array of selectors to always leave in. Ex. `['button-active', '*modal*']` this will leave any selector that includes `modal` in it and selectors that match `button-active`. (wrapping the string with *'s, leaves all selectors that include it)\n\n\n\n##### The (optional) ```callback``` argument\n##### Type: `Function`\n\nA function that will receive the purified CSS as it's argument.\n\n##### Example of callback use\n``` javascript\npurify(content, css, options, function(purifiedCSS){\n  console.log(purifiedCSS, ' is the result of purify');\n});\n```\n\n##### Example of callback without options\n``` javascript\npurify(content, css, function(purifiedCSS){\n  console.log('callback without options and received', purifiedCSS);\n});\n```\n\n##### Example CLI Usage\n\n```\n$ purifycss src/css/main.css src/css/bootstrap.css src/js/main.js --min --info --out src/dist/index.css\n```\nThis will concat both `main.css` and `bootstrap.css` and purify it by looking at what CSS selectors were used inside of `main.js`. It will then write the result to `dist/index.css`\n\nThe `--min` flag minifies the result.\n\nThe `--info` flag will print this to stdout:\n```\n    ________________________________________________\n    |\n    |   PurifyCSS has reduced the file size by ~ 33.8%\n    |\n    ________________________________________________\n\n```\nThe CLI currently does not support file patterns.\n","funding_links":[],"categories":["CSS","JavaScript","others","Client-side","工具库","Frontend","Ep150: CSS Shapes, JavaScript, Font Combinations"],"sub_categories":["References","Performance","Performans","React Components","Optimizing CSS"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpurifycss%2Fpurifycss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpurifycss%2Fpurifycss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpurifycss%2Fpurifycss/lists"}