From cc43d4c0acaa5ddcaf7be2f2507daffd98aa743e Mon Sep 17 00:00:00 2001 From: Ffloriel Date: Sat, 4 Jul 2020 13:46:25 +0100 Subject: [PATCH] refactor: rename whitelist to safelist - CLI option - Documentation #428 #439 --- README.md | 2 +- docs/.vuepress/config.js | 2 +- docs/CLI.md | 8 +- docs/README.md | 9 +- docs/api.md | 5 -- docs/configuration.md | 89 +++++++++++++------ docs/guides/nuxt.md | 2 +- docs/guides/vue.md | 3 +- docs/guides/wordpress.md | 16 ++-- docs/plugins/webpack.md | 36 +++----- docs/{whitelisting.md => safelisting.md} | 30 ++++--- packages/gulp-purgecss/src/types/index.ts | 2 +- packages/purgecss-webpack-plugin/README.md | 85 ++++-------------- .../expected/styles.css | 6 +- .../src/content.html | 0 .../path-and-safelist-functions/src/index.js | 1 + .../src/style.css | 6 +- .../webpack.config.js | 6 +- .../path-and-whitelist-functions/src/index.js | 1 - .../simple-with-exclusion/expected/styles.css | 2 +- .../src/style_that_we_want_to_purge.css | 2 +- .../simple-with-exclusion/webpack.config.js | 2 +- .../cases/simple/expected/styles.css | 2 +- .../__tests__/cases/simple/src/style.css | 2 +- .../__tests__/cases/simple/webpack.config.js | 2 +- .../__tests__/index.test.ts | 2 +- packages/purgecss-with-wordpress/README.md | 14 +-- packages/purgecss-with-wordpress/index.js | 42 +++++---- packages/purgecss/README.md | 2 +- packages/purgecss/__tests__/safelist.test.ts | 20 ++--- .../safelist/{whitelist.css => safelist.css} | 0 .../{whitelist.html => safelist.html} | 0 ...ren.css => safelist_patterns_children.css} | 0 ...n.html => safelist_patterns_children.html} | 0 ...reedy.css => safelist_patterns_greedy.css} | 0 ...edy.html => safelist_patterns_greedy.html} | 0 .../purgecss/bin/{purgecss => purgecss.js} | 63 +++++++------ packages/purgecss/package.json | 2 +- packages/vue-cli-plugin-purgecss/README.md | 3 +- 39 files changed, 218 insertions(+), 251 deletions(-) rename docs/{whitelisting.md => safelisting.md} (66%) rename packages/purgecss-webpack-plugin/__tests__/cases/{path-and-whitelist-functions => path-and-safelist-functions}/expected/styles.css (62%) rename packages/purgecss-webpack-plugin/__tests__/cases/{path-and-whitelist-functions => path-and-safelist-functions}/src/content.html (100%) create mode 100644 packages/purgecss-webpack-plugin/__tests__/cases/path-and-safelist-functions/src/index.js rename packages/purgecss-webpack-plugin/__tests__/cases/{path-and-whitelist-functions => path-and-safelist-functions}/src/style.css (67%) rename packages/purgecss-webpack-plugin/__tests__/cases/{path-and-whitelist-functions => path-and-safelist-functions}/webpack.config.js (87%) delete mode 100644 packages/purgecss-webpack-plugin/__tests__/cases/path-and-whitelist-functions/src/index.js rename packages/purgecss/__tests__/test_examples/safelist/{whitelist.css => safelist.css} (100%) rename packages/purgecss/__tests__/test_examples/safelist/{whitelist.html => safelist.html} (100%) rename packages/purgecss/__tests__/test_examples/safelist/{whitelist_patterns_children.css => safelist_patterns_children.css} (100%) rename packages/purgecss/__tests__/test_examples/safelist/{whitelist_patterns_children.html => safelist_patterns_children.html} (100%) rename packages/purgecss/__tests__/test_examples/safelist/{whitelist_patterns_greedy.css => safelist_patterns_greedy.css} (100%) rename packages/purgecss/__tests__/test_examples/safelist/{whitelist_patterns_greedy.html => safelist_patterns_greedy.html} (100%) rename packages/purgecss/bin/{purgecss => purgecss.js} (53%) diff --git a/README.md b/README.md index d04a94e0..ab7899ef 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,7 @@ You can find the PurgeCSS documentation on [this website](https://purgecss.com). - [Configuration](https://purgecss.com/configuration.html) - [Command Line Interface](https://purgecss.com/CLI.html) - [Programmatic API](https://purgecss.com/api.html) -- [Whitelisting](https://purgecss.com/whitelisting.html) +- [Whitelisting](https://purgecss.com/safelisting.html) - [Extractors](https://purgecss.com/extractors.html) - [Comparison](https://purgecss.com/comparison.html) diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 45cde807..d72c1529 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -99,7 +99,7 @@ module.exports = { ["configuration", "Configuration"], ["CLI", "Command Line Interface"], ["api", "Programmatic API"], - ["whitelisting", "Whitelisting"], + ["safelisting", "Safelisting"], ["extractors", "Extractors"], ], }, diff --git a/docs/CLI.md b/docs/CLI.md index 4c9c471e..c774b113 100644 --- a/docs/CLI.md +++ b/docs/CLI.md @@ -35,7 +35,7 @@ Options: -font, --font-face option to remove unused font-faces -keyframes, --keyframes option to remove unused keyframes -rejected, --rejected option to output rejected selectors - -w, --whitelist list of classes that should not be removed (comma separated) + -s, --safelist list of classes that should not be removed (comma separated) -h, --help display help for command ``` @@ -71,10 +71,10 @@ By default, the CLI outputs the result in the console. If you wish to return the purgecss --css css/app.css --content src/index.html,"src/**/*.js" --output build/css/ ``` -### --whitelist +### --safelist -If you wish to prevent PurgeCSS from removing a specific CSS selector, you can whitelist it. +If you wish to prevent PurgeCSS from removing a specific CSS selector, you can add it to the safelist. ```text -purgecss --css css/app.css --content src/index.html --whitelist classnameToWhitelist +purgecss --css css/app.css --content src/index.html --safelist classnameToSafelist ``` diff --git a/docs/README.md b/docs/README.md index b9cac411..4bba871d 100644 --- a/docs/README.md +++ b/docs/README.md @@ -13,7 +13,7 @@ meta: PurgeCSS is a tool to remove unused CSS. It can be part of your development workflow. When you are building a website, you might decide to use a CSS framework like TailwindCSS, Bootstrap, MaterializeCSS, Foundation, etc... But you will only use a small set of the framework, and a lot of unused CSS styles will be included. -This is where PurgeCSS comes into play. PurgeCSS analyzes your content and your css files. Then it matches the selectors used in your files with the one in your content files. It removes unused selectors from your css, resulting in smaller css files. +This is where PurgeCSS comes into play. PurgeCSS analyzes your content and your CSS files. Then it matches the selectors used in your files with the one in your content files. It removes unused selectors from your CSS, resulting in smaller CSS files. ## Table of Contents @@ -22,7 +22,7 @@ This is where PurgeCSS comes into play. PurgeCSS analyzes your content and your - [Configuration](configuration.md) - [Command Line Interface](CLI.md) - [Programmatic API](api.md) -- [Whitelisting](whitelisting.md) +- [Safelisting](safelisting.md) - [Extractors](extractors.md) - [Comparison](comparison.md) @@ -42,3 +42,8 @@ This is where PurgeCSS comes into play. PurgeCSS analyzes your content and your - [Next.js](guides/next.md) - [Razzle](guides/razzle.md) - [WordPress](guides/wordpress.md) + +### Common Questions + +- [How to use with CSS modules?](css_modules.md) +- [How to use with Ant Design?](ant_design.md) \ No newline at end of file diff --git a/docs/api.md b/docs/api.md index 56b504b6..df9e8d26 100644 --- a/docs/api.md +++ b/docs/api.md @@ -64,8 +64,3 @@ interface ResultPurge { rejected?: string[]; } ``` - -::: tip - Take a look at the type definition file to get the complete information. - [Definition file](https://github.com/FullHuman/purgecss/tree/master/packages/purgecss/lib/purgecss.d.ts) -::: diff --git a/docs/configuration.md b/docs/configuration.md index 03e0fd41..4e9d3986 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -37,21 +37,18 @@ The options are defined by the following types: ```ts interface UserDefinedOptions { - content: Array - css: Array - defaultExtractor?: ExtractorFunction - extractors?: Array - fontFace?: boolean - keyframes?: boolean - output?: string - rejected?: boolean - stdin?: boolean - stdout?: boolean - variables?: boolean - whitelist?: string[] - whitelistPatterns?: Array - whitelistPatternsChildren?: Array - whitelistPatternsGreedy?: Array + content: Array; + css: Array; + defaultExtractor?: ExtractorFunction; + extractors?: Array; + fontFace?: boolean; + keyframes?: boolean; + output?: string; + rejected?: boolean; + stdin?: boolean; + stdout?: boolean; + variables?: boolean; + safelist?: UserDefinedSafelist; } interface RawContent { @@ -62,6 +59,18 @@ interface RawContent { interface RawCSS { raw: string } + +type StringRegExpArray = Array; + +type ComplexSafelist = { + standard?: StringRegExpArray; + deep?: RegExp[]; + greedy?: RegExp[]; + variables?: StringRegExpArray; + keyframes?: StringRegExpArray; +}; + +type UserDefinedSafelist = StringRegExpArray | ComplexSafelist; ``` - **content** @@ -215,57 +224,79 @@ await new PurgeCSS().purge({ }) ``` -- **whitelist** +- **safelist** + +You can indicate which selectors are safe to leave in the final CSS. This can be accomplished with the option `safelist`. + +Two forms are available for this option. + +```ts +safelist: ['random', 'yep', 'button', /^nav-/] +``` + +In this form, safelist is an array that can take a string or a regex. + +The _complex_ form is: + +```ts +safelist: { + standard: ['random', 'yep', 'button', /^nav-/], + deep: [], + greedy: [], + keyframes: [], + variables: [] +} +``` -You can whitelist selectors to stop PurgeCSS from removing them from your CSS. This can be accomplished with the options `whitelist`, `whitelistPatterns`, `whitelistPatternsChildren`, and `whitelistPatternsGreedy`. +e.g: ```js const purgecss = await new PurgeCSS().purge({ content: [], // content css: [], // css - whitelist: ['random', 'yep', 'button'] + safelist: ['random', 'yep', 'button'] }) ``` In this example, the selectors `.random`, `#yep`, `button` will be left in the final CSS. -- **whitelistPatterns** - -You can whitelist selectors based on a regular expression with `whitelistPatterns`. - ```js const purgecss = await new PurgeCSS().purge({ content: [], // content css: [], // css - whitelistPatterns: [/red$/] + safelist: [/red$/] }) ``` In this example, selectors ending with `red` such as `.bg-red` will be left in the final CSS. -- **whitelistPatternsChildren** +- **safelist.deep** -You can whitelist selectors and their children based on a regular expression with `whitelistPatternsChildren`. +You can safelist selectors and their children based on a regular expression with `safelist.deep`. ```js const purgecss = await new PurgeCSS().purge({ content: [], // content css: [], // css - whitelistPatternsChildren: [/red$/] + safelist: { + deep: [/red$/] + } }) ``` In this example, selectors such as `.bg-red .child-of-bg` will be left in the final CSS, even if `child-of-bg` is not found. -- **whitelistPatternsGreedy** +- **safelist.greedy** -Finally, you can whitelist whole selectors if any part of that selector matches a regular expression with `whitelistPatternsGreedy`. +Finally, you can safelist whole selectors if any part of that selector matches a regular expression with `safelist.greedy`. ```js const purgecss = await new PurgeCSS().purge({ content: [], // content css: [], // css - whitelistPatternsGreedy: [/red$/] + safelist: { + greedy: [/red$/] + } }) ``` diff --git a/docs/guides/nuxt.md b/docs/guides/nuxt.md index fee7537e..71ef0b66 100644 --- a/docs/guides/nuxt.md +++ b/docs/guides/nuxt.md @@ -120,6 +120,6 @@ npm i --save-dev @fullhuman/postcss-purgecss ```javascript '@fullhuman/postcss-purgecss': { content: ['./pages/**/*.vue', './layouts/**/*.vue', './components/**/*.vue'], - whitelist: ['html', 'body'] + safelist: ['html', 'body'] } ``` diff --git a/docs/guides/vue.md b/docs/guides/vue.md index 0ac85564..154e867f 100644 --- a/docs/guides/vue.md +++ b/docs/guides/vue.md @@ -45,7 +45,6 @@ Below are the PurgeCSS options set by this plugin: const contentWithoutStyleBlocks = content.replace(//gi, '') return contentWithoutStyleBlocks.match(/[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g) || [] }, - whitelist: [], - whitelistPatterns: [ /-(leave|enter|appear)(|-(to|from|active))$/, /^(?!(|.*?:)cursor-move).+-move$/, /^router-link(|-exact)-active$/, /data-v-.*/ ], + safelist: [ /-(leave|enter|appear)(|-(to|from|active))$/, /^(?!(|.*?:)cursor-move).+-move$/, /^router-link(|-exact)-active$/, /data-v-.*/ ], } ``` diff --git a/docs/guides/wordpress.md b/docs/guides/wordpress.md index 08cb319c..804a514c 100644 --- a/docs/guides/wordpress.md +++ b/docs/guides/wordpress.md @@ -3,14 +3,14 @@ title: WordPress | PurgeCSS lang: en-US meta: - name: description - content: PurgeCSS can be used for WordPress development. A module exists to ease the process and provide common whitelist items. + content: PurgeCSS can be used for WordPress development. A module exists to ease the process and provide common safelist items. - name: keywords content: PurgeCSS WordPress purgecss-with-wordpress remove unused css --- # WordPress -If you want to use PurgeCSS with WordPress, you might need to whitelist classes generated by WordPress to avoid them being removed by PurgeCSS. `purgecss-with-wordpress` contains the classes needed to be whitelisted. +If you want to use PurgeCSS with WordPress, you might need to safelist classes generated by WordPress to avoid them being removed by PurgeCSS. `purgecss-with-wordpress` contains the classes needed to be safelisted. ## Installation @@ -30,23 +30,19 @@ import purgecssWordpress from 'purgecss-with-wordpress' const purgeCss = new Purgecss({ content: ['**/*.html'], css: ['**/*.css'], - whitelist: purgecssWordpress.whitelist, - whitelistPatterns: purgecssWordpress.whitelistPatterns + safelist: purgecssWordpress.safelist }) const result = purgecss.purge() ``` -If you have additional classes you want to include in either of the `whitelist` or `whitelistPatterns`, you can include them using the spread operator: +If you have additional classes you want to include, you can include them using the spread operator: ```js { - whitelist: [ - ...purgecssWordpress.whitelist, + safelist: [ + ...purgecssWordpress.safelist, 'red', 'blue', - ], - whitelistPatterns: [ - ...purgecssWordpress.whitelistPatterns, /^red/, /blue$/, ] diff --git a/docs/plugins/webpack.md b/docs/plugins/webpack.md index 0bd70614..1f893c1d 100644 --- a/docs/plugins/webpack.md +++ b/docs/plugins/webpack.md @@ -125,40 +125,26 @@ new PurgecssPlugin({ }) ``` -* #### whitelist, whitelistPatterns, whitelistPatternsChildren, and whitelistPatternsGreedy +* #### safelist -Similar as for the `paths` option, you can also define functions for the following options: +Similar as for the `paths` option, you also can define a function for this option: ```js -function collectWhitelist() { - // do something to collect the whitelist - return ['whitelisted']; -} - -function collectWhitelistPatterns() { - // do something to collect the whitelist - return [/^whitelisted-/]; -} - -function collectWhitelistPatternsChildren() { - // do something to collect the whitelist - return [/^whitelisted-/]; -} - -function collectWhitelistPatternsGreedy() { - // do something to collect the whitelist - return [/^whitelisted-/]; +function collectSafelist() { + return { + standard: ['safelisted', /^safelisted-/], + deep: [/^safelisted-deep-/], + greedy: [/^safelisted-greedy/] + } } // In the webpack configuration -new PurgecssPlugin({ - whitelist: collectWhitelist, - whitelistPatterns: collectWhitelistPatterns, - whitelistPatternsChildren: collectWhitelistPatternsChildren, - whitelistPatternsGreedy: collectWhitelistPatternsGreedy +new PurgeCSSPlugin({ + safelist: collectSafelist }) ``` + * #### rejected When this option is set to `true` all removed selectors are added to the [Stats Data](https://webpack.js.org/api/stats/) as `purged`. diff --git a/docs/whitelisting.md b/docs/safelisting.md similarity index 66% rename from docs/whitelisting.md rename to docs/safelisting.md index 4580b56e..b51da7e7 100644 --- a/docs/whitelisting.md +++ b/docs/safelisting.md @@ -1,26 +1,26 @@ --- -title: Whitelisting | PurgeCSS +title: Safelisting | PurgeCSS lang: en-US meta: - name: description - content: To avoid PurgeCSS to remove unused CSS that you want to keep, you can whitelist selectors. + content: To avoid PurgeCSS to remove unused CSS that you want to keep, you can safelist selectors. - name: keywords content: PurgeCSS remove unused CSS optimization web --- -# Whitelisting +# Safelisting -You can whitelist selectors to stop PurgeCSS from removing them from your CSS. This can be accomplished with the PurgeCSS options `whitelist`, `whitelistPatterns`, `whitelistPatternsChildren`, `whitelistPatternsGreedy`, or directly in your CSS with a special comment. +You can indicate which selectors are safe to leave in the final CSS. This can be accomplished with the PurgeCSS option `safelist`, or directly in your CSS with a special comment. ## Specific selectors -You can whitelist selectors with `whitelist`. +You can add selectors to the safelist with `safelist`. ```javascript const purgecss = new Purgecss({ content: [], // content css: [], // css - whitelist: ['random', 'yep', 'button'] + safelist: ['random', 'yep', 'button'] }) ``` @@ -28,15 +28,17 @@ In the example, the selectors `.random`, `#yep`, `button` will be left in the fi ## Patterns -You can whitelist selectors based on a regular expression with `whitelistPatterns`, `whitelistPatternsChildren`, and `whitelistPatternsGreedy`. +You can safelist selectors based on a regular expression with `safelist.standard`, `safelist.deep`, and `safelist.greedy`. ```javascript const purgecss = new Purgecss({ content: [], // content css: [], // css - whitelistPatterns: [/red$/], - whitelistPatternsChildren: [/blue$/], - whitelistPatternsGreedy: [/yellow$/] + safelist: { + standard: [/red$/], + deep: [/blue$/], + greedy: [/yellow$/] + } }) ``` @@ -46,8 +48,8 @@ Patterns are regular expressions. You can use [regexr](https://regexr.com) to ve ## In the CSS directly -You can whitelist directly in your CSS with a special comment. -Use `/* purgecss ignore */` to whitelist the next rule. +You can safelist directly in your CSS with a special comment. +Use `/* purgecss ignore */` to safelist the next rule. ```css /* purgecss ignore */ @@ -56,7 +58,7 @@ h1 { } ``` -Use `/* purgecss ignore current */` to whitelist the current rule. +Use `/* purgecss ignore current */` to safelist the current rule. ```css h1 { @@ -65,7 +67,7 @@ h1 { } ``` -You can use `/* purgecss start ignore */` and `/* purgecss end ignore */` to whitelist a range of rules. +You can use `/* purgecss start ignore */` and `/* purgecss end ignore */` to safelist a range of rules. ```css /* purgecss start ignore */ diff --git a/packages/gulp-purgecss/src/types/index.ts b/packages/gulp-purgecss/src/types/index.ts index a168b893..1ae4a6b0 100644 --- a/packages/gulp-purgecss/src/types/index.ts +++ b/packages/gulp-purgecss/src/types/index.ts @@ -1,6 +1,6 @@ import { UserDefinedOptions as PurgeCSSUserDefinedOptions } from "../../../purgecss/src/types/index"; export interface UserDefinedOptions - extends Omit { + extends Omit { content: string[]; } diff --git a/packages/purgecss-webpack-plugin/README.md b/packages/purgecss-webpack-plugin/README.md index 2469825c..fe5ac986 100644 --- a/packages/purgecss-webpack-plugin/README.md +++ b/packages/purgecss-webpack-plugin/README.md @@ -25,7 +25,7 @@ npm i purgecss-webpack-plugin -D const path = require('path') const glob = require('glob') const MiniCssExtractPlugin = require('mini-css-extract-plugin') -const PurgecssPlugin = require('purgecss-webpack-plugin') +const PurgeCSSPlugin = require('purgecss-webpack-plugin') const PATHS = { src: path.join(__dirname, 'src') @@ -64,7 +64,7 @@ module.exports = { new MiniCssExtractPlugin({ filename: "[name].css", }), - new PurgecssPlugin({ + new PurgeCSSPlugin({ paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }), }), ] @@ -73,50 +73,13 @@ module.exports = { ### Multiple paths If you need multiple paths use the npm package `glob-all` instead of `glob`, then you can use this syntax: ```javascript -new PurgecssPlugin({ +new PurgeCSSPlugin({ paths: glob.sync([ // ... ]) }), ``` to filter out directories see the glob-all documentation [here](https://www.npmjs.com/package/glob-all#filtering-out-directories). - ### Options @@ -127,21 +90,21 @@ The options available in purgecss [Configuration](https://www.purgecss.com/confi With the webpack plugin, you can specified the content that should be analyzed by purgecss with an array of filename. It can be html, pug, blade, ... files. You can use a module like `glob` or `glob-all` to easily get a list of files. ```js -const PurgecssPlugin = require('purgecss-webpack-plugin') +const PurgeCSSPlugin = require('purgecss-webpack-plugin') const glob = require('glob') const PATHS = { src: path.join(__dirname, 'src') } // In the webpack configuration -new PurgecssPlugin({ +new PurgeCSSPlugin({ paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }) }) ``` If you want to regenerate the paths list on every compilation (e.g. with `--watch`), then you can also pass a function: ```js -new PurgecssPlugin({ +new PurgeCSSPlugin({ paths: () => glob.sync(`${PATHS.src}/**/*`, { nodir: true }) }) ``` @@ -151,42 +114,28 @@ new PurgecssPlugin({ You can specify entrypoints to the purgecss-webpack-plugin with the option only: ```js -new PurgecssPlugin({ +new PurgeCSSPlugin({ paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }), only: ['bundle', 'vendor'] }) ``` -* #### whitelist, whitelistPatterns, whitelistPatternsChildren, and whitelistPatternsGreedy +* #### safelist -Similar as for the `paths` option, you also can define functions for the these options: +Similar as for the `paths` option, you also can define a function for this option: ```js -function collectWhitelist() { - // do something to collect the whitelist - return ['whitelisted']; -} -function collectWhitelistPatterns() { - // do something to collect the whitelist - return [/^whitelisted-/]; -} - -function collectWhitelistPatternsChildren() { - // do something to collect the whitelist - return [/^whitelisted-/]; -} - -function collectWhitelistPatternsGreedy() { - // do something to collect the whitelist - return [/^whitelisted-/]; +function collectSafelist() { + return { + standard: ['safelisted', /^safelisted-/], + deep: [/^safelisted-deep-/], + greedy: [/^safelisted-greedy/] + } } // In the webpack configuration -new PurgecssPlugin({ - whitelist: collectWhitelist, - whitelistPatterns: collectWhitelistPatterns, - whitelistPatternsChildren: collectWhitelistPatternsChildren, - whitelistPatternsGreedy: collectWhitelistPatternsGreedy +new PurgeCSSPlugin({ + safelist: collectSafelist }) ``` diff --git a/packages/purgecss-webpack-plugin/__tests__/cases/path-and-whitelist-functions/expected/styles.css b/packages/purgecss-webpack-plugin/__tests__/cases/path-and-safelist-functions/expected/styles.css similarity index 62% rename from packages/purgecss-webpack-plugin/__tests__/cases/path-and-whitelist-functions/expected/styles.css rename to packages/purgecss-webpack-plugin/__tests__/cases/path-and-safelist-functions/expected/styles.css index 4a1473b6..74f173a3 100644 --- a/packages/purgecss-webpack-plugin/__tests__/cases/path-and-whitelist-functions/expected/styles.css +++ b/packages/purgecss-webpack-plugin/__tests__/cases/path-and-safelist-functions/expected/styles.css @@ -2,15 +2,15 @@ color: red; } -.whitelisted { +.safelisted { color: green; } -.whitelistedPattern { +.safelistedPattern { color: rebeccapurple; } -.whitelistedPatternChildren > p a { +.safelistedPatternChildren > p a { color: orange; } diff --git a/packages/purgecss-webpack-plugin/__tests__/cases/path-and-whitelist-functions/src/content.html b/packages/purgecss-webpack-plugin/__tests__/cases/path-and-safelist-functions/src/content.html similarity index 100% rename from packages/purgecss-webpack-plugin/__tests__/cases/path-and-whitelist-functions/src/content.html rename to packages/purgecss-webpack-plugin/__tests__/cases/path-and-safelist-functions/src/content.html diff --git a/packages/purgecss-webpack-plugin/__tests__/cases/path-and-safelist-functions/src/index.js b/packages/purgecss-webpack-plugin/__tests__/cases/path-and-safelist-functions/src/index.js new file mode 100644 index 00000000..4fe51c72 --- /dev/null +++ b/packages/purgecss-webpack-plugin/__tests__/cases/path-and-safelist-functions/src/index.js @@ -0,0 +1 @@ +import "./style.css"; diff --git a/packages/purgecss-webpack-plugin/__tests__/cases/path-and-whitelist-functions/src/style.css b/packages/purgecss-webpack-plugin/__tests__/cases/path-and-safelist-functions/src/style.css similarity index 67% rename from packages/purgecss-webpack-plugin/__tests__/cases/path-and-whitelist-functions/src/style.css rename to packages/purgecss-webpack-plugin/__tests__/cases/path-and-safelist-functions/src/style.css index a16dad3e..6eee65a3 100644 --- a/packages/purgecss-webpack-plugin/__tests__/cases/path-and-whitelist-functions/src/style.css +++ b/packages/purgecss-webpack-plugin/__tests__/cases/path-and-safelist-functions/src/style.css @@ -6,15 +6,15 @@ color: blue; } -.whitelisted { +.safelisted { color: green; } -.whitelistedPattern { +.safelistedPattern { color: rebeccapurple; } -.whitelistedPatternChildren > p a { +.safelistedPatternChildren > p a { color: orange; } diff --git a/packages/purgecss-webpack-plugin/__tests__/cases/path-and-whitelist-functions/webpack.config.js b/packages/purgecss-webpack-plugin/__tests__/cases/path-and-safelist-functions/webpack.config.js similarity index 87% rename from packages/purgecss-webpack-plugin/__tests__/cases/path-and-whitelist-functions/webpack.config.js rename to packages/purgecss-webpack-plugin/__tests__/cases/path-and-safelist-functions/webpack.config.js index c6569d69..b42fd71c 100644 --- a/packages/purgecss-webpack-plugin/__tests__/cases/path-and-whitelist-functions/webpack.config.js +++ b/packages/purgecss-webpack-plugin/__tests__/cases/path-and-safelist-functions/webpack.config.js @@ -41,9 +41,9 @@ module.exports = { paths: () => glob.sync(`${PATHS.src}/*`), safelist: () => { return { - standard: ["whitelisted", /^whitelistedPat/], - deep: [/^whitelistedPatternChildren/], - greedy: [/^whitelistedPatternGreedy/], + standard: ["safelisted", /^safelistedPat/], + deep: [/^safelistedPatternChildren/], + greedy: [/^safelistedPatternGreedy/], }; }, extractors: [ diff --git a/packages/purgecss-webpack-plugin/__tests__/cases/path-and-whitelist-functions/src/index.js b/packages/purgecss-webpack-plugin/__tests__/cases/path-and-whitelist-functions/src/index.js deleted file mode 100644 index cab743ad..00000000 --- a/packages/purgecss-webpack-plugin/__tests__/cases/path-and-whitelist-functions/src/index.js +++ /dev/null @@ -1 +0,0 @@ -import './style.css' diff --git a/packages/purgecss-webpack-plugin/__tests__/cases/simple-with-exclusion/expected/styles.css b/packages/purgecss-webpack-plugin/__tests__/cases/simple-with-exclusion/expected/styles.css index 3ca96dce..11fc3e1a 100644 --- a/packages/purgecss-webpack-plugin/__tests__/cases/simple-with-exclusion/expected/styles.css +++ b/packages/purgecss-webpack-plugin/__tests__/cases/simple-with-exclusion/expected/styles.css @@ -6,7 +6,7 @@ color: blue; } -.whitelisted { +.safelisted { color: green; } diff --git a/packages/purgecss-webpack-plugin/__tests__/cases/simple-with-exclusion/src/style_that_we_want_to_purge.css b/packages/purgecss-webpack-plugin/__tests__/cases/simple-with-exclusion/src/style_that_we_want_to_purge.css index 065927db..e2d156dd 100644 --- a/packages/purgecss-webpack-plugin/__tests__/cases/simple-with-exclusion/src/style_that_we_want_to_purge.css +++ b/packages/purgecss-webpack-plugin/__tests__/cases/simple-with-exclusion/src/style_that_we_want_to_purge.css @@ -6,7 +6,7 @@ color: blue; } -.whitelisted { +.safelisted { color: green; } diff --git a/packages/purgecss-webpack-plugin/__tests__/cases/simple-with-exclusion/webpack.config.js b/packages/purgecss-webpack-plugin/__tests__/cases/simple-with-exclusion/webpack.config.js index 8a2c8751..0571262c 100644 --- a/packages/purgecss-webpack-plugin/__tests__/cases/simple-with-exclusion/webpack.config.js +++ b/packages/purgecss-webpack-plugin/__tests__/cases/simple-with-exclusion/webpack.config.js @@ -42,7 +42,7 @@ module.exports = { new PurgecssPlugin({ paths: glob.sync(`${PATHS.src}/*`), styleExtensions: [".css"], - safelist: ["whitelisted"], + safelist: ["safelisted"], only: ["bundle"], extractors: [ { diff --git a/packages/purgecss-webpack-plugin/__tests__/cases/simple/expected/styles.css b/packages/purgecss-webpack-plugin/__tests__/cases/simple/expected/styles.css index ffac9135..88f614e7 100644 --- a/packages/purgecss-webpack-plugin/__tests__/cases/simple/expected/styles.css +++ b/packages/purgecss-webpack-plugin/__tests__/cases/simple/expected/styles.css @@ -2,7 +2,7 @@ color: red; } -.whitelisted { +.safelisted { color: green; } diff --git a/packages/purgecss-webpack-plugin/__tests__/cases/simple/src/style.css b/packages/purgecss-webpack-plugin/__tests__/cases/simple/src/style.css index 065927db..e2d156dd 100644 --- a/packages/purgecss-webpack-plugin/__tests__/cases/simple/src/style.css +++ b/packages/purgecss-webpack-plugin/__tests__/cases/simple/src/style.css @@ -6,7 +6,7 @@ color: blue; } -.whitelisted { +.safelisted { color: green; } diff --git a/packages/purgecss-webpack-plugin/__tests__/cases/simple/webpack.config.js b/packages/purgecss-webpack-plugin/__tests__/cases/simple/webpack.config.js index 2a47b7e1..965d143d 100644 --- a/packages/purgecss-webpack-plugin/__tests__/cases/simple/webpack.config.js +++ b/packages/purgecss-webpack-plugin/__tests__/cases/simple/webpack.config.js @@ -42,7 +42,7 @@ module.exports = { }), new PurgecssPlugin({ paths: glob.sync(`${PATHS.src}/*`), - safelist: ["whitelisted"], + safelist: ["safelisted"], extractors: [ { extractor: customExtractor, diff --git a/packages/purgecss-webpack-plugin/__tests__/index.test.ts b/packages/purgecss-webpack-plugin/__tests__/index.test.ts index 26482567..50189e0c 100644 --- a/packages/purgecss-webpack-plugin/__tests__/index.test.ts +++ b/packages/purgecss-webpack-plugin/__tests__/index.test.ts @@ -34,7 +34,7 @@ describe("Webpack integration", () => { }); const cases: string[] = [ - "path-and-whitelist-functions", + "path-and-safelist-functions", "simple", "simple-with-exclusion", ]; diff --git a/packages/purgecss-with-wordpress/README.md b/packages/purgecss-with-wordpress/README.md index fc9d9109..11bc47c3 100644 --- a/packages/purgecss-with-wordpress/README.md +++ b/packages/purgecss-with-wordpress/README.md @@ -24,21 +24,21 @@ import purgecssWordpress from 'purgecss-with-wordpress' const purgeCSSResults = await new PurgeCSS().purge({ content: ['**/*.html'], css: ['**/*.css'], - whitelist: purgecssWordpress.whitelist, - whitelistPatterns: purgecssWordpress.whitelistPatterns + safelist: purgecssWordpress.safelist, + safelistPatterns: purgecssWordpress.safelistPatterns }) ``` -If you have additional classes you want to include in either of the `whitelist` or `whitelistPatterns`, you can include them using the spread operator: +If you have additional classes you want to include in either of the `safelist` or `safelistPatterns`, you can include them using the spread operator: ```js -whitelist: [ - ...purgecssWordpress.whitelist, +safelist: [ + ...purgecssWordpress.safelist, 'red', 'blue', ], -whitelistPatterns: [ - ...purgecssWordpress.whitelistPatterns, +safelistPatterns: [ + ...purgecssWordpress.safelistPatterns, /^red/, /blue$/, ] diff --git a/packages/purgecss-with-wordpress/index.js b/packages/purgecss-with-wordpress/index.js index 56933f14..47f40988 100644 --- a/packages/purgecss-with-wordpress/index.js +++ b/packages/purgecss-with-wordpress/index.js @@ -1,26 +1,24 @@ module.exports = { - whitelist: [ - 'rtl', - 'home', - 'blog', - 'archive', - 'date', - 'error404', - 'logged-in', - 'admin-bar', - 'no-customize-support', - 'custom-background', - 'wp-custom-logo', - 'alignnone', - 'alignright', - 'alignleft', - 'wp-caption', - 'wp-caption-text', - 'screen-reader-text', - 'comment-list', - 'wp-social-link', - ], - whitelistPatterns: [ + safelist: [ + "rtl", + "home", + "blog", + "archive", + "date", + "error404", + "logged-in", + "admin-bar", + "no-customize-support", + "custom-background", + "wp-custom-logo", + "alignnone", + "alignright", + "alignleft", + "wp-caption", + "wp-caption-text", + "screen-reader-text", + "comment-list", + "wp-social-link", /^search(-.*)?$/, /^(.*)-template(-.*)?$/, /^(.*)?-?single(-.*)?$/, diff --git a/packages/purgecss/README.md b/packages/purgecss/README.md index 48c10de6..aa7d943b 100644 --- a/packages/purgecss/README.md +++ b/packages/purgecss/README.md @@ -32,7 +32,7 @@ You can find the PurgeCSS documentation on [this website](https://purgecss.com). - [Configuration](https://purgecss.com/configuration.html) - [Command Line Interface](https://purgecss.com/CLI.html) - [Programmatic API](https://purgecss.com/api.html) -- [Whitelisting](https://purgecss.com/whitelisting.html) +- [Whitelisting](https://purgecss.com/safelisting.html) - [Extractors](https://purgecss.com/extractors.html) - [Comparison](https://purgecss.com/comparison.html) diff --git a/packages/purgecss/__tests__/safelist.test.ts b/packages/purgecss/__tests__/safelist.test.ts index 7bf54387..90651e34 100644 --- a/packages/purgecss/__tests__/safelist.test.ts +++ b/packages/purgecss/__tests__/safelist.test.ts @@ -6,8 +6,8 @@ describe("safelist string", () => { let purgedCSS = ""; beforeAll(async () => { const resultsPurge = await new PurgeCSS().purge({ - content: [`${ROOT_TEST_EXAMPLES}safelist/whitelist.html`], - css: [`${ROOT_TEST_EXAMPLES}safelist/whitelist.css`], + content: [`${ROOT_TEST_EXAMPLES}safelist/safelist.html`], + css: [`${ROOT_TEST_EXAMPLES}safelist/safelist.css`], safelist: ["random", "h1", "yep", "button"], }); purgedCSS = resultsPurge[0].css; @@ -22,8 +22,8 @@ describe("safelist regular expression", () => { let purgedCSS: string; beforeAll(async () => { const resultsPurge = await new PurgeCSS().purge({ - content: [`${ROOT_TEST_EXAMPLES}safelist/whitelist.html`], - css: [`${ROOT_TEST_EXAMPLES}safelist/whitelist.css`], + content: [`${ROOT_TEST_EXAMPLES}safelist/safelist.html`], + css: [`${ROOT_TEST_EXAMPLES}safelist/safelist.css`], safelist: [/nav-/, /data-v-.*/], }); purgedCSS = resultsPurge[0].css; @@ -38,8 +38,8 @@ describe("safelist option: standard", () => { let purgedCSS: string; beforeAll(async () => { const resultsPurge = await new PurgeCSS().purge({ - content: [`${ROOT_TEST_EXAMPLES}safelist/whitelist.html`], - css: [`${ROOT_TEST_EXAMPLES}safelist/whitelist.css`], + content: [`${ROOT_TEST_EXAMPLES}safelist/safelist.html`], + css: [`${ROOT_TEST_EXAMPLES}safelist/safelist.css`], safelist: { standard: ["random", "h1", "yep", "button", /nav-/, /data-v-.*/], }, @@ -69,9 +69,9 @@ describe("safelist option: deep", () => { beforeAll(async () => { const resultsPurge = await new PurgeCSS().purge({ content: [ - `${ROOT_TEST_EXAMPLES}safelist/whitelist_patterns_children.html`, + `${ROOT_TEST_EXAMPLES}safelist/safelist_patterns_children.html`, ], - css: [`${ROOT_TEST_EXAMPLES}safelist/whitelist_patterns_children.css`], + css: [`${ROOT_TEST_EXAMPLES}safelist/safelist_patterns_children.css`], safelist: { deep: [/^card$/], }, @@ -96,8 +96,8 @@ describe("safelist option: greedy", () => { let purgedCSS: string; beforeAll(async () => { const resultsPurge = await new PurgeCSS().purge({ - content: [`${ROOT_TEST_EXAMPLES}safelist/whitelist_patterns_greedy.html`], - css: [`${ROOT_TEST_EXAMPLES}safelist/whitelist_patterns_greedy.css`], + content: [`${ROOT_TEST_EXAMPLES}safelist/safelist_patterns_greedy.html`], + css: [`${ROOT_TEST_EXAMPLES}safelist/safelist_patterns_greedy.css`], safelist: { greedy: [/data-v-.*/], }, diff --git a/packages/purgecss/__tests__/test_examples/safelist/whitelist.css b/packages/purgecss/__tests__/test_examples/safelist/safelist.css similarity index 100% rename from packages/purgecss/__tests__/test_examples/safelist/whitelist.css rename to packages/purgecss/__tests__/test_examples/safelist/safelist.css diff --git a/packages/purgecss/__tests__/test_examples/safelist/whitelist.html b/packages/purgecss/__tests__/test_examples/safelist/safelist.html similarity index 100% rename from packages/purgecss/__tests__/test_examples/safelist/whitelist.html rename to packages/purgecss/__tests__/test_examples/safelist/safelist.html diff --git a/packages/purgecss/__tests__/test_examples/safelist/whitelist_patterns_children.css b/packages/purgecss/__tests__/test_examples/safelist/safelist_patterns_children.css similarity index 100% rename from packages/purgecss/__tests__/test_examples/safelist/whitelist_patterns_children.css rename to packages/purgecss/__tests__/test_examples/safelist/safelist_patterns_children.css diff --git a/packages/purgecss/__tests__/test_examples/safelist/whitelist_patterns_children.html b/packages/purgecss/__tests__/test_examples/safelist/safelist_patterns_children.html similarity index 100% rename from packages/purgecss/__tests__/test_examples/safelist/whitelist_patterns_children.html rename to packages/purgecss/__tests__/test_examples/safelist/safelist_patterns_children.html diff --git a/packages/purgecss/__tests__/test_examples/safelist/whitelist_patterns_greedy.css b/packages/purgecss/__tests__/test_examples/safelist/safelist_patterns_greedy.css similarity index 100% rename from packages/purgecss/__tests__/test_examples/safelist/whitelist_patterns_greedy.css rename to packages/purgecss/__tests__/test_examples/safelist/safelist_patterns_greedy.css diff --git a/packages/purgecss/__tests__/test_examples/safelist/whitelist_patterns_greedy.html b/packages/purgecss/__tests__/test_examples/safelist/safelist_patterns_greedy.html similarity index 100% rename from packages/purgecss/__tests__/test_examples/safelist/whitelist_patterns_greedy.html rename to packages/purgecss/__tests__/test_examples/safelist/safelist_patterns_greedy.html diff --git a/packages/purgecss/bin/purgecss b/packages/purgecss/bin/purgecss.js similarity index 53% rename from packages/purgecss/bin/purgecss rename to packages/purgecss/bin/purgecss.js index dad60e5e..cd544fd5 100755 --- a/packages/purgecss/bin/purgecss +++ b/packages/purgecss/bin/purgecss.js @@ -1,30 +1,45 @@ #!/usr/bin/env node -const program = require('commander'); -const fs = require('fs'); -const { default: PurgeCSS, defaultOptions, setOptions } = require('../lib/purgecss') +const program = require("commander"); +const fs = require("fs"); +const { + default: PurgeCSS, + defaultOptions, + setOptions, +} = require("../lib/purgecss"); function getList(list) { - return list.split(',') + return list.split(","); } async function writeCSSToFile(filePath, css) { try { await fs.promises.writeFile(filePath, css); - } catch(err) { + } catch (err) { console.error(err.message); } } program - .usage('--css --content [options]') - .option('-con, --content ', 'glob of content files (comma separated)', getList) - .option('-css, --css ', 'glob of css files (comma separated)', getList) - .option('-c, --config ', 'path to the configuration file') - .option('-o, --output ', 'file path directory to write purged css files to') - .option('-font, --font-face', 'option to remove unused font-faces') - .option('-keyframes, --keyframes', 'option to remove unused keyframes') - .option('-rejected, --rejected', 'option to output rejected selectors') - .option('-w, --whitelist ', 'list of classes that should not be removed (comma separated)', getList); + .usage("--css --content [options]") + .option( + "-con, --content ", + "glob of content files (comma separated)", + getList + ) + .option("-css, --css ", "glob of css files (comma separated)", getList) + .option("-c, --config ", "path to the configuration file") + .option( + "-o, --output ", + "file path directory to write purged css files to" + ) + .option("-font, --font-face", "option to remove unused font-faces") + .option("-keyframes, --keyframes", "option to remove unused keyframes") + .option("-rejected, --rejected", "option to output rejected selectors") + .option( + "-s, --safellist ", + "list of classes that should not be removed (comma separated)", + getList + ); program.parse(process.argv); @@ -34,7 +49,7 @@ if (!program.config && !(program.content && program.css)) { program.help(); } -(async() => { +(async () => { // if the config file is present, use it // other options specified will override let options = defaultOptions; @@ -47,22 +62,16 @@ if (!program.config && !(program.content && program.css)) { if (program.keyframes) options.keyframes = program.keyframes; if (program.rejected) options.rejected = program.rejected; if (program.variables) options.variables = program.variables; - if (program.whitelist) options.whitelist = program.whitelist; - - // if (!options.css) { - // options.css = [{ - // raw: stdInCSS - // }] - // } + if (program.safelist) options.safelist = program.safelist; const purged = await new PurgeCSS().purge(options); const output = options.output || program.output; // output results in specified directory if (output) { - if (purged.length === 1 && output.endsWith('.css')) { - await writeCSSToFile(output, purged[0].css) - return + if (purged.length === 1 && output.endsWith(".css")) { + await writeCSSToFile(output, purged[0].css); + return; } for (const purgedResult of purged) { @@ -72,6 +81,4 @@ if (!program.config && !(program.content && program.css)) { } else { console.log(JSON.stringify(purged)); } - -})() - +})(); diff --git a/packages/purgecss/package.json b/packages/purgecss/package.json index 5105389c..fe054b22 100644 --- a/packages/purgecss/package.json +++ b/packages/purgecss/package.json @@ -21,7 +21,7 @@ "module": "./lib/purgecss.esm.js", "types": "./lib/purgecss.d.ts", "bin": { - "purgecss": "bin/purgecss" + "purgecss": "bin/purgecss.js" }, "directories": { "lib": "lib", diff --git a/packages/vue-cli-plugin-purgecss/README.md b/packages/vue-cli-plugin-purgecss/README.md index a0713ab9..12d5ea3a 100644 --- a/packages/vue-cli-plugin-purgecss/README.md +++ b/packages/vue-cli-plugin-purgecss/README.md @@ -33,8 +33,7 @@ Below are the PurgeCSS options set by this plugin: const contentWithoutStyleBlocks = content.replace(//gi, '') return contentWithoutStyleBlocks.match(/[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g) || [] }, - whitelist: [], - whitelistPatterns: [ /-(leave|enter|appear)(|-(to|from|active))$/, /^(?!(|.*?:)cursor-move).+-move$/, /^router-link(|-exact)-active$/, /data-v-.*/ ], + safelist: [ /-(leave|enter|appear)(|-(to|from|active))$/, /^(?!(|.*?:)cursor-move).+-move$/, /^router-link(|-exact)-active$/, /data-v-.*/ ], } ```