diff --git a/src/lib/custom-style.html b/src/lib/custom-style.html index 6e18dfbaca..56c5c8168c 100644 --- a/src/lib/custom-style.html +++ b/src/lib/custom-style.html @@ -133,31 +133,37 @@ // used applied element from HTMLImports polyfill or this var e = this.__appliedElement || this; if (this.include) { - e.textContent += styleUtil.cssFromModules(this.include); + e.textContent = styleUtil.cssFromModules(this.include, true) + + e.textContent; } - var rules = styleUtil.rulesForStyle(e); - styleUtil.forEachStyleRule(rules, function(rule) { - styleTransformer.documentRule(rule); - }); + if (e.textContent) { + styleUtil.forEachStyleRule(styleUtil.rulesForStyle(e), function(rule) { + styleTransformer.documentRule(rule); + }); + this._applyCustomProperties(e); + } + }, + + _applyCustomProperties: function(element) { this._computeStyleProperties(); var props = this._styleProperties; - e.textContent = styleUtil.toCssText(rules, function(rule) { - var css = rule.cssText = rule.parsedCssText; - if (rule.propertyInfo && rule.propertyInfo.cssText) { - // remove property assignments - // so next function isn't confused - // NOTE: we have 3 categories of css: - // (1) normal properties, - // (2) custom property assignments (--foo: red;), - // (3) custom property usage: border: var(--foo); @apply(--foo); - // In elements, 1 and 3 are separated for efficiency; here they - // are not and this makes this case unique. - css = cssParse.removeCustomPropAssignment(css); - // replace with reified properties, scenario is same as mixin - rule.cssText = propertyUtils.valueForProperties(css, props); - } + var rules = styleUtil.rulesForStyle(element); + element.textContent = styleUtil.toCssText(rules, function(rule) { + var css = rule.cssText = rule.parsedCssText; + if (rule.propertyInfo && rule.propertyInfo.cssText) { + // remove property assignments + // so next function isn't confused + // NOTE: we have 3 categories of css: + // (1) normal properties, + // (2) custom property assignments (--foo: red;), + // (3) custom property usage: border: var(--foo); @apply(--foo); + // In elements, 1 and 3 are separated for efficiency; here they + // are not and this makes this case unique. + css = cssParse.removeCustomPropAssignment(css); + // replace with reified properties, scenario is same as mixin + rule.cssText = propertyUtils.valueForProperties(css, props); } - ); + }); } }); diff --git a/src/lib/style-util.html b/src/lib/style-util.html index 84dc1377c8..cc5c47a99c 100644 --- a/src/lib/style-util.html +++ b/src/lib/style-util.html @@ -49,6 +49,9 @@ }, forEachStyleRule: function(node, callback) { + if (!node) { + return; + } var s = node.parsedSelector; var skipRules = false; if (node.type === this.ruleTypes.STYLE_RULE) { @@ -82,22 +85,25 @@ return style; }, - cssFromModules: function(moduleIds) { + cssFromModules: function(moduleIds, warnIfNotFound) { var modules = moduleIds.trim().split(' '); var cssText = ''; for (var i=0; i < modules.length; i++) { - cssText += this.cssFromModule(modules[i]); + cssText += this.cssFromModule(modules[i], warnIfNotFound); } return cssText; }, // returns cssText of styles in a given module; also un-applies any // styles that apply to the document. - cssFromModule: function(moduleId) { + cssFromModule: function(moduleId, warnIfNotFound) { var m = Polymer.DomModule.import(moduleId); if (m && !m._cssText) { m._cssText = this._cssFromElement(m); } + if (!m && warnIfNotFound) { + console.warn('Could not find style data in module named', moduleId); + } return m && m._cssText || ''; }, @@ -118,14 +124,14 @@ // we don't want this, so we remove them here. if (e.localName === 'style') { var include = e.getAttribute(this.INCLUDE_ATTR); + // now support module refs on 'styling' elements + if (include) { + cssText += this.cssFromModules(include, true); + } // get style element applied to main doc via HTMLImports polyfill e = e.__appliedElement || e; e.parentNode.removeChild(e); cssText += this.resolveCss(e.textContent, element.ownerDocument); - // now support module refs on 'styling' elements - if (include) { - cssText += this.cssFromModules(include); - } // it's an import, assume this is a text file of css content. // TODO(sorvell): plan is to deprecate this way to get styles; // remember to add deprecation warning when this is done. diff --git a/test/unit/custom-style-import.html b/test/unit/custom-style-import.html index 695fec676f..05804bd80a 100644 --- a/test/unit/custom-style-import.html +++ b/test/unit/custom-style-import.html @@ -8,6 +8,16 @@ + + + + - + \ No newline at end of file diff --git a/test/unit/custom-style.html b/test/unit/custom-style.html index c3de5ff349..8fe3d9a9bc 100644 --- a/test/unit/custom-style.html +++ b/test/unit/custom-style.html @@ -105,6 +105,12 @@ border: var(--after); } + +
italic
@@ -274,6 +280,57 @@ assertComputed(xFoo.$.deep, '6px'); }); + test('imperative custom style', function() { + var style = document.createElement('style', 'custom-style'); + style.textContent = '.zonk { border: 13px solid tomato;}'; + var d = document.createElement('div'); + d.classList.add('zonk'); + document.body.appendChild(d); + document.body.appendChild(style); + CustomElements.takeRecords(); + assertComputed(d, '13px'); + document.body.removeChild(d); + document.body.removeChild(style); + }); + + test('imperative custom style with include', function() { + var style = document.createElement('style', 'custom-style'); + style.include = 'shared-style2'; + var d = document.createElement('div'); + d.classList.add('zazz'); + document.body.appendChild(d); + document.body.appendChild(style); + CustomElements.takeRecords(); + assertComputed(d, '16px'); + document.body.removeChild(d); + document.body.removeChild(style); + }); + + test('imperative custom style with non-existent include', function() { + var s1 = document.createElement('style', 'custom-style'); + s1.include = 'does-not-exist'; + var style = document.createElement('style', 'custom-style'); + style.textContent = '.ziz { border: 14px solid tomato;}'; + var d = document.createElement('div'); + d.classList.add('ziz'); + document.body.appendChild(d); + document.body.appendChild(s1) + document.body.appendChild(style); + CustomElements.takeRecords(); + assertComputed(d, '14px'); + document.body.removeChild(d); + document.body.removeChild(s1); + document.body.removeChild(style); + }); + + test('include style data applied before textContent', function() { + var d = document.createElement('div'); + d.classList.add('zazz'); + document.body.appendChild(d); + assertComputed(d, '20px'); + document.body.removeChild(d); + }); + }); diff --git a/test/unit/styling-remote-elements.html b/test/unit/styling-remote-elements.html index dee3c08229..a09431af21 100644 --- a/test/unit/styling-remote-elements.html +++ b/test/unit/styling-remote-elements.html @@ -90,7 +90,11 @@