Skip to content

Commit

Permalink
Fixes #1900: adds basic support for host-context(...)
Browse files Browse the repository at this point in the history
  • Loading branch information
Steven Orvell committed Jun 24, 2015
1 parent 9dd38f6 commit 7d6e6a7
Show file tree
Hide file tree
Showing 3 changed files with 52 additions and 8 deletions.
33 changes: 26 additions & 7 deletions src/lib/style-transformer.html
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
* ::shadow, /deep/: processed simimlar to ::content
* :host-context(...): NOT SUPPORTED
* :host-context(...): scopeName..., ... scopeName
*/
var api = {
Expand Down Expand Up @@ -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;
});
Expand All @@ -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) {
Expand Down Expand Up @@ -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 = '.';
Expand Down
18 changes: 18 additions & 0 deletions test/unit/styling-scoped-elements.html
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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>
Expand Down
9 changes: 8 additions & 1 deletion test/unit/styling-scoped.html
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down Expand Up @@ -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'));
Expand Down

0 comments on commit 7d6e6a7

Please sign in to comment.