@aofl/html-webpack-purify-internal-css-plugin - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0-alpha.0

modules/purify-internal-style/index.js

 const parse5 = require('parse5');
-const purify = require('purify-css');
+const Purgecss = require('purgecss');
 
@@ -39,3 +39,22 @@ /**
 
+/**
+ *
+ * @param {Object} docFrag
+ * @return {Array}
+ */
+const getScriptNodes = async (docFrag) => {
+  const scripts = [];
 
+  await traverseChildNodes(docFrag, (docFrag) => {
+    if (docFrag.tagName === 'script' && Array.isArray(docFrag.childNodes)) {
+      for (let i = 0; i < docFrag.childNodes.length; i++) {
+        scripts.push(docFrag.childNodes[i]);
+      }
+    }
+  });
+
+  return scripts;
+};
+
+
 /**
@@ -47,3 +66,3 @@ *
  */
-const getStlyeFreeHtml = (document, styles) => {
+const getStyleFreeHtml = (document, styles, scripts) => {
   for (let i = 0; i < styles.length; i++) {
@@ -55,2 +74,8 @@ const style = styles[i];
 
+  for (let i = 0; i < scripts.length; i++) {
+    const script = scripts[i];
+    script.cachedValue = script.value;
+    script.value = '';
+  }
+
   const stlyeFreeHtml = parse5.serialize(document);
@@ -64,2 +89,7 @@
 
+  for (let i = 0; i < scripts.length; i++) {
+    const script = scripts[i];
+    script.value = script.cachedValue;
+    delete script.cachedValue;
+  }
   return stlyeFreeHtml;
@@ -74,11 +104,24 @@ };
  */
-const purifyStyles = async (html, styles, options) => {
+const purifyStyles = (html, styles, options) => {
   for (let i = 0; i < styles.length; i++) {
     const style = styles[i];
-    await new Promise((resolve) => {
-      purify(html, style.value, options, (purified) => {
-        style.value = purified;
-        resolve();
-      });
+
+    const purgeCss = new Purgecss({
+      content: [
+        {
+          raw: html,
+          extension: 'html'
+        }
+      ],
+      css: [
+        {
+          raw: style.value
+        }
+      ],
+      rejected: false,
+      ...options
     });
+
+    const purged = purgeCss.purge();
+    style.value = purged[0].css;
   }
@@ -90,4 +133,5 @@ };
   getStyleNodes,
-  getStlyeFreeHtml,
-  purifyStyles
+  getStyleFreeHtml,
+  purifyStyles,
+  getScriptNodes
 };

modules/purifycss-plugin/index.js

 const parse5 = require('parse5');
-const {getStyleNodes, purifyStyles, getStlyeFreeHtml} = require('../purify-internal-style');
+const {getStyleNodes, purifyStyles, getStyleFreeHtml, getScriptNodes} = require('../purify-internal-style');
 const defaultsDeep = require('lodash.defaultsdeep');
@@ -60,16 +60,20 @@
           .tapAsync(PurifycssPlugin.name + '#befeHtmlGeneration', async (data, cb) => {
-            const document = parse5.parse(data.html);
+            try {
+              if (this.options.level !== 'none') {
+                const document = parse5.parse(data.html);
+                const styles = await getStyleNodes(document);
+                const scripts = await getScriptNodes(document);
+                let html = '';
+                if (this.options.level === 'auto') {
+                  html = getStyleFreeHtml(document, styles, scripts);
+                }
 
-            if (this.options.level !== 'none') {
-              const styles = await getStyleNodes(document);
-              let html = '';
-              if (this.options.level === 'auto') {
-                html = getStlyeFreeHtml(document, styles);
+                await purifyStyles(html, styles, this.options.purgeCss);
+                data.html = parse5.serialize(document);
               }
 
-              await purifyStyles(html, styles, this.options.purifyCSS);
+              cb(null, data);
+            } catch (e) {
+              cb(e);
             }
-
-            data.html = parse5.serialize(document);
-            cb(null, data);
           });
@@ -76,0 +80,0 @@ });

package.json

 {
   "name": "@aofl/html-webpack-purify-internal-css-plugin",
-  "version": "2.0.0",
+  "version": "2.1.0-alpha.0",
   "description": "",
@@ -20,7 +20,7 @@ "main": "index.js",
   "dependencies": {
-    "lodash.defaultsdeep": "^4.6.0",
+    "lodash.defaultsdeep": "^4.6.1",
     "parse5": "^5.1.0",
-    "purify-css": "^1.2.5"
+    "purgecss": "^1.3.0"
   },
-  "gitHead": "91b9b3074f7031a51ce7afa9b542ff5dcfd64997"
+  "gitHead": "f3d01e2e352befb804bfb3549b9e9cb861099541"
 }

README.md

@@ -35,3 +35,3 @@ # @aofl/html-webpack-purify-internal-css-plugin
 | --------- | --------------------------------------------------------------------------------------------------------------- |
-| auto      | This is the default behavior. It prunes unused css rules based on the generated html and the purifyCss options. |
+| auto      | This is the default behavior. It prunes unused css rules based on the generated html and the purgeCss options. |
 | whitelist | Only keep whitelisted rules.                                                                                    |
@@ -53,15 +53,6 @@ | all       | Prune everything                                                                                                |
 
-### purifyCSS
+### purgeCss
 
-[PurifyCSS options](https://github.com/purifycss/purifycss#properties-of-options-object)
+[purgeCss options](https://www.npmjs.com/package/purgecss)
 
-| Option    | Description                                                                                                                                                                                                                                  | default      |
-| --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
-| minify    | Set to true to minify                                                                                                                                                                                                                        | false        |
-| output    | Filepath to write purified CSS to. Returns raw string                                                                                                                                                                                        | Always false |
-| info      | Logs info on how much CSS was removed                                                                                                                                                                                                        | false        |
-| rejected  | Logs the CSS rules that were removed if `true`                                                                                                                                                                                               | false        |
-| 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) | []           |
-
-<!-- prettier-ignore -->
 ```javascript
@@ -73,8 +64,9 @@ module.export = {
       level: process.env.NODE_ENV === 'development'? 'none': 'auto',
-      purifyCSS: {
-        info: true,
-        rejected: true,
-        whitelist: [
-          '.♥'
-        ]
+      purgeCss: {
+        whitelist?: Array<string>,
+        whitelistPatterns?: Array<RegExp>,
+        whitelistPatternsChildren?: Array<RegExp>,
+        keyframes?: boolean,
+        fontFace?: boolean,
+        rejected?: boolean
       }
@@ -81,0 +73,0 @@ })

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Lines of code

188

increased by29.66%

Worsened metrics

Total package byte prevSize

8733

decreased by-7.86%

Number of low quality alerts

2

increased by100%

Number of lines in readme file

74

decreased by-9.76%

Dependency changes

• + Addedpurgecss@^1.3.0

• + Addedansi-regex@4.1.1(transitive)

• + Addedansi-styles@3.2.1(transitive)

• + Addedcamelcase@5.3.1(transitive)

• + Addedcliui@5.0.0(transitive)

• + Addedcolor-convert@1.9.3(transitive)

• + Addedcolor-name@1.1.3(transitive)

• + Addedcssesc@3.0.0(transitive)

• + Addedemoji-regex@7.0.3(transitive)

• + Addedfind-up@3.0.0(transitive)

• + Addedget-caller-file@2.0.5(transitive)

• + Addedlocate-path@3.0.0(transitive)

• + Addedp-limit@2.3.0(transitive)

• + Addedp-locate@3.0.0(transitive)

• + Addedp-try@2.2.0(transitive)

• + Addedpicocolors@0.2.1(transitive)

• + Addedpostcss@7.0.39(transitive)

• + Addedpostcss-selector-parser@6.1.2(transitive)

• + Addedpurgecss@1.4.2(transitive)

• + Addedrequire-main-filename@2.0.0(transitive)

• + Addedstring-width@3.1.0(transitive)

• + Addedstrip-ansi@5.2.0(transitive)

• + Addedutil-deprecate@1.0.2(transitive)

• + Addedwrap-ansi@5.1.0(transitive)

• + Addedy18n@4.0.3(transitive)

• + Addedyargs@14.2.3(transitive)

• + Addedyargs-parser@15.0.3(transitive)

• - Removedpurify-css@^1.2.5

• - Removedansi-regex@2.1.13.0.1(transitive)

• - Removedatob@2.1.2(transitive)

• - Removedcamelcase@4.1.0(transitive)

• - Removedclean-css@4.2.4(transitive)

• - Removedcliui@3.2.0(transitive)

• - Removedcode-point-at@1.1.0(transitive)

• - Removedconvert-source-map@0.3.5(transitive)

• - Removedcross-spawn@5.1.0(transitive)

• - Removedcss@2.2.4(transitive)

• - Removeddecode-uri-component@0.2.2(transitive)

• - Removederror-ex@1.3.2(transitive)

• - Removedexeca@0.7.0(transitive)

• - Removedfind-up@2.1.0(transitive)

• - Removedfunction-bind@1.1.2(transitive)

• - Removedget-caller-file@1.0.3(transitive)

• - Removedget-stream@3.0.0(transitive)

• - Removedgraceful-fs@4.2.11(transitive)

• - Removedhasown@2.0.2(transitive)

• - Removedhosted-git-info@2.8.9(transitive)

• - Removedinvert-kv@1.0.0(transitive)

• - Removedis-arrayish@0.2.1(transitive)

• - Removedis-core-module@2.16.1(transitive)

• - Removedis-fullwidth-code-point@1.0.0(transitive)

• - Removedis-stream@1.1.0(transitive)

• - Removedisexe@2.0.0(transitive)

• - Removedlcid@1.0.0(transitive)

• - Removedload-json-file@2.0.0(transitive)

• - Removedlocate-path@2.0.0(transitive)

• - Removedlru-cache@4.1.5(transitive)

• - Removedmem@1.1.0(transitive)

• - Removedmimic-fn@1.2.0(transitive)

• - Removednormalize-package-data@2.5.0(transitive)

• - Removednpm-run-path@2.0.2(transitive)

• - Removednumber-is-nan@1.0.1(transitive)

• - Removedos-locale@2.1.0(transitive)

• - Removedp-finally@1.0.0(transitive)

• - Removedp-limit@1.3.0(transitive)

• - Removedp-locate@2.0.0(transitive)

• - Removedp-try@1.0.0(transitive)

• - Removedparse-json@2.2.0(transitive)

• - Removedpath-key@2.0.1(transitive)

• - Removedpath-parse@1.0.7(transitive)

• - Removedpath-type@2.0.0(transitive)

• - Removedpify@2.3.0(transitive)

• - Removedpseudomap@1.0.2(transitive)

• - Removedpurify-css@1.2.6(transitive)

• - Removedread-pkg@2.0.0(transitive)

• - Removedread-pkg-up@2.0.0(transitive)

• - Removedrequire-main-filename@1.0.1(transitive)

• - Removedresolve@1.22.10(transitive)

• - Removedresolve-url@0.2.1(transitive)

• - Removedrework@1.0.1(transitive)

• - Removedsemver@5.7.2(transitive)

• - Removedshebang-command@1.2.0(transitive)

• - Removedshebang-regex@1.0.0(transitive)

• - Removedsignal-exit@3.0.7(transitive)

• - Removedsource-map-resolve@0.5.3(transitive)

• - Removedsource-map-url@0.4.1(transitive)

• - Removedspdx-correct@3.2.0(transitive)

• - Removedspdx-exceptions@2.5.0(transitive)

• - Removedspdx-expression-parse@3.0.1(transitive)

• - Removedspdx-license-ids@3.0.21(transitive)

• - Removedstring-width@1.0.22.1.1(transitive)

• - Removedstrip-ansi@3.0.14.0.0(transitive)

• - Removedstrip-bom@3.0.0(transitive)

• - Removedstrip-eof@1.0.0(transitive)

• - Removedsupports-preserve-symlinks-flag@1.0.0(transitive)

• - Removeduglify-js@3.19.3(transitive)

• - Removedurix@0.1.0(transitive)

• - Removedvalidate-npm-package-license@3.0.4(transitive)

• - Removedwhich@1.3.1(transitive)

• - Removedwrap-ansi@2.1.0(transitive)

• - Removedy18n@3.2.2(transitive)

• - Removedyallist@2.1.2(transitive)

• - Removedyargs@8.0.2(transitive)

• - Removedyargs-parser@7.0.0(transitive)

• Updatedlodash.defaultsdeep@^4.6.1