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.
Polymer · Feb 22, 2017 · 2315547 · 2315547
1 parent 6fc567f
commit 2315547
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 0 deletions.
diff --git 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
@@ -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
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+    <script>
+      Polymer = {
+        preserveStyleIncludes: true
+      }
+    </script>
+    <link rel="import" href="../../polymer.html">
+  </head>
+  <body>
+    <dom-module id="include4">
+      <template>
+        <style>
+          :host {
+            color: red;
+          }
+        </style>
+        <style></style>
+      </template>
+    </dom-module>
+
+    <dom-module id="include2">
+      <template>
+        <style>
+          :host {
+            margin: 10px;
+          }
+        </style>
+        <style></style>
+      </template>
+    </dom-module>
+
+    <dom-module id="include1">
+      <template>
+        <style include="include2 include3">
+          :host {
+            padding: 10px;
+          }
+        </style>
+        <style include="include4"></style>
+      </template>
+    </dom-module>
+
+    <dom-module id="x-test">
+      <template>
+        <style include="include1">
+          :host {
+            display: block;
+            background: green;
+          }
+
+        </style>
+        <div>Hi</div>
+      </template>
+      <script>
+      Polymer({
+        is: 'x-test'
+      });
+      </script>
+    </dom-module>
+
+
+    <x-test></x-test>
+  </body>
+</html>