Merge pull request #352 from corpulentcoffee/depseudify-via-psp

Use postcss-selector-parser for dePseudify()

package.json

@@ -45,6 +45,7 @@
     "jsdom": "^11.3.0",
     "lodash": "^4.13.1",
     "postcss": "^6.0.14",
+    "postcss-selector-parser": "3.1.1",
     "request": "^2.72.0"
   },
   "devDependencies": {

src/lib.js

@@ -2,6 +2,7 @@
 
 const jsdom = require('./jsdom.js'),
     postcss = require('postcss'),
+    postcssSelectorParser = require('postcss-selector-parser'),
     _ = require('lodash');
 /* Some styles are applied only with user interaction, and therefore its
  *   selectors cannot be used with querySelectorAll.
@@ -12,7 +13,7 @@ const dePseudify = (function () {
             /* link */
             ':link', ':visited',
             /* user action */
-            ':hover', ':active', ':focus',
+            ':hover', ':active', ':focus', ':focus-within',
             /* UI element states */
             ':enabled', ':disabled', ':checked', ':indeterminate',
             /* form validation */
@@ -28,11 +29,21 @@ const dePseudify = (function () {
              */
             '::?-(?:moz|ms|webkit|o)-[a-z0-9-]+'
         ],
-        // Actual regex is of the format: /([^\\])(:hover|:focus)+/
-        pseudosRegex = new RegExp('([^\\\\])(' + ignoredPseudos.join('|') + ')+');
+        // Actual regex is of the format: /^(:hover|:focus|...)$/i
+        pseudosRegex = new RegExp('^(' + ignoredPseudos.join('|') + ')$', 'i');
+
+    function transform (selectors) {
+        selectors.walkPseudos((selector) => {
+            if (pseudosRegex.test(selector.value)) {
+                selector.remove();
+            }
+        });
+    }
+
+    const processor = postcssSelectorParser(transform);
 
     return function (selector) {
-        return selector.replace(pseudosRegex, '$1');
+        return processor.processSync(selector);
     };
 }());
 
@@ -233,3 +244,5 @@ module.exports = function uncss(pages, css, ignore) {
         }];
     });
 };
+
+module.exports.dePseudify = dePseudify;

tests/depseudify.js

@@ -0,0 +1,41 @@
+'use strict';
+
+const expect = require('chai').expect,
+    { dePseudify } = require('../src/lib');
+
+describe('dePseudify() function', () => {
+    const expected = {
+        '.clearfix::before': '.clearfix',
+        '.clearfix:before': '.clearfix',
+        '.sm\\:hover\\:font-hairline': '.sm\\:hover\\:font-hairline',
+        '.sm\\:hover\\:font-hairline:hover': '.sm\\:hover\\:font-hairline',
+        '.sm\\:hover\\:font-hairline\\:hover': '.sm\\:hover\\:font-hairline\\:hover',
+        '.sm\\:hover\\:font-hairline\\:valid': '.sm\\:hover\\:font-hairline\\:valid',
+        '.sm\\:valid\\:font-bold:valid': '.sm\\:valid\\:font-bold',
+        ':focus': '',
+        ':root a:hover': ':root a',
+        ':root': ':root',
+        '[data-text="example of :hover pseudo-class"]:hover': '[data-text="example of :hover pseudo-class"]',
+        'a :not(strong):not(span)': 'a :not(strong):not(span)',
+        'a:hover :not(strong):not(span)': 'a :not(strong):not(span)',
+        'a:nth-child(4n)': 'a:nth-child(4n)',
+        'div:FOCUS-WITHIN': 'div',
+        'div:focus-within': 'div',
+        'h5:hover::before': 'h5',
+        'input:checked ~ label': 'input ~ label',
+        'input:checked ~ label:before': 'input ~ label',
+        'input:nth-child(4n):valid': 'input:nth-child(4n)',
+        'li:only-child': 'li:only-child',
+        'p:hover:not(.fancy)': 'p:not(.fancy)',
+        'p:not(.fancy)': 'p:not(.fancy)',
+        'p:not(.fancy):hover': 'p:not(.fancy)'
+    };
+
+    Object.keys(expected).forEach((input) => {
+        const output = expected[input];
+        it(`should convert ${input} to ${output || '(empty)'}`, (done) => {
+            expect(dePseudify(input)).to.equal(output);
+            done();
+        });
+    });
+});