From 5533f73d3893a23384df1e9945acf0afd19654dc Mon Sep 17 00:00:00 2001 From: Abhinay Omkar Date: Mon, 13 Sep 2021 15:57:37 -0700 Subject: [PATCH] refactor(text-field): Add rtl ignore annotations for transform CSS properties 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 | 6 ++++ packages/mdc-rtl/_rtl.scss | 2 ++ packages/mdc-rtl/test/theme.scss.test.ts | 8 +++++ packages/mdc-textfield/_mixins.scss | 4 +++ .../mdc-textfield/text_field_gss_gss.scss | 32 +++++++++++++++++++ packages/mdc-theme/_gss.scss | 4 +-- testing/featuretargeting/index.ts | 9 ++++-- 7 files changed, 61 insertions(+), 4 deletions(-) create mode 100644 packages/mdc-textfield/text_field_gss_gss.scss diff --git a/packages/mdc-floating-label/_mixins.scss b/packages/mdc-floating-label/_mixins.scss index 47c0367a437..dc80c8833ca 100644 --- a/packages/mdc-floating-label/_mixins.scss +++ b/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); } diff --git a/packages/mdc-rtl/_rtl.scss b/packages/mdc-rtl/_rtl.scss index fca877f0505..a466d3b94f7 100644 --- a/packages/mdc-rtl/_rtl.scss +++ b/packages/mdc-rtl/_rtl.scss @@ -82,7 +82,9 @@ $include: true !default; @at-root { #{$rtl-selectors} { + /*rtl:begin:ignore*/ @content; + /*rtl:end:ignore*/ } } } diff --git a/packages/mdc-rtl/test/theme.scss.test.ts b/packages/mdc-rtl/test/theme.scss.test.ts index 77a68e33d04..ba23449734e 100644 --- a/packages/mdc-rtl/test/theme.scss.test.ts +++ b/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*/ }`); }); }); diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss index 467a2e0064d..8f2f92d49f5 100644 --- a/packages/mdc-textfield/_mixins.scss +++ b/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); } } diff --git a/packages/mdc-textfield/text_field_gss_gss.scss b/packages/mdc-textfield/text_field_gss_gss.scss new file mode 100644 index 00000000000..18645b249a3 --- /dev/null +++ b/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; diff --git a/packages/mdc-theme/_gss.scss b/packages/mdc-theme/_gss.scss index 52e33707aef..7af9ac482ea 100644 --- a/packages/mdc-theme/_gss.scss +++ b/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*/ } } diff --git a/testing/featuretargeting/index.ts b/testing/featuretargeting/index.ts index 0b21d15dbca..73dadba4075 100644 --- a/testing/featuretargeting/index.ts +++ b/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(''); }); };