From f55541285620dab281aeeba8dfa52ba63bfbdb9b Mon Sep 17 00:00:00 2001 From: Steven Orvell Date: Mon, 27 Feb 2017 15:29:14 -0800 Subject: [PATCH] Fixes #3837. Enable support for obtaining styles via `` inside an element `dom-module`. --- src/mixins/element-mixin.html | 1 + src/utils/style-gather.html | 29 +++++-- test/unit/styling-import-shared-styles.html | 11 +++ test/unit/styling-import.html | 90 +++++++++++++++++++++ test/unit/styling-import1.css | 3 + test/unit/styling-import2.css | 4 + 6 files changed, 133 insertions(+), 5 deletions(-) create mode 100644 test/unit/styling-import-shared-styles.html create mode 100644 test/unit/styling-import.html create mode 100644 test/unit/styling-import1.css create mode 100644 test/unit/styling-import2.css diff --git a/src/mixins/element-mixin.html b/src/mixins/element-mixin.html index 3ea92d4f..e0e86267 100644 --- a/src/mixins/element-mixin.html +++ b/src/mixins/element-mixin.html @@ -308,6 +308,7 @@ Polymer.ElementMixin = Polymer.dedupingMixin(function(base) { function finalizeTemplate(proto, template, is, ext) { // support `include="module-name"` let cssText = Polymer.StyleGather.cssFromElement(template); + cssText += Polymer.StyleGather.cssFromModuleImports(is); if (cssText) { let style = document.createElement('style'); style.textContent = cssText; diff --git a/src/utils/style-gather.html b/src/utils/style-gather.html index 536ee243..c8bd96e5 100644 --- a/src/utils/style-gather.html +++ b/src/utils/style-gather.html @@ -75,11 +75,30 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN e = e.__appliedElement || e; e.parentNode.removeChild(e); cssText += Polymer.ResolveUrl.resolveCss(e.textContent, element.ownerDocument); - // 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. - } else if (e.import && e.import.body) { - cssText += Polymer.ResolveUrl.resolveCss(e.import.body.textContent, e.import); + } else if (e.localName === 'link' && + e.getAttribute('type') === 'css' && e.import) { + cssText += this.cssFromImportTypeCss(e.import); + } + } + } + return cssText; + }, + cssFromImportTypeCss(importDoc) { + // NOTE: polyfill affordance. + // under the HTMLImports polyfill, there will be no 'body', + // but the import pseudo-doc can be used directly. + let container = importDoc.body ? importDoc.body : importDoc; + return Polymer.ResolveUrl.resolveCss(container.textContent, importDoc); + }, + cssFromModuleImports(moduleId) { + let m = importModule(moduleId); + let cssText = ''; + if (m) { + let p$ = m.querySelectorAll('link[type=css]'); + for (let i=0, p; i < p$.length; i++) { + p = p$[i]; + if (p.import) { + cssText += this.cssFromImportTypeCss(p.import); } } } diff --git a/test/unit/styling-import-shared-styles.html b/test/unit/styling-import-shared-styles.html new file mode 100644 index 00000000..f03113e4 --- /dev/null +++ b/test/unit/styling-import-shared-styles.html @@ -0,0 +1,11 @@ + + + + + diff --git a/test/unit/styling-import.html b/test/unit/styling-import.html new file mode 100644 index 00000000..92d74424 --- /dev/null +++ b/test/unit/styling-import.html @@ -0,0 +1,90 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/test/unit/styling-import1.css b/test/unit/styling-import1.css new file mode 100644 index 00000000..21940adc --- /dev/null +++ b/test/unit/styling-import1.css @@ -0,0 +1,3 @@ +#one { + border: 1px solid orange; +} \ No newline at end of file diff --git a/test/unit/styling-import2.css b/test/unit/styling-import2.css new file mode 100644 index 00000000..b0f26a67 --- /dev/null +++ b/test/unit/styling-import2.css @@ -0,0 +1,4 @@ +#two { + display: block; + border: 2px solid brown; +} \ No newline at end of file