Support Polymer 2.x shared styles

Add support for `:host, html` selectors in custom styles
Polymer · Jul 19, 2017 · 1d83b74 · 1d83b74
1 parent 8ce0260
commit 1d83b74
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 0 deletions.
diff --git a/src/lib/style-transformer.html b/src/lib/style-transformer.html
@@ -292,6 +292,12 @@
 
       normalizeRootSelector: function(rule) {
         rule.selector = rule.selector.replace(ROOT, 'html');
+        // handle 2.x rules like `:host, html {}`
+        var parts = rule.selector.split(COMPLEX_SELECTOR_SEP);
+        parts = parts.filter(function(part) {
+          return part.trim() !== HOST;
+        });
+        rule.selector = parts.join(COMPLEX_SELECTOR_SEP);
       },
 
       _transformDocumentSelector: function(selector) {

diff --git a/test/unit/custom-style.html b/test/unit/custom-style.html
@@ -141,6 +141,11 @@
     --html-foo: 10px dotted green;
   }
   </style>
+  <style is="custom-style">
+    :host, html {
+      --polymer-2-root: 10px solid rgb(123, 123, 123);
+    }
+  </style>
 </head>
 <body>
   <div class="italic">italic</div>
@@ -162,6 +167,8 @@
 
   <parent-variable-with-var></parent-variable-with-var>
 
+  <polymer-2-root></polymer-2-root>
+
   <br><br>
   <div id="after"></div>
 
@@ -314,6 +321,16 @@
     </template>
   </dom-module>
 
+  <dom-module id="polymer-2-root">
+    <template>
+      <style>
+        :host {
+          border: var(--polymer-2-root);
+        }
+      </style>
+    </template>
+  </dom-module>
+
   <script>
   HTMLImports.whenReady(function() {
     Polymer({
@@ -338,6 +355,9 @@
     Polymer({
       is: 'x-top-selectors'
     });
+    Polymer({
+      is: 'polymer-2-root'
+    })
   })
   </script>
 
@@ -386,6 +406,11 @@
         assertComputed(xFoo.$.bar3.$.baz, '5px');
       });
 
+      test('polymer 2 shared styles applied', function() {
+        var polymer2 = document.querySelector('polymer-2-root');
+        assertComputed(polymer2, '10px');
+      })
+
       test('custom properties registered as defaults', function() {
         var propsToCheck = ['--italic'];
         if (Polymer.Settings.useNativeCSSProperties || stylesBuilt) {