Handle :-webkit-any selectors correctly

Fixes #4984
Polymer · Dec 12, 2017 · 9f3ff4e · 9f3ff4e
1 parent 000e15e
commit 9f3ff4e
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 4 deletions.
diff --git a/src/lib/style-transformer.html b/src/lib/style-transformer.html
@@ -177,8 +177,39 @@
           this._transformRuleCss(rule, transformer, scope, hostScope);
       },
 
+      // Split a selector separated by commas into an array in a smart way
+      _splitSelectorList: function(selector) {
+        var parts = [];
+        var part = '';
+        for (var i = 0; i >= 0 && i < selector.length; i++) {
+          // A selector with parentheses will be one complete part
+          if (selector[i] === '(') {
+            // find the matching paren
+            var end = styleUtil._findMatchingParen(selector, i);
+            // push the paren block into the part
+            part += selector.slice(i, end + 1);
+            // move the index to after the paren block
+            i = end;
+          } else if (selector[i] === COMPLEX_SELECTOR_SEP) {
+            parts.push(part);
+            part = '';
+          } else {
+            part += selector[i];
+          }
+        }
+        // catch any pieces after the last comma
+        if (part) {
+          parts.push(part);
+        }
+        // if there were no commas, just push the whole selector as a "part"
+        if (parts.length === 0) {
+          parts.push(selector);
+        }
+        return parts;
+      },
+
       _transformRuleCss: function(rule, transformer, scope, hostScope) {
-        var p$ = rule.selector.split(COMPLEX_SELECTOR_SEP);
+        var p$ = this._splitSelectorList(rule.selector);
         // we want to skip transformation of rules that appear in keyframes,
         // because they are keyframe selectors, not element selectors.
         if (!styleUtil.isKeyframesSelector(rule)) {
@@ -339,7 +370,7 @@
       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);
+        var parts = this._splitSelectorList(rule.selector);
         parts = parts.filter(function(part) {
           return !part.match(HOST_OR_HOST_GT_STAR);
         });
@@ -357,15 +388,18 @@
       },
 
       _dirShadowTransform: function(selector) {
-        return selector.split(',').map(function(s) {
+        if (!selector.match(/:dir\(/)) {
+          return selector;
+        }
+        return this._splitSelectorList(selector).map(function(s) {
           s = this._ensureScopedDir(s);
           s = this._transformDir(s);
           var m = HOST_CONTEXT_PAREN.exec(s);
           if (m) {
             s += this._additionalDirSelectors(m[2], m[3], '');
           }
           return s;
-        }, this).join(',');
+        }, this).join(COMPLEX_SELECTOR_SEP);
       },
 
       SCOPE_NAME: 'style-scope'

diff --git a/test/smoke/dir.html b/test/smoke/dir.html
@@ -42,13 +42,17 @@
         #container:dir(rtl) ::slotted(*) {
           border: 2px solid black;
         }
+        :dir(rtl) :-webkit-any(.foo, .bar) {
+          border: 5px solid red;
+        }
       </style>
       <div>hello</div>
       <div id="target">am i red?</div>
       <div id="other">orange border?</div>
       <div id="container">
         <slot id="slot"></slot>
       </div>
+      <div class="foo"></div>
     </template>
     <script>
       addEventListener('WebComponentsReady', function() {

diff --git a/test/unit/dir.html b/test/unit/dir.html
@@ -140,6 +140,12 @@
         #nested:dir(ltr) {
           border: 4px solid black;
         }
+        :host-context([dir="rtl"]) :-webkit-any(.foo1, .bar1) {
+          border: 20px solid black;
+        }
+        :dir(rtl) :-webkit-any(.foo2, .bar2) {
+          border: 20px solid black;
+        }
       </style>
       <div id="normal">hello</div>
       <div id="target">am i red?</div>
@@ -151,6 +157,8 @@
       <div dir="ltr">
         <other-element id="nested"></other-element>
       </div>
+      <div class="foo1" id="anyfoo"></div>
+      <div class="bar2" id="anybar"></div>
     </template>
     <script>
       addEventListener('WebComponentsReady', function() {
@@ -276,6 +284,8 @@
         assertComputed(Polymer.dom(el).firstElementChild, '10px');
         assertComputed(el.$.other, '5px');
         assertComputed(el.$.nested, '4px');
+        assertComputed(el.$.anyfoo, '20px');
+        assertComputed(el.$.anybar, '20px');
       })
     });
   </script>