{"id":21626454,"url":"https://github.com/qodesmith/purgecss-whitelister","last_synced_at":"2025-08-07T21:34:25.791Z","repository":{"id":65419951,"uuid":"115817273","full_name":"qodesmith/purgecss-whitelister","owner":"qodesmith","description":"A utility for creating whitelists of CSS selectors for use with Purgecss.","archived":false,"fork":false,"pushed_at":"2020-12-30T22:12:35.000Z","size":58,"stargazers_count":44,"open_issues_count":1,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-03-23T09:22:08.523Z","etag":null,"topics":[],"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/qodesmith.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}},"created_at":"2017-12-30T19:06:11.000Z","updated_at":"2022-03-24T16:19:58.000Z","dependencies_parsed_at":"2023-01-22T18:25:12.107Z","dependency_job_id":null,"html_url":"https://github.com/qodesmith/purgecss-whitelister","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qodesmith%2Fpurgecss-whitelister","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qodesmith%2Fpurgecss-whitelister/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qodesmith%2Fpurgecss-whitelister/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qodesmith%2Fpurgecss-whitelister/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/qodesmith","download_url":"https://codeload.github.com/qodesmith/purgecss-whitelister/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248402545,"owners_count":21097331,"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-11-25T01:13:25.128Z","updated_at":"2025-04-11T12:46:10.402Z","avatar_url":"https://github.com/qodesmith.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"```\n\n/\\ \\  __/\\ \\/\\ \\      __/\\ \\__       /\\_ \\   __        /\\ \\__\n\\ \\ \\/\\ \\ \\ \\ \\ \\___ /\\_\\ \\ ,_\\    __\\//\\ \\ /\\_\\    ___\\ \\ ,_\\ By: Qodesmith\n \\ \\ \\ \\ \\ \\ \\ \\  _ `\\/\\ \\ \\ \\/  /'__`\\\\ \\ \\\\/\\ \\  /',__\\ \\ \\/  /'__`\\/\\`'__\\\n  \\ \\ \\_/ \\_\\ \\ \\ \\ \\ \\ \\ \\ \\ \\_/\\  __/ \\_\\ \\\\ \\ \\/\\__, `\\ \\ \\_/\\  __/\\ \\ \\/\n   \\ `\\___x___/\\ \\_\\ \\_\\ \\_\\ \\__\\ \\____\\/\\____\\ \\_\\/\\____/\\ \\__\\ \\____\\\\ \\_\\\n    '\\/__//__/  \\/_/\\/_/\\/_/\\/__/\\/____/\\/____/\\/_/\\/___/  \\/__/\\/____/ \\/_/\n\n```\n\n# Purgecss Whitelister\n\nCreate whitelists dynamically to include your 3rd party library styles! Supports css, sass, and less.\n\n\n## Why this package?\n\nWhile rebuilding my [personal site](http://aaroncordova.xyz) in React and using webpack + [purgecss-webpack-plugin](https://github.com/FullHuman/purgecss-webpack-plugin), I noticed that my 3rd party library, [Typer.js](https://github.com/qodesmith/typer) (it's really cool - it types things out on the screen like a typewriter), had its styles stripped from the bundle. While it wasn't _that_ big a deal to type out the few class names into a whitelist array, what if that list was huge? What if it was _yuuuge_? I needed a way to dynamically generate a whitelist of selectors. Boom. `purgecss-whitelister` was born.\n\n\n## Installation\n\nVia [npm](https://www.npmjs.com/package/purgecss-whitelister):\n\n```bash\nnpm i purgecss-whitelister\n```\n\n\n## Usage\n\n`purgecss-whitelister` is meant to extract all the selectors used in a file and create an array of names for whitelisting. ***Works with css, sass, and less!*** This is very handy when you have a 3rd party library that you don't want annihilated from your bundle.\n\nPass either a string, a globby string, or an array of either, representing the location(s) of the file(s) you want to completely whitelist.\n\n**NOTE:** `purgecss-whitelister` will internally ignore any files that don't have the following extensions: `css`, `sass`, `scss`, `less`, or `pcss`.\n\n**NOTE:** Use the `pcss` extension with caution. It may or may not work. `pcss` is a PostCSS file extension but has no official documentation. It's been added to this tool for convenience but YMMV. If anyone has info on the `pcss` extension, I'm all ears.\n\n```javascript\nconst { resolve } = require('path')\nconst whitelister = require('purgecss-whitelister')\n\n// Example 1 - simple string\nwhitelister('./relative/path/to/my/styles.css')\n\n// Example 2 - array of strings\nwhitelister(['./styles1.css', './styles2.scss'])\n\n// Example 3 - globby strings\nwhitelister('./3rd/party/library/*.less')\n\n// Example 4 - array of globby strings\nwhitelister([\n  './node_modules/lib1/*.css',\n  './node_modules/lib2/*.scss',\n  './node_modules/lib3/*.less'\n])\n\n// Example 5 - ALL THE THINGS\n//\nwhitelister('./node_modules/cool-library/styles/*.*')\n```\n\n## Webpack Example\n\nThis is essentially what I'm using in my `webpack.config.js` file:\n```javascript\nconst whitelister = require('purgecss-whitelister')\nconst PurgecssPlugin = require('purgecss-webpack-plugin')\nconst glob = require('glob-all')\nconst { resolve } = require('path')\n\nconst webpackConfig = {\n\n  // ...a whole buncha stuffs up here...\n\n  plugins: [\n    new PurgecssPlugin({\n      keyframes: false, // https://goo.gl/bACbDW\n      styleExtensions: ['.css'],\n      paths: glob.sync([\n        resolve(resolve(), 'src/**/*.js'),\n        resolve(resolve(), 'src/index.ejs')\n      ]),\n\n      // `whitelist` needed to ensure Typer classes stay in the bundle.\n      whitelist: whitelister('node_modules/typer-js/typer.css');,\n      extractors: [\n        {\n          // https://goo.gl/hr6mdb\n          extractor: class AvoidBacktickIssue {\n            static extract(content) {\n              return content.match(/[A-Za-z0-9_-]+/g) || [];\n            }\n          },\n          extensions: ['js'] // file extensions\n        }\n      ]\n    }),\n\n    // ...probably more plugins \u0026 things...\n  ]\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqodesmith%2Fpurgecss-whitelister","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqodesmith%2Fpurgecss-whitelister","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqodesmith%2Fpurgecss-whitelister/lists"}