support pseudo-classes and pseudo-elements (#48)

Author: nkzawa

lib/style-transform.js

@@ -211,6 +211,7 @@
                                 var inGlobal = false
                                 var inSubSelector = false
                                 var inQuotes = false
+                                var inPseudo = false
                                 var quoteChar = null
 
                                 for (var k = 0; k < selector.length; k++) {
@@ -254,6 +255,14 @@
                                           piece += chr
                                           continue
                                         }
+                                      } else if (inPseudo) {
+                                        if (' ' === chr) {
+                                          inPseudo = false
+                                          _line += piece + ' '
+                                          piece = ''
+                                        } else {
+                                          piece += chr
+                                        }
                                       } else {
                                         // potential beginning of :global()
                                         if (chr === ':'
@@ -272,6 +281,11 @@
                                             _line += piece + suffix + ' '
                                             piece = ''
                                           }
+                                        } else if (chr === ':') {
+                                          // pseudo-class or preudo-element
+                                          _line += piece + suffix
+                                          piece = chr
+                                          inPseudo = true
                                         } else {
                                           piece += chr
                                         }
@@ -282,7 +296,10 @@
 
                                 // flush remainder
                                 if (piece.length) {
-                                  _line += piece + suffix
+                                  _line += piece
+                                  if (!inPseudo) {
+                                    _line += suffix
+                                  }
                                 }
 
                                 if (isLast) {

test/fixtures/transform.css

@@ -40,6 +40,26 @@ p, h1 {
   animation-delay: 100ms;
 }
 
+p:hover {
+  color: red;
+}
+
+p::before {
+  color: red;
+}
+
+:hover {
+  color: red;
+}
+
+::before {
+  color: red;
+}
+
+:hover p {
+  color: red;
+}
+
 @keyframes hahaha {
   from { top: 0 }
   to { top: 100 }