From 2315547e475043bd2116b1094f3b7159b77e747c Mon Sep 17 00:00:00 2001 From: Steven Orvell Date: Wed, 22 Feb 2017 10:03:48 -0800 Subject: [PATCH] Adds a setting `preserveStyleIncludes` which, when used with a shadow dom targeted css build and native custom properties, will copy styles into the Shadow DOM template rather than collapsing them into a single style. This will (1) allow the browser to optimize parsing of shared styles because they remain intact, (2) reduce the size of the css build resources when shared styles are used since they are not pre-collapsed. This option does perform registration runtime work to add included styles to element templates. --- src/lib/style-util.html | 35 ++++++++++++++++ src/standard/styling.html | 3 ++ test/smoke/preserve-include.html | 68 ++++++++++++++++++++++++++++++++ 3 files changed, 106 insertions(+) create mode 100644 test/smoke/preserve-include.html diff --git a/src/lib/style-util.html b/src/lib/style-util.html index 055b0c7ee5..a9456a88f0 100644 --- a/src/lib/style-util.html +++ b/src/lib/style-util.html @@ -223,6 +223,41 @@ return cssText; }, + styleIncludesToTemplate: function(targetTemplate) { + var styles = targetTemplate.content.querySelectorAll('style[include]'); + for (var i=0, s; i < styles.length; i++) { + s = styles[i]; + s.parentNode.insertBefore( + this._includesToFragment(s.getAttribute('include')), s.nextSibling); + } + }, + + _includesToFragment: function(styleIncludes) { + var includeArray = styleIncludes.trim().split(' '); + var frag = document.createDocumentFragment(); + for (var i=0; i < includeArray.length; i++) { + var t = Polymer.DomModule.import(includeArray[i], 'template'); + if (t) { + this._addStylesToFragment(frag, t.content); + } + } + return frag; + }, + + _addStylesToFragment: function(frag, source) { + var s$ = source.querySelectorAll('style'); + for (var i=0, s; i < s$.length; i++) { + s = s$[i]; + if (s.textContent) { + frag.appendChild(s.cloneNode(true)); + } + var include = s.getAttribute('include'); + if (include) { + frag.appendChild(this._includesToFragment(include)); + } + } + }, + isTargetedBuild: function(buildType) { return settings.useNativeShadow ? buildType === 'shadow' : buildType === 'shady'; }, diff --git a/src/standard/styling.html b/src/standard/styling.html index fb2c9e20f4..24fcbc6b3c 100644 --- a/src/standard/styling.html +++ b/src/standard/styling.html @@ -65,6 +65,9 @@ var hasTargetedCssBuild = styleUtil.isTargetedBuild(this.__cssBuild); if (settings.useNativeCSSProperties && this.__cssBuild === 'shadow' && hasTargetedCssBuild) { + if (settings.preserveStyleIncludes) { + styleUtil.styleIncludesToTemplate(this._template); + } return; } this._styles = this._styles || this._collectStyles(); diff --git a/test/smoke/preserve-include.html b/test/smoke/preserve-include.html new file mode 100644 index 0000000000..61c42eb563 --- /dev/null +++ b/test/smoke/preserve-include.html @@ -0,0 +1,68 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +