Feat/upgrade purgecss to version 4 (#63)

* feat(loader): upgrade purgecss to version 3 (#62)

BREAKING CHANGE: various whitelist options replaced with safelist

Co-authored-by: Scott McIntyre <scott.mcintyre@aexp.com>

* chore(update-eslint): upgrade eslint related deps and update test format

* feat(purgecss): upgrade to purgecss4

* feat(purgecss): add to gitignore

* feat(purgecss): fix gitignore

---------

Co-authored-by: Scott McIntyre <scott.mcintyre@aexp.com>

.gitignore

@@ -5,3 +5,4 @@
 node_modules
 test-results
 .jest-cache
+*.tgz

.npmrc

@@ -0,0 +1 @@
+registry=https://registry.npmjs.org

README.md

@@ -59,7 +59,7 @@ module.exports = {
             loader: '@americanexpress/purgecss-loader',
             options: {
               paths: [path.join(somePath, 'src/**/*.{js,jsx}')],
-              whitelistPatternsChildren: [/:global$/],
+              safelist: [/:global$/],
             },
           },
         ],
@@ -82,9 +82,8 @@ the example to express this loader's compatibility.
 | `fontFace`   | `boolean` (default: false) see [options]     | `false`  |
 | `keyframes`  | `boolean` (default: false) see [options] | `false`  |
 | `variables`  | `boolean` (default: false) see [options] | `false`  |
-| `whitelist`  | `string[]` see [options]| `false`  |
-| `whitelistPatterns` | `Array<RegExp>` see [options] | `false`  |
-| `whitelistPatternsChildren` | `Array<RegExp>` see [options] | `false`  |
+| `safelist`  | `UserDefinedSafelist` see [options]| `false`  |
+| `blocklist` | `StringRegExpArray` see [options] | `false`  |
 
 [glob]: https://github.com/isaacs/node-glob
 [purgecss extractors]: https://www.purgecss.com/extractors.html

__fixtures__/root.scss

@@ -16,7 +16,7 @@
   .isUsed {
     color: #00175a;
   }
-  .notUsed {
+  .isNotUsed {
     color: red;
   }
 }

__tests__/loader.spec.js

@@ -19,9 +19,10 @@ const findIndex = require('lodash/findIndex');
 
 jest.setTimeout(10000);
 
-const runLoader = ({
-  entry = '../__fixtures__/Component.jsx',
-} = {}) => {
+const runLoader = (safelist,
+  {
+    entry = '../__fixtures__/Component.jsx',
+  } = {}) => {
   const compiler = webpack({
     context: __dirname,
     entry,
@@ -57,7 +58,7 @@ const runLoader = ({
               loader: path.resolve(__dirname, '../loader.js'),
               options: {
                 paths: [path.resolve(__dirname, '../__fixtures__/**/*.{js,jsx}')],
-                whitelistPatternsChildren: [/:global$/],
+                safelist,
               },
             },
           ],
@@ -95,9 +96,9 @@ describe('purgecss loader', () => {
     expect(output).toContain('isUsed');
   });
 
-  it('should not strip global classes', async () => {
+  it('should not strip safelisted global classes', async () => {
     const componentEntry = { entry: '../__fixtures__/ComponentGlobal.jsx' };
-    const stats = await runLoader(componentEntry);
+    const stats = await runLoader([/:global$/], componentEntry);
     const { modules } = stats.toJson();
     const cssModuleIndex = findIndex(modules, {
       name: '../node_modules/css-loader??ref--5-1!../loader.js??ref--5-2!../__fixtures__/root.scss',

loader.js

@@ -17,8 +17,8 @@ const { getOptions } = require('loader-utils');
 
 module.exports = async function purifyCssLoader(content) {
   const {
-    paths, extractors = [], fontFace = false, keyframes = false, variables = false, whitelist,
-    whitelistPatterns, whitelistPatternsChildren,
+    paths, extractors = [], fontFace = false, keyframes = false, variables = false, safelist = [],
+    blocklist = [],
   } = getOptions(this);
   const purgeCSSResult = await new PurgeCSS().purge({
     content: paths,
@@ -27,9 +27,8 @@ module.exports = async function purifyCssLoader(content) {
     fontFace,
     keyframes,
     variables,
-    whitelist,
-    whitelistPatterns,
-    whitelistPatternsChildren,
+    safelist,
+    blocklist,
   });
   return purgeCSSResult[0].css;
 };