refactor(text-field): Add rtl ignore annotations for transform CSS pr…

…operties in text field

- Added RTLCSS ignore annotation beside gss's noflip annotation.
  - This would allow processing stylesheet by both RTLCSS (Used by Sass stack) and legacy gss.
- Added rtl ignore annotations for transform CSS properties in text field for RTLCSS.

PiperOrigin-RevId: 396462655

packages/mdc-floating-label/_mixins.scss

@@ -140,12 +140,14 @@
   @include feature-targeting.targets($feat-animation) {
     @keyframes mdc-floating-label-shake-float-above-#{$modifier} {
       0% {
+        @include rtl.ignore-next-line();
         transform: translateX(calc(0 - #{$positionX}))
           translateY(-#{$positionY}) scale(#{$scale});
       }
 
       33% {
         animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
+        @include rtl.ignore-next-line();
         transform: translateX(calc(4% - #{$positionX}))
           translateY(-#{$positionY}) scale(#{$scale});
       }
@@ -157,11 +159,13 @@
           0.55,
           0.956352
         );
+        @include rtl.ignore-next-line();
         transform: translateX(calc(-4% - #{$positionX}))
           translateY(-#{$positionY}) scale(#{$scale});
       }
 
       100% {
+        @include rtl.ignore-next-line();
         transform: translateX(calc(0 - #{$positionX}))
           translateY(-#{$positionY}) scale(#{$scale});
       }
@@ -180,11 +184,13 @@
   .mdc-floating-label--float-above {
     @include feature-targeting.targets($feat-structure) {
       @if $positionX > 0 or $positionX < 0 {
+        @include rtl.ignore-next-line();
         transform: translateY(-1 * $positionY)
           translateX(-1 * $positionX)
           scale($scale);
 
         @include rtl.rtl {
+          @include rtl.ignore-next-line();
           transform: translateY(-1 * $positionY) translateX($positionX)
             scale($scale);
         }

packages/mdc-rtl/_rtl.scss

@@ -82,7 +82,9 @@ $include: true !default;
 
     @at-root {
       #{$rtl-selectors} {
+        /*rtl:begin:ignore*/
         @content;
+        /*rtl:end:ignore*/
       }
     }
   }

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

@@ -30,21 +30,29 @@ describe('theme.test.scss', () => {
     const css = fs.readFileSync(filePath, 'utf8').trim();
     expect(css).toEqual(`.test {
   /* @noflip */
+  /*rtl:ignore*/
   margin-left: 0;
   /* @noflip */
+  /*rtl:ignore*/
   margin-right: 8px;
   /* @alternate */
   /* @noflip */
+  /*rtl:ignore*/
   margin-right: var(--margin-prop, 8px);
 }
 [dir=rtl] .test, .test[dir=rtl] {
+  /*rtl:begin:ignore*/
   /* @noflip */
+  /*rtl:ignore*/
   margin-left: 8px;
   /* @alternate */
   /* @noflip */
+  /*rtl:ignore*/
   margin-left: var(--margin-prop, 8px);
   /* @noflip */
+  /*rtl:ignore*/
   margin-right: 0;
+  /*rtl:end:ignore*/
 }`);
   });
 });

packages/mdc-textfield/_mixins.scss

@@ -1988,10 +1988,12 @@
   $y: -1 * variables.$textarea-input-handle-margin;
 
   @include feature-targeting.targets($feat-structure) {
+    @include rtl.ignore-next-line();
     transform: translateX($x) translateY($y);
 
     @include rtl.rtl {
       // Flip the horizontal shifting direction for RTL
+      @include rtl.ignore-next-line();
       transform: translateX(-1 * $x) translateY($y);
     }
   }
@@ -2005,10 +2007,12 @@
   $y: variables.$textarea-input-handle-margin;
 
   @include feature-targeting.targets($feat-structure) {
+    @include rtl.ignore-next-line();
     transform: translateX($x) translateY($y);
 
     @include rtl.rtl {
       // Flip the horizontal shifting direction for RTL
+      @include rtl.ignore-next-line();
       transform: translateX(-1 * $x) translateY($y);
     }
   }

packages/mdc-textfield/text_field_gss_gss.scss

@@ -0,0 +1,32 @@
+//
+// Copyright 2021 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.
+//
+@use './mixins';
+@provide 'mdc.textfield';
+@require '../floatinglabel/gss_gss';
+@require '../lineripple/line_ripple_gss_gss';
+@require '../notchedoutline/gss_gss';
+@require '../ripple/styles_gss_gss';
+
+@use '@material/floating-label/mdc-floating-label'; // COPYBARA_COMMENT_THIS_LINE
+@use '@material/line-ripple/mdc-line-ripple'; // COPYBARA_COMMENT_THIS_LINE
+@use '@material/notched-outline/mdc-notched-outline'; // COPYBARA_COMMENT_THIS_LINE
+@include mixins.core-styles;

packages/mdc-theme/_gss.scss

@@ -38,7 +38,7 @@
 ///   left: 0;
 ///
 /// @example - css
-///   /* @noflip */
+///   /* @noflip */ /*rtl:ignore*/
 ///   left: 0;
 ///
 /// @param {Map} $annotations - Map of annotations. Values must be set to `true`
@@ -57,6 +57,6 @@
 
   // noflip must be the last tag right before the property
   @if (map.get($annotations, noflip) == true) {
-    /* @noflip */
+    /* @noflip */ /*rtl:ignore*/
   }
 }

testing/featuretargeting/index.ts

@@ -29,9 +29,14 @@ import * as fs from 'fs';
  * @param filePath File path of CSS files that you want to test.
  */
 export const expectStylesWithNoFeaturesToBeEmpty = (filePath: string) => {
-  it('Sass produces no CSS when we ask for no features in feature targeting',
+  it('Sass produces no CSS properties when we ask for no features in feature targeting',
      () => {
-       const css = fs.readFileSync(filePath, 'utf8').trim();
+       // RTL annotations are not feature targetted. Remove RTL annotations and
+       // empty RTL selectors from the CSS result.
+       const css = fs.readFileSync(filePath, 'utf8')
+                       .replace(/\/\*rtl:(begin|end):ignore\*\//g, '')
+                       .replace(/\[dir=rtl\].*\{\s+\}/g, '')
+                       .trim();
        expect(css).toEqual('');
      });
 };