{"_id":"purifycss","_rev":"11-419293c863149fb23eeee6e10c941c89","name":"purifycss","description":"Removed unused css. Compatible with single-page apps.","dist-tags":{"latest":"1.2.6"},"versions":{"1.1.9":{"name":"purifycss","version":"1.1.9","description":"Removed unused css. Compatible with single-page apps.","main":"./src/purifycss.js","dependencies":{"clean-css":"^3.2.10","glob":"^6.0.4","rework":"^1.0.1","uglifyjs":"^2.4.10","yargs":"^3.10.0"},"devDependencies":{"chai":"^3.0.0","eslint":"^0.24.1","mocha":"^2.2.5"},"scripts":{"pretest":"eslint src && eslint bin/purifycss","test":"node ./node_modules/mocha/bin/mocha"},"repository":{"type":"git","url":"https://github.com/purifycss/purifycss.git"},"keywords":["optimize","css","remove","unused"],"files":["bin","src","LICENSE","package.json","README.md"],"author":{"name":"Kenny Tran, Matthew Rourke, Phoebe Li"},"license":"MIT","bugs":{"url":"https://github.com/purifycss/purifycss/issues"},"bin":{"purifycss":"./bin/purifycss"},"homepage":"https://github.com/purifycss/purifycss","gitHead":"212de957dbfbc20d15b8ed47c79f76600a83c803","_id":"purifycss@1.1.9","_shasum":"82d4450f664e9e5a3ccdff2b34c4793ad22f9d72","_from":"./","_npmVersion":"1.4.28","_npmUser":{"name":"kennyt","email":"kenny8tran@gmail.com"},"maintainers":[{"name":"kennyt","email":"kenny8tran@gmail.com"}],"dist":{"shasum":"82d4450f664e9e5a3ccdff2b34c4793ad22f9d72","tarball":"https://registry.npmjs.org/purifycss/-/purifycss-1.1.9.tgz","integrity":"sha512-GuM/5qm7vPy3mn0NxwRfbkRdtX8zB85GelLmz93Uz+nCi1Zj5hk/FLWGaeJqtnzBIKWEOjnFHgC+ipcQ76Vjqw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE8ztgWRyG4hRaLmbk3CFI3RbwdADlKRqtc8lPQDgBZ9AiEA/85sXFeR5hNjYjMgOrVqedcXgj/eUBYdPQGutdIU1Og="}]},"_npmOperationalInternal":{"host":"packages-6-west.internal.npmjs.com","tmp":"tmp/purifycss-1.1.9.tgz_1456294752585_0.7768943016417325"},"deprecated":"Please use purify-css instead","directories":{}},"1.2.6":{"name":"purifycss","version":"1.2.6","description":"Removed unused css. Compatible with single-page apps.","main":"./lib/purifycss.js","module":"./lib/purifycss.es.js","jsnext:main":"./lib/purifycss.es.js","dependencies":{"clean-css":"^4.0.12","glob":"^7.1.1","rework":"^1.0.1","uglify-js":"^3.0.6","yargs":"^8.0.1"},"devDependencies":{"babel-plugin-external-helpers":"^6.22.0","babel-preset-es2015":"^6.24.1","jest":"^19.0.2","rollup":"^0.41.6","rollup-plugin-babel":"^2.7.1","rollup-plugin-commonjs":"^8.0.2","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-watch":"^3.2.2"},"scripts":{"test":"jest index.js","dev":"rollup -c config/rollup.config.js -w","build":"rollup -c config/rollup.config.js"},"repository":{"type":"git","url":"https://github.com/purifycss/purifycss.git"},"keywords":["optimize","css","remove","unused"],"author":{"name":"Kenny Tran, Matthew Rourke, Phoebe Li"},"license":"MIT","bugs":{"url":"https://github.com/purifycss/purifycss/issues"},"bin":{"purifycss":"./bin/purifycss"},"homepage":"https://github.com/purifycss/purifycss","gitHead":"d8a29b4fe89324086cccb83b25f3b30c8d214ed6","_id":"purifycss@1.2.6","_shasum":"6e27ecd1d4fcf7352e19e176ce129a1562a7545d","_from":"./","_npmVersion":"1.4.28","_npmUser":{"name":"kennyt","email":"kenny8tran@gmail.com"},"maintainers":[{"name":"kennyt","email":"kenny8tran@gmail.com"}],"dist":{"shasum":"6e27ecd1d4fcf7352e19e176ce129a1562a7545d","tarball":"https://registry.npmjs.org/purifycss/-/purifycss-1.2.6.tgz","integrity":"sha512-VpZhgYtY8wGDr2O0/Yh5LD+mmqgvya6IjgtBMWv1MPQ7Vx/o46jnNPqsZVU0xlKuh4d/rwXzoRMo+r9AsP9Yrg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDDG4LTdIMAjkrfkxSGMs62VdcnfN/8B0Elq+wkR4j6cwIgPawIseJJE3s9bH7Ga5wSWs18zXGoMoQW4GM+xMvZHhc="}]},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/purifycss-1.2.6.tgz_1503698792480_0.13457227125763893"},"deprecated":"Please use purify-css instead","directories":{}}},"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 purifycss from \"purify-css\"\nconst purifycss = 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 <css> <content> [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  <!-- html -->\n  <!-- class directly on element -->\n  <div class=\"button-active\">click</div>\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    <button className={classes}>Submit</button>;\n  );\n```\n\n### Examples\n\n\n##### Example with source strings\n\n```js\nvar content = '<button class=\"button-active\"> Login </button>';\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<br />\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<br />\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","maintainers":[{"name":"kennyt","email":"kenny8tran@gmail.com"}],"time":{"modified":"2022-06-25T01:45:19.665Z","created":"2016-02-24T06:19:13.368Z","1.1.9":"2016-02-24T06:19:13.368Z","1.2.6":"2017-08-25T22:06:32.603Z"},"homepage":"https://github.com/purifycss/purifycss","keywords":["optimize","css","remove","unused"],"repository":{"type":"git","url":"https://github.com/purifycss/purifycss.git"},"author":{"name":"Kenny Tran, Matthew Rourke, Phoebe Li"},"bugs":{"url":"https://github.com/purifycss/purifycss/issues"},"license":"MIT","readmeFilename":"README.md","users":{"beiluo":true}}