Add comments on modified transforms

Also fix up native shadow `:dir` transform to accept ancestor selector prefixes
Polymer · Nov 14, 2017 · 771cde0 · 771cde0
1 parent 788aad5
commit 771cde0
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/src/lib/style-properties.html b/src/lib/style-properties.html
@@ -448,6 +448,11 @@
         for (var i=0, l=parts.length, p; (i<l) && (p=parts[i]); i++) {
             parts[i] = p.match(hostRx) ?
               p.replace(hostSelector, scope) :
+              // :host-context and :dir selectors require information from ancestor nodes
+              // however, the default scoping will prepend the instance scoping class, breaking the selector.
+              // In this case, make sure the scoping class is inserted into the correct spot
+              // :dir(rtl) -> [dir="rtl"] .x-foo, .x-foo[dir="rtl"] ->
+              // [dir="rtl"] .x-foo1 .x-foo, .x-foo1 .x-foo[dir="rtl"]
               isDirOrHostContextSelector ?
                 p.replace(hostScope, scope + ' ' + hostScope) :
                 scope + ' ' + p;

diff --git a/src/lib/style-transformer.html b/src/lib/style-transformer.html
@@ -318,11 +318,16 @@
 
       _dirShadowTransform: function(selector) {
         return selector.split(',').map(function(s) {
+          // replaces :host(:dir(rtl)) with :host-context([dir="rtl"])
           s = s.replace(HOST_DIR, HOST_DIR_REPLACE);
-          if (s.match(DIR_PAREN)) {
+          var m;
+          if ((m = s.match(DIR_PAREN))) {
+            // replaces `.foo :dir(rtl)` with `:host-context([dir="rtl") .foo`
             s = s.replace(DIR_PAREN, SHADOW_DIR_REPLACE);
-            // make sure `:dir() {` acts as `:dir() * {`
-            if (s[s.length - 1] === ' ') {
+            // make sure `:dir() {` acts as `*:dir() {`
+            // otherwise, it would transform to `:host-context([dir="rtl"])` and apply incorrectly to the host
+            // so make it `:host-context([dir="rtl"]) *`
+            if (!m[1] || m[1].match(/^\s*$/)) {
               s = s + '*';
             }
           }
@@ -358,7 +363,7 @@
     var SELECTOR_NO_MATCH = 'should_not_match';
     var SLOTTED_PAREN = /(?:::slotted)(?:\(((?:\([^)(]*\)|[^)(]*)+?)\))/g;
     var HOST_OR_HOST_GT_STAR = /:host(?:\s*>\s*\*)?/;
-    var DIR_PAREN = /(.*):dir\((ltr|rtl)\)/g;
+    var DIR_PAREN = /(.*):dir\((ltr|rtl)\)/;
     var DIR_REPLACE = '[dir="$2"] $1, $1[dir="$2"]';
     var SHADOW_DIR_REPLACE = ':host-context([dir="$2"]) $1';
     var HOST_DIR = /:host\(:dir\((rtl|ltr)\)\)/g;