feat(rtl): allow values to be theme keys and custom props

PiperOrigin-RevId: 315543086

packages/mdc-rtl/_mixins.scss

@@ -21,6 +21,7 @@
 //
 
 @use "sass:list";
+@use "@material/theme/mixins" as theme;
 @use "./variables";
 
 // Creates a rule that will be applied when an MDC Web component is within the context of an RTL layout.
@@ -73,14 +74,14 @@
   @if (variables.$include) {
     @if ($root-selector) {
       @at-root {
-        #{$root-selector}[dir="rtl"] &,
-        [dir="rtl"] #{$root-selector} & {
+        #{$root-selector}[dir='rtl'] &,
+        [dir='rtl'] #{$root-selector} & {
           @content;
         }
       }
     } @else {
-      [dir="rtl"] &,
-      &[dir="rtl"] {
+      [dir='rtl'] &,
+      &[dir='rtl'] {
         @content;
       }
     }
@@ -140,7 +141,12 @@
 //
 // Note that this function will always zero out the original value in an RTL context.
 // If you're trying to flip the values, use `mdc-rtl-reflexive-property()` instead.
-@mixin reflexive-box($base-property, $default-direction, $value, $root-selector: null) {
+@mixin reflexive-box(
+  $base-property,
+  $default-direction,
+  $value,
+  $root-selector: null
+) {
   @if (list.index((right, left), $default-direction) == null) {
     @error "Invalid default direction: '#{$default-direction}'. Please specifiy either 'right' or 'left'.";
   }
@@ -153,7 +159,12 @@
     $right-value: $value;
   }
 
-  @include reflexive-property($base-property, $left-value, $right-value, $root-selector);
+  @include reflexive-property(
+    $base-property,
+    $left-value,
+    $right-value,
+    $root-selector
+  );
 }
 
 // Takes a base property and emits rules that assign <base-property>-left to <left-value> and
@@ -181,11 +192,22 @@
 // ```
 //
 // An optional 4th `$root-selector` argument can be given, which will be passed to `mdc-rtl`.
-@mixin reflexive-property($base-property, $left-value, $right-value, $root-selector: null) {
+@mixin reflexive-property(
+  $base-property,
+  $left-value,
+  $right-value,
+  $root-selector: null
+) {
   $prop-left: #{$base-property}-left;
   $prop-right: #{$base-property}-right;
 
-  @include reflexive($prop-left, $left-value, $prop-right, $right-value, $root-selector);
+  @include reflexive(
+    $prop-left,
+    $left-value,
+    $prop-right,
+    $right-value,
+    $root-selector
+  );
 }
 
 // Takes an argument specifying a horizontal position property (either "left" or "right") as well
@@ -278,9 +300,9 @@
 /// @access private
 ///
 @mixin property_($property, $value) {
-  @if variables.$include {
-    /* @noflip */
-  }
-
-  #{$property}: #{$value};
+  @include theme.property(
+    $property,
+    $value,
+    $gss: (noflip: variables.$include)
+  );
 }

packages/mdc-rtl/package.json

@@ -13,5 +13,8 @@
     "type": "git",
     "url": "https://github.com/material-components/material-components-web.git",
     "directory": "packages/mdc-rtl"
+  },
+  "dependencies": {
+    "@material/theme": "^6.0.0"
   }
 }

packages/mdc-rtl/test/theme.scss.test.ts

@@ -0,0 +1,50 @@
+/**
+ * @license
+ * Copyright 2020 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+import * as fs from 'fs';
+import * as path from 'path';
+
+describe('theme.test.scss', () => {
+  it('emits custom properties using theme.property()', () => {
+    const filePath = path.join(__dirname, 'theme.test.css');
+    const css = fs.readFileSync(filePath, 'utf8').trim();
+    expect(css).toEqual(`.test {
+  /* @noflip */
+  margin-left: 0;
+  /* @noflip */
+  margin-right: 8px;
+  /* @alternate */
+  /* @noflip */
+  margin-right: var(--margin-prop, 8px);
+}
+[dir=rtl] .test, .test[dir=rtl] {
+  /* @noflip */
+  margin-left: 8px;
+  /* @alternate */
+  /* @noflip */
+  margin-left: var(--margin-prop, 8px);
+  /* @noflip */
+  margin-right: 0;
+}`);
+  });
+});

packages/mdc-rtl/test/theme.test.scss

@@ -0,0 +1,10 @@
+@use "@material/theme/custom-properties";
+@use "../mixins" as rtl;
+
+.test {
+  @include rtl.reflexive-box(
+    margin,
+    right,
+    custom-properties.create(--margin-prop, 8px)
+  );
+}