Add build support for :dir() in Polymer 2+

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Unreleased
 - Fix `shady-unscoped` style imports and add tests
+- Add build support for `:dir()` for Polymer 2 Shadow DOM
 
 ## [0.6.0] - 2018-09-17
 * Add support for Polymer v1 `var(--foo, --bar)` => `var(--foo,var(--bar))` transform

index.js

@@ -28,6 +28,8 @@ const {traverse} = require('polymer-analyzer/lib/javascript/estraverse-shim.js')
 
 const {dirShadowTransform, slottedToContent, shadyReplaceContent, fixBadVars} = require('./lib/polymer-1-transforms.js');
 
+const {polymer2DirShadowTransform} = require('./lib/polymer-2-dir-transform.js');
+
 const {createScannerMap, createParserMap} = require('./lib/slim-analyzer-options.js');
 
 const {IdentifierIsDocumentVariable} = require('./lib/closure-html-template-scanner.js');
@@ -259,9 +261,13 @@ function slottedTransform(ast) {
   });
 }
 
-function dirTransform(ast) {
+function dirTransform(ast, polymerVersion) {
   StyleUtil.forEachRule(ast, (rule) => {
-    rule.selector = dirShadowTransform(rule.selector);
+    if (polymerVersion === 1) {
+      rule.selector = dirShadowTransform(rule.selector);
+    } else {
+      rule.selector = polymer2DirShadowTransform(rule.selector);
+    }
   });
 }
 
@@ -636,9 +642,9 @@ async function polymerCssBuild(paths, options = {}) {
     }
     applyShim(ast);
     if (nativeShadow) {
+      dirTransform(ast, polymerVersion);
       if (polymerVersion === 1) {
         slottedTransform(ast);
-        dirTransform(ast);
       }
     } else {
       shadyShim(ast, s, analysis);

lib/polymer-2-dir-transform.js

@@ -0,0 +1,30 @@
+/**
+@license
+Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/
+
+// copied from polymer DirMixin
+const HOST_DIR = /:host\(:dir\((ltr|rtl)\)\)/g;
+const HOST_DIR_REPLACMENT = '$&, :host([dir="$1"])';
+
+const EL_DIR = /(?<!:host\()([\s\w-#.[\]*]*):dir\((ltr|rtl)\)/g;
+const EL_DIR_REPLACMENT = '$&, :host([dir="$2"]) $1';
+
+const DIR_CHECK = /:dir\((?:ltr|rtl)\)/;
+
+function polymer2DirShadowTransform(selector) {
+  if (!DIR_CHECK.test(selector)) {
+    return selector;
+  }
+  selector = selector.replace(HOST_DIR, HOST_DIR_REPLACMENT);
+  return selector.replace(EL_DIR, EL_DIR_REPLACMENT);
+}
+
+module.exports = {
+  polymer2DirShadowTransform
+}

tests/app/dir-element.html

@@ -0,0 +1,32 @@
+<!--
+@license
+Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<dom-module id="dir-element">
+  <template>
+    <style>
+      :host {
+        color: rgb(255, 0, 0);
+      }
+      div {
+        height: 200px;
+        background-color: rgb(0, 0, 255);
+      }
+      :host(:dir(rtl)) {
+        color: rgb(0, 0, 123);
+      }
+      div:dir(rtl) {
+        background-color: rgb(123, 0, 0);
+      }
+    </style>
+    <div>Dir!</div>
+  </template>
+  <script>
+    Polymer({is: 'dir-element'});
+  </script>
+</dom-module>

tests/app/index.html

@@ -21,6 +21,7 @@
 <link rel="import" href="cr-bug.html">
 <link rel="import" href="polymer-1-vars.html">
 <link rel="import" href="shady-unscoped.html">
+<link rel="import" href="dir-element.html">
 
 <custom-style>
   <style is="custom-style" include="shared-style">
@@ -31,6 +32,7 @@
 <x-app></x-app>
 <x-component></x-component>
 <cr-bug-owner></cr-bug-owner>
+<dir-element></dir-element>
 
 <dom-module id="inline-element">
   <template>
@@ -130,6 +132,26 @@
       assert(!(template.hasAttribute('css-build') ^ shouldHaveMarkedTemplate), `dom-module template should ${shouldHaveMarkedTemplate ? 'not ' : ''}have css-build attribute`);
     });
 
+    suite('dir', function() {
+      setup(function() {
+        document.documentElement.setAttribute('dir', 'ltr');
+      });
+      teardown(function() {
+        document.documentElement.removeAttribute('dir');
+      });
+      test('dir transform', async function() {
+        const el = Polymer.dom(document).querySelector('dir-element');
+        const root = el.shadyRoot || el.shadowRoot;
+        const div = Polymer.dom(root).querySelector('div');
+        assertComputed(el, 'rgb(255, 0, 0)', 'color');
+        assertComputed(div, 'rgb(0, 0, 255)', 'background-color');
+        document.documentElement.setAttribute('dir', 'rtl');
+        await new Promise(resolve => requestAnimationFrame(resolve));
+        assertComputed(el, 'rgb(0, 0, 123)', 'color');
+        assertComputed(div, 'rgb(123, 0, 0)', 'background-color');
+      });
+    });
+
     test('shady-unscoped', function() {
       const el = Polymer.dom(document).querySelector('shady-unscoped');
       assert(el.isConnected, 'shady-unscoped element must be in document to apply styling');

tests/prepare-tests.sh

@@ -23,7 +23,7 @@ build(){
 
   cp -rv tests/app/* "tests/${outputDir}/"
 
-  bin/polymer-css-build --polymer-version=${version} ${shady} ${noInline} --file tests/${outputDir}/index.html tests/${outputDir}/x-app.html tests/${outputDir}/x-app-dom-module.html tests/${outputDir}/x-app-definition.js tests/${outputDir}/x-component.html tests/${outputDir}/shared/shared-style.html tests/${outputDir}/x-nested-apply.html tests/${outputDir}/cr-bug.html tests/${outputDir}/class-element.js tests/${outputDir}/polymer-1-vars.html tests/${outputDir}/shady-unscoped.html
+  bin/polymer-css-build --polymer-version=${version} ${shady} ${noInline} --file tests/${outputDir}/index.html tests/${outputDir}/x-app.html tests/${outputDir}/x-app-dom-module.html tests/${outputDir}/x-app-definition.js tests/${outputDir}/x-component.html tests/${outputDir}/shared/shared-style.html tests/${outputDir}/x-nested-apply.html tests/${outputDir}/cr-bug.html tests/${outputDir}/class-element.js tests/${outputDir}/polymer-1-vars.html tests/${outputDir}/shady-unscoped.html tests/${outputDir}/dir-element.html
 
   (cd tests/${outputDir}; npx bower install polymer#${version} web-component-tester)
 }