Pseudo classes

manual-testing.js

@@ -43,7 +43,7 @@ redPerfume.atomize({
                 <h1 class="cool cat nice wow">
                   Meow
                 </h1>
-                <h2 class="dog">
+                <h2 class="dog hover">
                   Woof
                 </h2>
               </body>

src/css.js

@@ -44,6 +44,35 @@ function removeIdenticalProperties (classMap) {
   return classMap;
 }
 
+/**
+ * Updats the map of selectors to their atomized classes.
+ *
+ * @param  {object} classMap          The class map object used by the HTML/JSON
+ * @param  {Array}  selectors         Parsed CSS selectors
+ * @param  {string} encodedClassName  Encoded class name
+ * @return {object}                   Returns the classMap object
+ */
+function updateClassMap (classMap, selectors, encodedClassName) {
+  /* A selector looks like:
+    [{
+      type: 'attribute',
+      name: 'class',
+      action: 'element',
+      value: 'cow',
+      ignoreCase: false,
+      namespace: null,
+      original: '.cow'
+      }]
+    */
+  selectors.forEach(function (selector) {
+    let originalSelectorName = selector[0].original;
+
+    classMap[originalSelectorName] = classMap[originalSelectorName] || [];
+    classMap[originalSelectorName].push(encodedClassName);
+  });
+  return classMap;
+}
+
 /**
  * Ensure that non-classes are not atomized,
  * but still included in the output.
@@ -176,23 +205,14 @@ const css = function (options, input, uglify) {
         */
         let encodedClassName = encodeClassName(options, declaration);
 
-        /* A selector looks like:
-          [{
-            type: 'attribute',
-            name: 'class',
-            action: 'element',
-            value: 'cow',
-            ignoreCase: false,
-            namespace: null,
-            original: '.cow'
-            }]
-          */
-        rule.selectors.forEach(function (selector) {
-          let originalSelectorName = selector[0].original;
-
-          classMap[originalSelectorName] = classMap[originalSelectorName] || [];
-          classMap[originalSelectorName].push(encodedClassName);
-        });
+        if (rule.selectors[0][1] && rule.selectors[0][1].type && rule.selectors[0][1].type === 'pseudo') {
+          let pseudoName = rule.selectors[0][1].name;
+          // .rp__display__--COLONblock___-HOVER:hover
+          let pseudoClassName = encodedClassName + '___-' + pseudoName.toUpperCase() + ':' + pseudoName;
+          encodedClassName = pseudoClassName;
+        }
+
+        classMap = updateClassMap(classMap, rule.selectors, encodedClassName);
 
         newRules[encodedClassName] = {
           type: 'rule',
@@ -210,21 +230,29 @@ const css = function (options, input, uglify) {
   if (uglify) {
     let index = 0;
     Object.keys(newRules).forEach(function (key) {
-      let result = cssUglifier(index);
+      if (key.startsWith('.')) {
+        let pseudo = '';
+        if (key.includes(':')) {
+          let split = key.split(':');
+          split.shift(0);
+          pseudo = ':' + split.join(':');
+        }
+        let result = cssUglifier(index);
 
-      index = result.index;
+        index = result.index;
 
-      let uglifiedName = result.name;
-      newRules[uglifiedName] = newRules[key];
-      newRules[uglifiedName].selectors[0][0] = uglifiedName;
-      delete newRules[key];
+        let uglifiedName = result.name + pseudo;
+        newRules[uglifiedName] = newRules[key];
+        newRules[uglifiedName].selectors[0][0] = uglifiedName;
+        delete newRules[key];
 
-      Object.keys(classMap).forEach(function (mapKey) {
-        let indexOfKey = classMap[mapKey].indexOf(key);
-        if (indexOfKey !== -1) {
-          classMap[mapKey][indexOfKey] = uglifiedName;
-        }
-      });
+        Object.keys(classMap).forEach(function (mapKey) {
+          let indexOfKey = classMap[mapKey].indexOf(key);
+          if (indexOfKey !== -1) {
+            classMap[mapKey][indexOfKey] = uglifiedName;
+          }
+        });
+      }
     });
   }
 

test/input.css

@@ -2,6 +2,9 @@ h1 {
     background: #F00;
     border: 1px solid #00F;
 }
+h1:hover {
+    background: #00F;
+}
 [attr] {
     text-transform: small-caps;
     overflow: hidden;
@@ -14,6 +17,12 @@ h1 {
     color: #FF0;
     z-index: 2;
 }
+.hover {
+    color: #00F;
+}
+.hover:hover {
+    color: #F00;
+}
 .moo {
     padding: 10px;
     margin: 5px;

test/out.html

@@ -11,7 +11,7 @@
                 <h1 class="cool nice wow rp__font-size__--COLON12px rp__padding__--COLON8px">
                   Meow
                 </h1>
-                <h2 class="rp__font-size__--COLON12px rp__background__--COLON__--OCTOTHORPF00 rp__padding__--COLON8px">
+                <h2 class="rp__color__--COLON__--OCTOTHORP00F rp__font-size__--COLON12px rp__background__--COLON__--OCTOTHORPF00 rp__padding__--COLON8px">
                   Woof
                 </h2>
 

test/out.json

@@ -1,4 +1,10 @@
 {
+  ".hover": [
+    ".rp__color__--COLON__--OCTOTHORP00F"
+  ],
+  ".hover:hover": [
+    ".rp__color__--COLON__--OCTOTHORPF00___-HOVER:hover"
+  ],
   ".moo": [
     ".rp__padding__--COLON10px",
     ".rp__margin__--COLON5px"

test/output.css

@@ -2,6 +2,9 @@ h1 {
   background: #F00;
   border: 1px solid #00F;
 }
+h1:hover {
+  background: #00F;
+}
 [attr] {
   text-transform: small-caps;
   overflow: hidden;
@@ -14,6 +17,12 @@ h1 {
   color: #FF0;
   z-index: 2;
 }
+.rp__color__--COLON__--OCTOTHORP00F {
+  color: #00F;
+}
+.rp__color__--COLON__--OCTOTHORPF00___-HOVER:hover {
+  color: #F00;
+}
 .rp__padding__--COLON10px {
   padding: 10px;
 }

tests/src/css.test.js

@@ -159,6 +159,129 @@ describe('CSS', () => {
             z-index: 2;
           }
         `, 10));
+
+      expect(css(options, input, true).output)
+        .toEqual(testHelpers.trimIndentation(`
+          h1 {
+            background: #F00;
+            border: 1px solid #00F;
+          }
+          [attr] {
+            text-transform: small-caps;
+            overflow: hidden;
+          }
+          [attr="123"] {
+            position: absolute;
+            border-radius: 2px;
+          }
+          #specificity-overkill {
+            color: #FF0;
+            z-index: 2;
+          }
+          .rp__0 {
+            display: block;
+          }
+          .rp__1 {
+            text-align: center;
+          }
+        `, 10));
+    });
+
+    test('Handle pseudo-classes', () => {
+      let input = `
+        .example {
+          display: inline-block;
+          text-align: right;
+        }
+        .example:hover {
+          display: block;
+          text-align: center
+        }
+        .example:active {
+          color: #F00;
+        }
+        .example:visited {
+          color: #00F;
+        }
+        h1:hover {
+          color: #F00;
+        }
+        .cow {
+          background: #F00;
+          color: #00F;
+        }
+        .cow:hover {
+          background: #0F0;
+        }
+      `;
+
+      expect(css(options, input, false).output)
+        .toEqual(testHelpers.trimIndentation(`
+          .rp__display__--COLONinline-block {
+            display: inline-block;
+          }
+          .rp__text-align__--COLONright {
+            text-align: right;
+          }
+          .rp__display__--COLONblock___-HOVER:hover {
+            display: block;
+          }
+          .rp__text-align__--COLONcenter___-HOVER:hover {
+            text-align: center;
+          }
+          .rp__color__--COLON__--OCTOTHORPF00___-ACTIVE:active {
+            color: #F00;
+          }
+          .rp__color__--COLON__--OCTOTHORP00F___-VISITED:visited {
+            color: #00F;
+          }
+          h1:hover {
+            color: #F00;
+          }
+          .rp__background__--COLON__--OCTOTHORPF00 {
+            background: #F00;
+          }
+          .rp__color__--COLON__--OCTOTHORP00F {
+            color: #00F;
+          }
+          .rp__background__--COLON__--OCTOTHORP0F0___-HOVER:hover {
+            background: #0F0;
+          }
+        `, 10));
+
+      expect(css(options, input, true).output)
+        .toEqual(testHelpers.trimIndentation(`
+          h1:hover {
+            color: #F00;
+          }
+          .rp__0 {
+            display: inline-block;
+          }
+          .rp__1 {
+            text-align: right;
+          }
+          .rp__2:hover {
+            display: block;
+          }
+          .rp__3:hover {
+            text-align: center;
+          }
+          .rp__4:active {
+            color: #F00;
+          }
+          .rp__5:visited {
+            color: #00F;
+          }
+          .rp__6 {
+            background: #F00;
+          }
+          .rp__7 {
+            color: #00F;
+          }
+          .rp__8:hover {
+            background: #0F0;
+          }
+        `, 10));
     });
   });
 });