purgecss-whitelister - npm Package Compare versions

Comparing version 1.1.3 to 1.2.0

index.js

@@ -5,31 +5,53 @@ const listSelectors = require('list-css-selectors');
 const cssWhat = require('css-what');
-const glob = require('glob');
+const attrs = ['equals', 'start', 'end', 'element', 'hyphen', 'any', 'not'];
 
-function makeWhitelist(filenames) {
-  filenames = sanitizeArgs(filenames);
-  if (!filenames.length) return [];
 
+/*
+  This function parses css file(s) for their selectors,
+  and massages those selectors into plain text words
+  so that Purgecss can successfully whitelist them.
+
+  Examples
+  --------
+  .some-class         => some-class
+  #some-id            => some-id
+  [an-attribute]      => an-attribute
+  [data-test='hello'] => data-test, hello
+
+  Arguments:
+    * `filenames` - An array of strings representing file names
+    * `list` - For testing purposes only, not officially part
+               of the API. You can manually pass a list of selectors
+               and avoid having `makeWhitelist` read file data.
+*/
+function makeWhitelist(filenames, list) {
+  filenames = !list && sanitizeArgs(filenames);
+  if (!filenames.length && !list) return [];
+
   const selectorErrors = [];
-  const selectors = listSelectors(filenames);
+  const selectors = list || listSelectors(filenames);
   const whitelist = selectors.map(selector => {
-    let name;
+    let what = [];
 
     try {
-      const what = cssWhat(selector);
-      name = what[0].map(obj => {
-        if (obj.type.includes('pseudo')) return;
-        if (obj.type === 'tag') return obj.name;
-        return obj.value || obj.name;
-      });
-    } catch (e) {
-      selectorErrors.push(selector);
+      what = cssWhat(selector);
+    } catch(e) {
+      selectorErrors.push({ selector, e });
     }
 
-    return name && name.filter(Boolean);
-  }).filter(Boolean);
+    return what.map(arr => extractNames(arr));
+  });
 
   if (selectorErrors.length) {
-    console.log('\n\nErrors with the following selectors:');
-    selectorErrors.forEach(selector => console.log(`  ${selector}`));
-    console.log('\n\n');
+    console.log(`\n\nErrors with the following selectors (${selectorErrors.length}):`);
+    console.log('----------------------------------------');
+
+    selectorErrors.forEach(({ selector, e }) => {
+      console.log('Selector:', selector);
+      console.log('Associated error:');
+      console.log(e);
+      console.log('');
+      console.log('*** *** *** *** ***');
+      console.log('');
+    });
   }
@@ -41,2 +63,49 @@
 
+/*
+  Iterates through an array from the results of `cssWhat`
+  and returns names without selector characters such as [., #, >], etc.
+
+  https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
+  List of psuedo selectors that can contain other selectors:
+    * host
+    * host-context
+    * not
+*/
+function extractNames(arr) {
+  const newArray = arr.map(({ type, name, value, action, data }) => {
+    if (type === 'attribute') {
+      // #id
+      if (name === 'id') return value;
+
+      // .class
+      if (name === 'class') return value;
+
+      // [attr]
+      if (action === 'exists') return name;
+
+      /*
+        Example        Action
+        -----------------------
+        [attr=val]  | 'equals'
+        [attr^=val] | 'start'
+        [attr$=val] | 'end'
+        [attr~=val] | 'element'
+        [attr|=val] | 'hyphen'
+        [attr*=val] | 'any'
+        [attr!=val] | 'not'
+      */
+      if (attrs.includes(action)) return [name, value];
+    }
+
+    // tag
+    if (type === 'tag') return name;
+
+    // Pseudo stuffs - recursion!
+    // Type might be 'pseudo' or 'pseudo-element'.
+    if (type.includes('pseudo') && Array.isArray(data)) return data.map(arr => extractNames(arr));
+  });
+
+  return flattenArray(newArray).filter(Boolean);
+}
+
 module.exports = makeWhitelist;

package.json

 {
   "name": "purgecss-whitelister",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "description": "A utility for creating whitelists of CSS selectors for use with Purgecss.",
@@ -17,5 +17,4 @@ "main": "index.js",
     "css-what": "^2.1.0",
-    "glob": "^7.1.2",
-    "list-css-selectors": "^1.2.2"
+    "list-css-selectors": "^1.3.0"
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

7012

increased by39.35%

Dependency count

2

decreased by-33.33%

Lines of code

90

increased by172.73%

Dependency changes

• - Removedglob@^7.1.2

• Updatedlist-css-selectors@^1.3.0