fix: use explicit CSSResult[] types for static styles

PiperOrigin-RevId: 609494809
material-components · Feb 22, 2024 · ce41b7b · ce41b7b
1 parent 8432bbb
commit ce41b7b
Show file tree

Hide file tree

Showing 54 changed files with 171 additions and 67 deletions.
diff --git a/button/elevated-button.ts b/button/elevated-button.ts
@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {ElevatedButton} from './internal/elevated-button.js';
@@ -41,7 +42,7 @@ declare global {
  */
 @customElement('md-elevated-button')
 export class MdElevatedButton extends ElevatedButton {
-  static override styles = [
+  static override styles: CSSResult[] = [
     sharedStyles,
     sharedElevationStyles,
     elevatedStyles,

diff --git a/button/filled-button.ts b/button/filled-button.ts
@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {FilledButton} from './internal/filled-button.js';
@@ -39,5 +40,9 @@ declare global {
  */
 @customElement('md-filled-button')
 export class MdFilledButton extends FilledButton {
-  static override styles = [sharedStyles, sharedElevationStyles, filledStyles];
+  static override styles: CSSResult[] = [
+    sharedStyles,
+    sharedElevationStyles,
+    filledStyles,
+  ];
 }
diff --git a/button/filled-tonal-button.ts b/button/filled-tonal-button.ts
@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {FilledTonalButton} from './internal/filled-tonal-button.js';
@@ -40,5 +41,9 @@ declare global {
  */
 @customElement('md-filled-tonal-button')
 export class MdFilledTonalButton extends FilledTonalButton {
-  static override styles = [sharedStyles, sharedElevationStyles, tonalStyles];
+  static override styles: CSSResult[] = [
+    sharedStyles,
+    sharedElevationStyles,
+    tonalStyles,
+  ];
 }
diff --git a/button/outlined-button.ts b/button/outlined-button.ts
@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {OutlinedButton} from './internal/outlined-button.js';
@@ -40,5 +41,5 @@ declare global {
  */
 @customElement('md-outlined-button')
 export class MdOutlinedButton extends OutlinedButton {
-  static override styles = [sharedStyles, outlinedStyles];
+  static override styles: CSSResult[] = [sharedStyles, outlinedStyles];
 }
diff --git a/button/text-button.ts b/button/text-button.ts
@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {styles as sharedStyles} from './internal/shared-styles.css.js';
@@ -38,5 +39,5 @@ declare global {
  */
 @customElement('md-text-button')
 export class MdTextButton extends TextButton {
-  static override styles = [sharedStyles, textStyles];
+  static override styles: CSSResult[] = [sharedStyles, textStyles];
 }
diff --git a/checkbox/checkbox.ts b/checkbox/checkbox.ts
@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Checkbox} from './internal/checkbox.js';
@@ -30,5 +31,5 @@ declare global {
  */
 @customElement('md-checkbox')
 export class MdCheckbox extends Checkbox {
-  static override styles = [styles];
+  static override styles: CSSResult[] = [styles];
 }
diff --git a/chips/assist-chip.ts b/chips/assist-chip.ts
@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {AssistChip} from './internal/assist-chip.js';
@@ -25,5 +26,5 @@ declare global {
  */
 @customElement('md-assist-chip')
 export class MdAssistChip extends AssistChip {
-  static override styles = [sharedStyles, elevatedStyles, styles];
+  static override styles: CSSResult[] = [sharedStyles, elevatedStyles, styles];
 }
diff --git a/chips/chip-set.ts b/chips/chip-set.ts
@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {ChipSet} from './internal/chip-set.js';
@@ -23,5 +24,5 @@ declare global {
  */
 @customElement('md-chip-set')
 export class MdChipSet extends ChipSet {
-  static override styles = [styles];
+  static override styles: CSSResult[] = [styles];
 }
diff --git a/chips/filter-chip.ts b/chips/filter-chip.ts
@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {styles as elevatedStyles} from './internal/elevated-styles.css.js';
@@ -27,7 +28,7 @@ declare global {
  */
 @customElement('md-filter-chip')
 export class MdFilterChip extends FilterChip {
-  static override styles = [
+  static override styles: CSSResult[] = [
     sharedStyles,
     elevatedStyles,
     trailingIconStyles,

diff --git a/chips/input-chip.ts b/chips/input-chip.ts
@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {InputChip} from './internal/input-chip.js';
@@ -26,7 +27,7 @@ declare global {
  */
 @customElement('md-input-chip')
 export class MdInputChip extends InputChip {
-  static override styles = [
+  static override styles: CSSResult[] = [
     sharedStyles,
     trailingIconStyles,
     selectableStyles,

diff --git a/chips/suggestion-chip.ts b/chips/suggestion-chip.ts
@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {styles as elevatedStyles} from './internal/elevated-styles.css.js';
@@ -25,5 +26,5 @@ declare global {
  */
 @customElement('md-suggestion-chip')
 export class MdSuggestionChip extends SuggestionChip {
-  static override styles = [sharedStyles, elevatedStyles, styles];
+  static override styles: CSSResult[] = [sharedStyles, elevatedStyles, styles];
 }
diff --git a/dialog/dialog.ts b/dialog/dialog.ts
@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Dialog} from './internal/dialog.js';
@@ -44,5 +45,5 @@ declare global {
  */
 @customElement('md-dialog')
 export class MdDialog extends Dialog {
-  static override styles = [styles];
+  static override styles: CSSResult[] = [styles];
 }
diff --git a/divider/divider.ts b/divider/divider.ts
@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Divider} from './internal/divider.js';
@@ -27,5 +28,5 @@ declare global {
  */
 @customElement('md-divider')
 export class MdDivider extends Divider {
-  static override styles = [styles];
+  static override styles: CSSResult[] = [styles];
 }
diff --git a/elevation/elevation.ts b/elevation/elevation.ts
@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Elevation} from './internal/elevation.js';
@@ -19,8 +20,11 @@ declare global {
  * The `<md-elevation>` custom element with default styles.
  *
  * Elevation is the relative distance between two surfaces along the z-axis.
+ *
+ * @final
+ * @suppress {visibility}
  */
 @customElement('md-elevation')
 export class MdElevation extends Elevation {
-  static override styles = [styles];
+  static override styles: CSSResult[] = [styles];
 }
diff --git a/fab/branded-fab.ts b/fab/branded-fab.ts
@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Fab, FabVariant} from './internal/fab.js';
@@ -63,5 +64,5 @@ export class MdBrandedFab extends Fab {
       'small': false,
     };
   }
-  static override styles = [sharedStyles, styles, forcedColors];
+  static override styles: CSSResult[] = [sharedStyles, styles, forcedColors];
 }
diff --git a/fab/fab.ts b/fab/fab.ts
@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Fab} from './internal/fab.js';
@@ -49,5 +50,5 @@ declare global {
  */
 @customElement('md-fab')
 export class MdFab extends Fab {
-  static override styles = [sharedStyles, styles, forcedColors];
+  static override styles: CSSResult[] = [sharedStyles, styles, forcedColors];
 }
diff --git a/field/filled-field.ts b/field/filled-field.ts
@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {FilledField} from './internal/filled-field.js';
@@ -23,5 +24,5 @@ declare global {
  */
 @customElement('md-filled-field')
 export class MdFilledField extends FilledField {
-  static override styles = [sharedStyles, filledStyles];
+  static override styles: CSSResult[] = [sharedStyles, filledStyles];
 }
diff --git a/field/outlined-field.ts b/field/outlined-field.ts
@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {OutlinedField} from './internal/outlined-field.js';
@@ -23,5 +24,5 @@ declare global {
  */
 @customElement('md-outlined-field')
 export class MdOutlinedField extends OutlinedField {
-  static override styles = [sharedStyles, outlinedStyles];
+  static override styles: CSSResult[] = [sharedStyles, outlinedStyles];
 }
diff --git a/focus/md-focus-ring.ts b/focus/md-focus-ring.ts
@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {FocusRing} from './internal/focus-ring.js';
@@ -23,5 +24,5 @@ declare global {
  */
 @customElement('md-focus-ring')
 export class MdFocusRing extends FocusRing {
-  static override styles = [styles];
+  static override styles: CSSResult[] = [styles];
 }
diff --git a/icon/icon.ts b/icon/icon.ts
@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Icon} from './internal/icon.js';
@@ -22,5 +23,5 @@ declare global {
 @customElement('md-icon')
 export class MdIcon extends Icon {
   /** @nocollapse */
-  static override styles = [styles];
+  static override styles: CSSResult[] = [styles];
 }
diff --git a/iconbutton/filled-icon-button.ts b/iconbutton/filled-icon-button.ts
@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {styles} from './internal/filled-styles.css.js';
@@ -30,10 +31,13 @@ declare global {
  * __Example usages:__
  * - Add to Favorites
  * - Print
+ *
+ * @final
+ * @suppress {visibility}
  */
 @customElement('md-filled-icon-button')
 export class MdFilledIconButton extends IconButton {
-  static override styles = [sharedStyles, styles];
+  static override styles: CSSResult[] = [sharedStyles, styles];
 
   protected override getRenderClasses() {
     return {

diff --git a/iconbutton/filled-tonal-icon-button.ts b/iconbutton/filled-tonal-icon-button.ts
@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {styles} from './internal/filled-tonal-styles.css.js';
@@ -30,10 +31,13 @@ declare global {
  * __Example usages:__
  * - Add to Favorites
  * - Print
+ *
+ * @final
+ * @suppress {visibility}
  */
 @customElement('md-filled-tonal-icon-button')
 export class MdFilledTonalIconButton extends IconButton {
-  static override styles = [sharedStyles, styles];
+  static override styles: CSSResult[] = [sharedStyles, styles];
 
   protected override getRenderClasses() {
     return {

diff --git a/iconbutton/icon-button.ts b/iconbutton/icon-button.ts
@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {CSSResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {IconButton} from './internal/icon-button.js';
@@ -30,10 +31,13 @@ declare global {
  * __Example usages:__
  * - Add to Favorites
  * - Print
+ *
+ * @final
+ * @suppress {visibility}
  */
 @customElement('md-icon-button')
 export class MdIconButton extends IconButton {
-  static override styles = [sharedStyles, styles];
+  static override styles: CSSResult[] = [sharedStyles, styles];
 
   protected override getRenderClasses() {
     return {