From 4f727e1d4baae873fb491f36a6c738ac7d25920b Mon Sep 17 00:00:00 2001
From: Steve Orvell <steve@orvellia.com>
Date: Wed, 20 Nov 2013 19:24:23 -0800
Subject: [PATCH] make :host(.bar:not(.zot)) > #wahtever { work
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

supports 1 level of nesting inside the :host(…)
---
 src/ShadowCSS.js                  |  4 +++-
 test/html/styling/colon-host.html | 14 ++++++++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/ShadowCSS.js b/src/ShadowCSS.js
index 316fda6..f3569e3 100644
--- a/src/ShadowCSS.js
+++ b/src/ShadowCSS.js
@@ -521,7 +521,9 @@ var hostRuleRe = /@host[^{]*{(([^}]*?{[^{]*?}[\s\S]*?)+)}/gim,
     // note: :host pre-processed to -shadowcsshost.
     polyfillHost = '-shadowcsshost',
     cssColonHostRe = new RegExp('(' + polyfillHost +
-        ')(?:\\(([^)]*)\\))?([^,{]*)', 'gim'),
+        ')(?:\\((' +
+        '(?:\\([^)(]*\\)|[^)(]*)+?' +
+        ')\\))?([^,{]*)', 'gim'),
     selectorReSuffix = '([>\\s~+\[.,{:][\\s\\S]*)?$',
     hostRe = /@host/gim,
     colonHostRe = /\:host/gim,
diff --git a/test/html/styling/colon-host.html b/test/html/styling/colon-host.html
index d126395..2808a5e 100644
--- a/test/html/styling/colon-host.html
+++ b/test/html/styling/colon-host.html
@@ -28,6 +28,10 @@
         background: black;
         color: white;
       }
+
+      :host(.opened:not(.animating)) div {
+        background: blue;
+      }
     </style>
     <div>background</div>
   </template>
@@ -162,6 +166,11 @@ <h4>Expected: 20px padding</h4>
   <h4>Expected: blue background</h4>
      <a href="#" is="x-anchor">Test Link</a>
   </div>
+  <h4>Expected: blue background</h4>
+     <div class="opened">
+       <x-foo class="foo3"></x-foo>
+     </div>
+  </div>
   
   <script>
     document.addEventListener('WebComponentsReady', function() {
@@ -173,6 +182,11 @@ <h4>Expected: blue background</h4>
       chai.assert.equal(getComputedStyle(foo2).backgroundColor, 'rgb(0, 0, 0)',
         ':host styles are conditionally applied (backgroundColor)');  
 
+      var foo3 = document.querySelector('x-foo.foo3');
+      var foo3div = foo3.querySelector('div');
+      chai.assert.equal(getComputedStyle(foo3div).backgroundColor, 'rgb(0, 0, 255)',
+        ':host(:not()) styles are applied (backgroundColor)');  
+
       var scope = document.querySelector('x-scope');
       chai.assert.equal(getComputedStyle(scope).backgroundColor, 'rgb(255, 0, 0)',
         ':host styles matching :scope  are applied (backgroundColor)');