Fix :dir selector when element uses CSS Custom Property Shim

Fixes #4925

Author: dfreedm

src/lib/style-properties.html

@@ -426,6 +426,10 @@
             rule.keyframesName, rule.transformedKeyframesName);
       },
 
+      _hasDirOrHostContext: function(parsedSelector) {
+        return /:host-context|:dir/.test(parsedSelector);
+      },
+
       // Strategy: x scope shim a selector e.g. to scope `.x-foo-42` (via classes):
       // non-host selector: .a.x-foo -> .x-foo-42 .a.x-foo
       // host selector: x-foo.wide -> .x-foo-42.wide
@@ -437,14 +441,22 @@
       _scopeSelector: function(rule, hostRx, hostSelector, viaAttr, scopeId) {
         rule.transformedSelector = rule.transformedSelector || rule.selector;
         var selector = rule.transformedSelector;
-        var scope = viaAttr ? '[' + styleTransformer.SCOPE_NAME + '~=' +
-          scopeId + ']' :
-          '.' + scopeId;
+        var scope = styleTransformer._calcElementScope(scopeId, viaAttr);
         var parts = selector.split(',');
         for (var i=0, l=parts.length, p; (i<l) && (p=parts[i]); i++) {
-          parts[i] = p.match(hostRx) ?
-            p.replace(hostSelector, scope) :
-            scope + ' ' + p;
+          // :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;
+          }
         }
         rule.selector = parts.join(',');
       },

test/unit/dir.html

@@ -87,6 +87,24 @@
     </script>
   </dom-module>
 
+  <dom-module id="x-var">
+    <template>
+      <style>
+        :host {
+          display: var(--ziz, block);
+        }
+        :dir(rtl) {
+          border: 10px solid rgb(123, 123, 123);
+        }
+      </style>
+    </template>
+    <script>
+      addEventListener('WebComponentsReady', function() {
+        Polymer({is: 'x-var'});
+      });
+    </script>
+  </dom-module>
+
   <test-fixture id="dir">
     <template>
       <x-dir></x-dir>
@@ -99,6 +117,12 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="var">
+    <template>
+      <x-var></x-var>
+    </template>
+  </test-fixture>
+
   <script>
     function assertComputed(node, expected, property) {
       property = property || 'border-top-width';
@@ -169,6 +193,11 @@
           });
         });
       });
+
+      test('elements with :dir and CSS Custom Properties work', function() {
+        var el = fixture('var');
+        assertComputed(el, '10px');
+      })
     });
   </script>
 </body>