From a0879ca0850a8273900e8db5dfea60ba8e632665 Mon Sep 17 00:00:00 2001
From: nkzawa <naoyuki.kanezawa@gmail.com>
Date: Tue, 20 Dec 2016 04:19:09 +0900
Subject: [PATCH] support pseudo-classes and pseudo-elements

---
 lib/style-transform.js          | 19 ++++++++++++++++++-
 test/fixtures/transform.css     | 20 ++++++++++++++++++++
 test/fixtures/transform.out.css |  2 +-
 3 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/lib/style-transform.js b/lib/style-transform.js
index 8ba779ea..4fbdc5ca 100644
--- a/lib/style-transform.js
+++ b/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) {
diff --git a/test/fixtures/transform.css b/test/fixtures/transform.css
index 1a1ac046..4c68ea14 100644
--- a/test/fixtures/transform.css
+++ b/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 }
diff --git a/test/fixtures/transform.out.css b/test/fixtures/transform.out.css
index 0e624a3b..47bed657 100644
--- a/test/fixtures/transform.out.css
+++ b/test/fixtures/transform.out.css
@@ -1 +1 @@
-p {color: blue}p[data-jsx="woot"] {color: red;}p[data-jsx="woot"]{color: red}*[data-jsx="woot"] {color: blue;}[href="woot"][data-jsx="woot"] {color: red;}p[data-jsx="woot"] a[data-jsx="woot"] span[data-jsx="woot"] {color: red;}p[data-jsx="woot"] span {background: blue}p[data-jsx="woot"] a[title="'w ' '  t'"][data-jsx="woot"] {margin: auto}p[data-jsx="woot"] span:not(.test) {color: green}p[data-jsx="woot"],h1[data-jsx="woot"] {color: blue;-webkit-animation-name:woothahaha;-moz-animation-name:woothahaha;animation-name:woothahaha;-webkit-animation-delay:woot100ms;-moz-animation-delay:woot100ms;animation-delay:woot100ms;}@-webkit-keyframes woothahaha {from { top: 0 }to { top: 100 }}@-moz-keyframes woothahaha {from { top: 0 }to { top: 100 }}@keyframes woothahaha {from { top: 0 }to { top: 100 }}@media (min-width: 500px) {.test[data-jsx="woot"] {color: red;}}
+p {color: blue}p[data-jsx="woot"] {color: red;}p[data-jsx="woot"]{color: red}*[data-jsx="woot"] {color: blue;}[href="woot"][data-jsx="woot"] {color: red;}p[data-jsx="woot"] a[data-jsx="woot"] span[data-jsx="woot"] {color: red;}p[data-jsx="woot"] span {background: blue}p[data-jsx="woot"] a[title="'w ' '  t'"][data-jsx="woot"] {margin: auto}p[data-jsx="woot"] span:not(.test) {color: green}p[data-jsx="woot"],h1[data-jsx="woot"] {color: blue;-webkit-animation-name:woothahaha;-moz-animation-name:woothahaha;animation-name:woothahaha;-webkit-animation-delay:woot100ms;-moz-animation-delay:woot100ms;animation-delay:woot100ms;}p[data-jsx="woot"]:hover {color: red;}p[data-jsx="woot"]::before {color: red;}[data-jsx="woot"]:hover {color: red;}[data-jsx="woot"]::before {color: red;}[data-jsx="woot"]:hover p[data-jsx="woot"] {color: red;}@-webkit-keyframes woothahaha {from { top: 0 }to { top: 100 }}@-moz-keyframes woothahaha {from { top: 0 }to { top: 100 }}@keyframes woothahaha {from { top: 0 }to { top: 100 }}@media (min-width: 500px) {.test[data-jsx="woot"] {color: red;}}