Fix :dir() bare selector in native shadowdom

More correct fix for :dir() with CSS Custom Property Shim enabled
Polymer · Nov 8, 2017 · 788aad5 · 788aad5
1 parent 8fd3e93
commit 788aad5
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 15 deletions.
diff --git a/src/lib/style-properties.html b/src/lib/style-properties.html
@@ -442,21 +442,15 @@
         rule.transformedSelector = rule.transformedSelector || rule.selector;
         var selector = rule.transformedSelector;
         var scope = styleTransformer._calcElementScope(scopeId, viaAttr);
+        var hostScope = styleTransformer._calcElementScope(hostSelector, viaAttr);
         var parts = selector.split(',');
+        var isDirOrHostContextSelector = this._hasDirOrHostContext(rule.parsedSelector);
         for (var i=0, l=parts.length, p; (i<l) && (p=parts[i]); i++) {
-          // :host-context and :dir will
-          if (this._hasDirOrHostContext(rule.parsedSelector)) {
-            var hostScope = styleTransformer._calcElementScope(hostSelector, viaAttr);
-            var sub = p.split(' ');
-            for (var j = 0; j < sub.length; j++) {
-              sub[j] = sub[j].replace(hostScope, scope);
-            }
-            parts[i] = sub.join(' ');
-          } else {
             parts[i] = p.match(hostRx) ?
               p.replace(hostSelector, scope) :
-              scope + ' ' + p;
-          }
+              isDirOrHostContextSelector ?
+                p.replace(hostScope, scope + ' ' + hostScope) :
+                scope + ' ' + p;
         }
         rule.selector = parts.join(',');
       },

diff --git a/src/lib/style-transformer.html b/src/lib/style-transformer.html
@@ -319,7 +319,13 @@
       _dirShadowTransform: function(selector) {
         return selector.split(',').map(function(s) {
           s = s.replace(HOST_DIR, HOST_DIR_REPLACE);
-          s = s.replace(DIR_PAREN, SHADOW_DIR_REPLACE);
+          if (s.match(DIR_PAREN)) {
+            s = s.replace(DIR_PAREN, SHADOW_DIR_REPLACE);
+            // make sure `:dir() {` acts as `:dir() * {`
+            if (s[s.length - 1] === ' ') {
+              s = s + '*';
+            }
+          }
           return s;
         }).join(',');
       },

diff --git a/test/unit/dir.html b/test/unit/dir.html
@@ -91,12 +91,16 @@
     <template>
       <style>
         :host {
-          display: var(--ziz, block);
+          display: block;
+        }
+        :host(:dir(rtl)) {
+          border: var(--outer-size) solid black;
         }
         :dir(rtl) {
-          border: 10px solid rgb(123, 123, 123);
+          border: var(--inner-size) solid black;
         }
       </style>
+      <div id="inner"></div>
     </template>
     <script>
       addEventListener('WebComponentsReady', function() {
@@ -119,6 +123,12 @@
 
   <test-fixture id="var">
     <template>
+      <style is="custom-style">
+        html {
+          --outer-size: 10px;
+          --inner-size: 2px;
+        }
+      </style>
       <x-var></x-var>
     </template>
   </test-fixture>
@@ -195,8 +205,9 @@
       });
 
       test('elements with :dir and CSS Custom Properties work', function() {
-        var el = fixture('var');
+        var el = fixture('var')[1];
         assertComputed(el, '10px');
+        assertComputed(el.$.inner, '2px');
       })
     });
   </script>