diff --git a/src/ShadowCSS.js b/src/ShadowCSS.js index 5eda7d6..c38dd91 100644 --- a/src/ShadowCSS.js +++ b/src/ShadowCSS.js @@ -154,6 +154,7 @@ var ShadowCSS = { } this.shimPolyfillDirectives(def.rootStyles, name); this.applyShimming(def.scopeStyles, name); + this.applyPolyfillRules(def.rootStyles, name); } }, // Shim styles to be placed inside a shadowRoot. @@ -162,6 +163,7 @@ var ShadowCSS = { shimShadowDOMStyling: function(styles, name) { this.shimPolyfillDirectives(styles, name); this.applyShimming(styles, name); + this.applyPolyfillRules(styles, name); }, registerDefinition: function(root, name, extendsName) { var def = this.registry[name] = { @@ -383,6 +385,23 @@ var ShadowCSS = { rule.style.cssText.replace(/content:[^;]*;/g, ''); } return properties; + }, + applyPolyfillRules: function(styles, name) { + if (styles) { + var cssText = ''; + Array.prototype.forEach.call(styles, function(s) { + cssText += this.extractPolyfillRules(s.textContent, name) + '\n\n'; + }, this); + } + addCssToDocument(cssText); + }, + extractPolyfillRules: function(cssText, name) { + var r = '', l = 0, matches, selector; + while (matches = cssPolyfillRuleCommentRe.exec(cssText)) { + rule = matches[1].slice(0, -1).replace(hostRe, name); + r += rule + '\n\n'; + } + return r; } }; @@ -392,6 +411,7 @@ var hostRuleRe = /@host[^{]*{(([^}]*?{[^{]*?}[\s\S]*?)+)}/gim, hostFixableRe = /^[.\[:]/, cssCommentRe = /\/\*[^*]*\*+([^/*][^*]*\*+)*\//gim, cssPolyfillCommentRe = /\/\*\s*@polyfill ([^*]*\*+([^/*][^*]*\*+)*\/)([^{]*?){/gim, + cssPolyfillRuleCommentRe = /\/\*\s@polyfill-rule([^*]*\*+([^/*][^*]*\*+)*)\//gim, cssPseudoRe = /::(x-[^\s{,(]*)/gim, selectorReSuffix = '([>\\s~+\[.,{:][\\s\\S]*)?$', hostRe = /@host/gim; diff --git a/test/html/styling/polyfill-rule.html b/test/html/styling/polyfill-rule.html new file mode 100644 index 0000000..bd9a2da --- /dev/null +++ b/test/html/styling/polyfill-rule.html @@ -0,0 +1,46 @@ + + + + + Psuedo scoped styling + + + + + + + +
red?
+
+ + + + + + + + diff --git a/test/js/tests.js b/test/js/tests.js index 24fedc5..8139452 100644 --- a/test/js/tests.js +++ b/test/js/tests.js @@ -29,6 +29,7 @@ htmlSuite('styling', function() { htmlTest('html/styling/pseudos.html'); htmlTest('html/styling/pseudos.html?shadow'); htmlTest('html/styling/polyfill-directive.html'); + htmlTest('html/styling/polyfill-rule.html'); }); htmlSuite('Library Cooperation', function() {