feat(loader): upgrade purgecss version (#9)

* feat(loader): upgrade purgecss version

* chore(license): update license for new files

* test(loader): refactor with async

* fix(packagelock): fix integrity

.gitignore

@@ -1,4 +1,5 @@
 .DS_Store
+.idea
 *.swp
 *.log
 node_modules

README.md

@@ -59,6 +59,7 @@ module.exports = {
             loader: '@americanexpress/purgecss-loader',
             options: {
               paths: [path.join(somePath, 'src/**/*.{js,jsx}')],
+              whitelistPatternsChildren: [/:global$/],
             },
           },
         ],
@@ -78,9 +79,16 @@ the example to express this loader's compatibility.
 |-----------------|-----------------------------------|----------|
 | `paths`         | An array of file [glob] patterns  | `true`   |
 | `extractors`    | An array of [purgecss extractors] | `false`  |
+| `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`  |
 
 [glob]: https://github.com/isaacs/node-glob
 [purgecss extractors]: https://www.purgecss.com/extractors.html
+[options]: https://purgecss.com/configuration.html#options
 
 ## 🗝️ License
 

__fixtures__/ComponentGlobal.jsx

@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) 2020 American Express Travel Related Services Company, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License
+ * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing permissions and limitations under
+ * the License.
+ */
+
+// eslint-disable-next-line import/no-unresolved, import/extensions
+import React from 'react';
+import './root.scss';
+
+export default () => <p className="isUsed">Hello, world</p>;

__fixtures__/root.scss

@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2020 American Express Travel Related Services Company, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License
+ * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing permissions and limitations under
+ * the License.
+ */
+
+:global {
+  .isUsed {
+    color: #00175a;
+  }
+  .notUsed {
+    color: red;
+  }
+}

__tests__/loader.spec.js

@@ -43,7 +43,7 @@ const runLoader = ({
           }],
         },
         {
-          test: /\.css$/,
+          test: /\.s?css$/,
           use: [
             { loader: 'style-loader' },
             {
@@ -57,6 +57,7 @@ const runLoader = ({
               loader: path.resolve(__dirname, '../loader.js'),
               options: {
                 paths: [path.resolve(__dirname, '../__fixtures__/**/*.{js,jsx}')],
+                whitelistPatternsChildren: [/:global$/],
               },
             },
           ],
@@ -83,17 +84,26 @@ const runLoader = ({
 };
 
 describe('purgecss loader', () => {
-  it('should strip unused classes', () => {
-    expect.assertions(2);
-    return runLoader()
-      .then((stats) => {
-        const { modules } = stats.toJson();
-        const cssModuleIndex = findIndex(modules, {
-          name: '../node_modules/css-loader??ref--5-1!../loader.js??ref--5-2!../__fixtures__/styles.css',
-        });
-        const output = modules[cssModuleIndex].source;
-        expect(output).not.toContain('isNotUsed');
-        expect(output).toContain('isUsed');
-      });
+  it('should strip unused classes', async () => {
+    const stats = await runLoader();
+    const { modules } = stats.toJson();
+    const cssModuleIndex = findIndex(modules, {
+      name: '../node_modules/css-loader??ref--5-1!../loader.js??ref--5-2!../__fixtures__/styles.css',
+    });
+    const output = modules[cssModuleIndex].source;
+    expect(output).not.toContain('isNotUsed');
+    expect(output).toContain('isUsed');
+  });
+
+  it('should not strip global classes', async () => {
+    const componentEntry = { entry: '../__fixtures__/ComponentGlobal.jsx' };
+    const stats = await runLoader(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',
+    });
+    const output = modules[cssModuleIndex].source;
+    expect(output).not.toContain('isNotUsed');
+    expect(output).toContain('isUsed');
   });
 });

loader.js

@@ -12,14 +12,24 @@
  * the License.
  */
 
-const PurgeCss = require('purgecss');
+const { PurgeCSS } = require('purgecss');
 const { getOptions } = require('loader-utils');
 
-module.exports = function purifyCssLoader(content) {
-  const { paths, extractors } = getOptions(this);
-  return new PurgeCss({
+module.exports = async function purifyCssLoader(content) {
+  const {
+    paths, extractors = [], fontFace = false, keyframes = false, variables = false, whitelist,
+    whitelistPatterns, whitelistPatternsChildren,
+  } = getOptions(this);
+  const purgeCSSResult = await new PurgeCSS().purge({
     content: paths,
     css: [{ raw: content }],
     extractors,
-  }).purge()[0].css;
+    fontFace,
+    keyframes,
+    variables,
+    whitelist,
+    whitelistPatterns,
+    whitelistPatternsChildren,
+  });
+  return purgeCSSResult[0].css;
 };