Fixes #1900: adds basic support for host-context(...)

Author: Steven Orvell

src/lib/style-transformer.html

@@ -36,7 +36,7 @@
 
      * ::shadow, /deep/: processed simimlar to ::content
 
-     * :host-context(...): NOT SUPPORTED
+     * :host-context(...): scopeName..., ... scopeName
 
     */
     var api = {
@@ -156,28 +156,42 @@
 
       _transformComplexSelector: function(selector, scope, hostScope) {
         var stop = false;
+        var hostContext = false;
         var self = this;
         selector = selector.replace(SIMPLE_SELECTOR_SEP, function(m, c, s) {
           if (!stop) {
             var o = self._transformCompoundSelector(s, c, scope, hostScope);
-            if (o.stop) {
-              stop = true;
-            }
+            stop = stop || o.stop;
+            hostContext = hostContext || o.hostContext;
             c = o.combinator;
             s = o.value;  
           } else {
             s = s.replace(SCOPE_JUMP, ' ');
           }
           return c + s;
         });
+        if (hostContext) {
+          selector = selector.replace(CONTEXT_MARKER_MATCH, 
+            function(m, pre, paren, post) {
+              return pre + paren + ' ' + hostScope + post + 
+                COMPLEX_SELECTOR_SEP + ' ' + pre + hostScope + paren + post;
+             });
+        }
         return selector;
       },
 
       _transformCompoundSelector: function(selector, combinator, scope, hostScope) {
         // replace :host with host scoping class
         var jumpIndex = selector.search(SCOPE_JUMP);
-        if (selector.indexOf(HOST) >=0) {
-          // :host(...)
+        var hostContext = false;
+        if (selector.indexOf(HOST_CONTEXT) >=0) {
+          // :host-context(...) -> ##...##
+          selector = selector.replace(HOST_CONTEXT_PAREN, function(m, host, paren) {
+            hostContext = true;
+            return CONTEXT_MARKER + paren + CONTEXT_MARKER;
+          });
+        } else if (selector.indexOf(HOST) >=0) {
+          // :host(...) -> scopeName...
           selector = selector.replace(HOST_PAREN, function(m, host, paren) {
             return hostScope + paren;
           });
@@ -199,7 +213,8 @@
           selector = selector.replace(SCOPE_JUMP, ' ');
           stop = true;
         }
-        return {value: selector, combinator: combinator, stop: stop};
+        return {value: selector, combinator: combinator, stop: stop, 
+          hostContext: hostContext};
       },
 
       _transformSimpleSelector: function(selector, scope) {
@@ -243,6 +258,10 @@
     // :host(:not([selected]), more general support requires
     // parsing which seems like overkill
     var HOST_PAREN = /(\:host)(?:\(((?:\([^)(]*\)|[^)(]*)+?)\))/g;
+    var HOST_CONTEXT = ':host-context';
+    var HOST_CONTEXT_PAREN = /(\:host-context)(?:\(((?:\([^)(]*\)|[^)(]*)+?)\))/g;
+    var CONTEXT_MARKER = '##';
+    var CONTEXT_MARKER_MATCH = /(.*)##(.*)##(.*)/;
     var CONTENT = '::content';
     var SCOPE_JUMP = /\:\:content|\:\:shadow|\/deep\//;
     var CSS_CLASS_PREFIX = '.';

test/unit/styling-scoped-elements.html

@@ -1,3 +1,19 @@
+<dom-module id="x-gchild">
+  <style>
+    :host-context(.wide) #target {
+      border: 10px solid orange;
+    }
+  </style>
+  <template>
+    <div id="target">x-gchild</div>
+  </template>
+</dom-module>
+<script>
+  Polymer({
+    is: 'x-gchild'
+  });
+</script>
+
 <dom-module id="x-child">
   <template>
     <div id="simple">simple</div>
@@ -6,6 +22,8 @@
     <div id="media">media</div>
     <div id="shadow" class="shadowTarget">shadowTarget</div>
     <div id="deep" class="deepTarget">deepTarget</div>
+    <x-gchild id="gchild1"></x-gchild>
+    <x-gchild id="gchild2" class="wide"></x-gchild>
   </template>
 </dom-module>
 <script>

test/unit/styling-scoped.html

@@ -64,6 +64,13 @@
 
   });
 
+  test(':host-context(...)', function() {
+    assertComputed(styled.$.child.$.gchild1.$.target, '0px');
+    assertComputed(styled.$.child.$.gchild2.$.target, '10px');
+    assertComputed(styledWide.$.child.$.gchild1.$.target, '10px');
+    assertComputed(styledWide.$.child.$.gchild2.$.target, '10px');
+  });
+
   test('scoped selectors, simple and complex', function() {
     assertComputed(styled.$.simple, '3px');
     assertComputed(styled.$.complex1, '4px');
@@ -192,7 +199,7 @@
 
       test('styles shimmed in registration order', function() {
         var s$ = document.head.querySelectorAll('style[scope]');
-        var expected = ['x-child2', 'x-styled', 'x-button', 'x-dynamic-scope'];
+        var expected = ['x-gchild', 'x-child2', 'x-styled', 'x-button', 'x-dynamic-scope'];
         var actual = [];
         for (var i=0; i<s$.length; i++) {
           actual.push(s$[i].getAttribute('scope'));