fix(textfield): prevent placeholder styles from collapsing with minif…

…iers

PiperOrigin-RevId: 289004779

Co-authored-by: Material Web Copybara Robot <59487319+material-web-copybara@users.noreply.github.com>

packages/mdc-floating-label/component.ts

@@ -61,8 +61,10 @@ export class MDCFloatingLabel extends MDCComponent<MDCFloatingLabelFoundation> {
       addClass: (className) => this.root_.classList.add(className),
       removeClass: (className) => this.root_.classList.remove(className),
       getWidth: () => estimateScrollWidth(this.root_),
-      registerInteractionHandler: (evtType, handler) => this.listen(evtType, handler),
-      deregisterInteractionHandler: (evtType, handler) => this.unlisten(evtType, handler),
+      registerInteractionHandler: (evtType, handler) =>
+          this.listen(evtType, handler),
+      deregisterInteractionHandler: (evtType, handler) =>
+          this.unlisten(evtType, handler),
     };
     // tslint:enable:object-literal-sort-keys
     return new MDCFloatingLabelFoundation(adapter);

packages/mdc-textfield/_mixins.scss

@@ -839,14 +839,26 @@
 }
 
 @mixin placeholder-color_($color) {
-  .mdc-text-field__input::placeholder {
-    @include theme-mixins.prop(color, $color);
+  // GSS will combine selectors with the same content, and some browsers have a
+  // CSS quirk where it drops a rule if it does not recognize one of the
+  // selectors.
+  // To avoid GSS combining the ::placeholder and :-ms-input-placeholder
+  // selectors, we wrap them in `@media all`.
+  // TODO(b/142329051)
+  @media all {
+    // ::placeholder needs to be wrapped because IE11 will drop other selectors
+    // using the same color
+    .mdc-text-field__input::placeholder {
+      @include theme-mixins.prop(color, $color);
+    }
   }
 
-  // Override the placeholder styles in IE with important rule to improve specificity.
-  // stylelint-disable-next-line selector-no-vendor-prefix
-  .mdc-text-field__input:-ms-input-placeholder {
-    @include theme-mixins.prop(color, $color, $important: true);
+  @media all {
+    // :-ms-input-placeholder needs to be wrapped because Firefox will drop
+    // other selectors using the same color
+    .mdc-text-field__input:-ms-input-placeholder {
+      @include theme-mixins.prop(color, $color);
+    }
   }
 }
 

packages/mdc-textfield/component.ts

@@ -31,25 +31,13 @@ import {MDCRippleAdapter} from '@material/ripple/adapter';
 import {MDCRipple, MDCRippleFactory} from '@material/ripple/component';
 import {MDCRippleFoundation} from '@material/ripple/foundation';
 import {MDCRippleCapableSurface} from '@material/ripple/types';
-import {
-  MDCTextFieldAdapter,
-  MDCTextFieldInputAdapter,
-  MDCTextFieldLabelAdapter,
-  MDCTextFieldLineRippleAdapter,
-  MDCTextFieldOutlineAdapter,
-  MDCTextFieldRootAdapter,
-} from './adapter';
-import {
-  MDCTextFieldCharacterCounter,
-  MDCTextFieldCharacterCounterFactory,
-} from './character-counter/component';
+
+import {MDCTextFieldAdapter, MDCTextFieldInputAdapter, MDCTextFieldLabelAdapter, MDCTextFieldLineRippleAdapter, MDCTextFieldOutlineAdapter, MDCTextFieldRootAdapter,} from './adapter';
+import {MDCTextFieldCharacterCounter, MDCTextFieldCharacterCounterFactory,} from './character-counter/component';
 import {MDCTextFieldCharacterCounterFoundation} from './character-counter/foundation';
 import {cssClasses, strings} from './constants';
 import {MDCTextFieldFoundation} from './foundation';
-import {
-  MDCTextFieldHelperText,
-  MDCTextFieldHelperTextFactory,
-} from './helper-text/component';
+import {MDCTextFieldHelperText, MDCTextFieldHelperTextFactory,} from './helper-text/component';
 import {MDCTextFieldHelperTextFoundation} from './helper-text/foundation';
 import {MDCTextFieldIcon, MDCTextFieldIconFactory} from './icon/component';
 import {MDCTextFieldFoundationMap} from './types';