Merge pull request #4327 from Polymer/1.x-style-include

1.x style include
Polymer · Feb 23, 2017 · 5d026bd · 5d026bd
2 parents fe535a2 + 20de928
commit 5d026bd
Show file tree

Hide file tree

Showing 6 changed files with 1,203 additions and 0 deletions.
diff --git a/src/lib/style-util.html b/src/lib/style-util.html
@@ -223,6 +223,42 @@
         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);
+        }
+      },
+
+      _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];
+          var include = s.getAttribute('include');
+          if (include) {
+            frag.appendChild(this._includesToFragment(include));
+          }
+          if (s.textContent) {
+            frag.appendChild(s.cloneNode(true));
+          }
+
+        }
+      },
+
       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/runner.html b/test/runner.html
@@ -58,6 +58,7 @@
       'unit/resolveurl.html',
       'unit/css-parse.html',
       'unit/styling-scoped.html',
+      'unit/preserve-style-include/styling-scoped.html',
       'unit/styling-extends.html',
       'unit/styling-remote.html',
       'unit/styling-cross-scope-var.html',

diff --git a/test/smoke/preserve-include.html b/test/smoke/preserve-include.html
@@ -0,0 +1,72 @@
+<!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;
+            --mixin: {
+              border: 2px solid tomato;
+            }
+          }
+        </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;
+            @apply --mixin;
+          }
+
+        </style>
+        <div>Hi</div>
+      </template>
+      <script>
+      Polymer({
+        is: 'x-test'
+      });
+      </script>
+    </dom-module>
+
+
+    <x-test></x-test>
+  </body>
+</html>