fix: rename internal <styles>.css.js to <styles>.css

We are changing the names of these files to reduce similarity with CSS modules and avoid clashing with tooling built around that. If you're importing `*/internal/styles.css.js`, swap to `*/internal/styles.js`.

PiperOrigin-RevId: 611265000

.gitignore

@@ -4,7 +4,7 @@ node_modules
 !css-to-ts.js
 !commitlint.config.js
 *.css
-*.css.ts
+*-styles.ts
 *.map
 *.d.ts
 !types/*.d.ts

button/elevated-button.ts

@@ -8,9 +8,9 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {ElevatedButton} from './internal/elevated-button.js';
-import {styles as elevatedStyles} from './internal/elevated-styles.css.js';
-import {styles as sharedElevationStyles} from './internal/shared-elevation-styles.css.js';
-import {styles as sharedStyles} from './internal/shared-styles.css.js';
+import {styles as elevatedStyles} from './internal/elevated-styles.js';
+import {styles as sharedElevationStyles} from './internal/shared-elevation-styles.js';
+import {styles as sharedStyles} from './internal/shared-styles.js';
 
 declare global {
   interface HTMLElementTagNameMap {

button/filled-button.ts

@@ -8,9 +8,9 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {FilledButton} from './internal/filled-button.js';
-import {styles as filledStyles} from './internal/filled-styles.css.js';
-import {styles as sharedElevationStyles} from './internal/shared-elevation-styles.css.js';
-import {styles as sharedStyles} from './internal/shared-styles.css.js';
+import {styles as filledStyles} from './internal/filled-styles.js';
+import {styles as sharedElevationStyles} from './internal/shared-elevation-styles.js';
+import {styles as sharedStyles} from './internal/shared-styles.js';
 
 declare global {
   interface HTMLElementTagNameMap {

button/filled-tonal-button.ts

@@ -8,9 +8,9 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {FilledTonalButton} from './internal/filled-tonal-button.js';
-import {styles as tonalStyles} from './internal/filled-tonal-styles.css.js';
-import {styles as sharedElevationStyles} from './internal/shared-elevation-styles.css.js';
-import {styles as sharedStyles} from './internal/shared-styles.css.js';
+import {styles as tonalStyles} from './internal/filled-tonal-styles.js';
+import {styles as sharedElevationStyles} from './internal/shared-elevation-styles.js';
+import {styles as sharedStyles} from './internal/shared-styles.js';
 
 declare global {
   interface HTMLElementTagNameMap {

button/outlined-button.ts

@@ -8,8 +8,8 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {OutlinedButton} from './internal/outlined-button.js';
-import {styles as outlinedStyles} from './internal/outlined-styles.css.js';
-import {styles as sharedStyles} from './internal/shared-styles.css.js';
+import {styles as outlinedStyles} from './internal/outlined-styles.js';
+import {styles as sharedStyles} from './internal/shared-styles.js';
 
 declare global {
   interface HTMLElementTagNameMap {

button/text-button.ts

@@ -7,9 +7,9 @@
 import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
-import {styles as sharedStyles} from './internal/shared-styles.css.js';
+import {styles as sharedStyles} from './internal/shared-styles.js';
 import {TextButton} from './internal/text-button.js';
-import {styles as textStyles} from './internal/text-styles.css.js';
+import {styles as textStyles} from './internal/text-styles.js';
 
 declare global {
   interface HTMLElementTagNameMap {

checkbox/checkbox.ts

@@ -8,7 +8,7 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Checkbox} from './internal/checkbox.js';
-import {styles} from './internal/checkbox-styles.css.js';
+import {styles} from './internal/checkbox-styles.js';
 
 declare global {
   interface HTMLElementTagNameMap {

chips/assist-chip.ts

@@ -8,9 +8,9 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {AssistChip} from './internal/assist-chip.js';
-import {styles} from './internal/assist-styles.css.js';
-import {styles as elevatedStyles} from './internal/elevated-styles.css.js';
-import {styles as sharedStyles} from './internal/shared-styles.css.js';
+import {styles} from './internal/assist-styles.js';
+import {styles as elevatedStyles} from './internal/elevated-styles.js';
+import {styles as sharedStyles} from './internal/shared-styles.js';
 
 declare global {
   interface HTMLElementTagNameMap {

chips/chip-set.ts

@@ -8,7 +8,7 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {ChipSet} from './internal/chip-set.js';
-import {styles} from './internal/chip-set-styles.css.js';
+import {styles} from './internal/chip-set-styles.js';
 
 declare global {
   interface HTMLElementTagNameMap {

chips/filter-chip.ts

@@ -7,12 +7,12 @@
 import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
-import {styles as elevatedStyles} from './internal/elevated-styles.css.js';
+import {styles as elevatedStyles} from './internal/elevated-styles.js';
 import {FilterChip} from './internal/filter-chip.js';
-import {styles} from './internal/filter-styles.css.js';
-import {styles as selectableStyles} from './internal/selectable-styles.css.js';
-import {styles as sharedStyles} from './internal/shared-styles.css.js';
-import {styles as trailingIconStyles} from './internal/trailing-icon-styles.css.js';
+import {styles} from './internal/filter-styles.js';
+import {styles as selectableStyles} from './internal/selectable-styles.js';
+import {styles as sharedStyles} from './internal/shared-styles.js';
+import {styles as trailingIconStyles} from './internal/trailing-icon-styles.js';
 
 declare global {
   interface HTMLElementTagNameMap {

chips/input-chip.ts

@@ -8,10 +8,10 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {InputChip} from './internal/input-chip.js';
-import {styles} from './internal/input-styles.css.js';
-import {styles as selectableStyles} from './internal/selectable-styles.css.js';
-import {styles as sharedStyles} from './internal/shared-styles.css.js';
-import {styles as trailingIconStyles} from './internal/trailing-icon-styles.css.js';
+import {styles} from './internal/input-styles.js';
+import {styles as selectableStyles} from './internal/selectable-styles.js';
+import {styles as sharedStyles} from './internal/shared-styles.js';
+import {styles as trailingIconStyles} from './internal/trailing-icon-styles.js';
 
 declare global {
   interface HTMLElementTagNameMap {

chips/suggestion-chip.ts

@@ -7,10 +7,10 @@
 import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
-import {styles as elevatedStyles} from './internal/elevated-styles.css.js';
-import {styles as sharedStyles} from './internal/shared-styles.css.js';
+import {styles as elevatedStyles} from './internal/elevated-styles.js';
+import {styles as sharedStyles} from './internal/shared-styles.js';
 import {SuggestionChip} from './internal/suggestion-chip.js';
-import {styles} from './internal/suggestion-styles.css.js';
+import {styles} from './internal/suggestion-styles.js';
 
 declare global {
   interface HTMLElementTagNameMap {

css-to-ts.js

@@ -10,7 +10,7 @@ for (let i = 2; i < process.argv.length; i++) {
   try {
     const filePath = process.argv[i];
     const content = fs.readFileSync(filePath);
-    fs.writeFileSync(`${filePath}.ts`, `/**
+    fs.writeFileSync(filePath.replace('.css', '.ts'), `/**
   * @license
   * Copyright 2022 Google LLC
   * SPDX-License-Identifier: Apache-2.0

dialog/dialog.ts

@@ -8,7 +8,7 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Dialog} from './internal/dialog.js';
-import {styles} from './internal/dialog-styles.css.js';
+import {styles} from './internal/dialog-styles.js';
 
 declare global {
   interface HTMLElementTagNameMap {

divider/divider.ts

@@ -8,7 +8,7 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Divider} from './internal/divider.js';
-import {styles} from './internal/divider-styles.css.js';
+import {styles} from './internal/divider-styles.js';
 
 declare global {
   interface HTMLElementTagNameMap {

elevation/elevation.ts

@@ -8,7 +8,7 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Elevation} from './internal/elevation.js';
-import {styles} from './internal/elevation-styles.css.js';
+import {styles} from './internal/elevation-styles.js';
 
 declare global {
   interface HTMLElementTagNameMap {

fab/branded-fab.ts

@@ -8,9 +8,9 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Fab, FabVariant} from './internal/fab.js';
-import {styles} from './internal/fab-branded-styles.css.js';
-import {styles as forcedColors} from './internal/forced-colors-styles.css.js';
-import {styles as sharedStyles} from './internal/shared-styles.css.js';
+import {styles} from './internal/fab-branded-styles.js';
+import {styles as forcedColors} from './internal/forced-colors-styles.js';
+import {styles as sharedStyles} from './internal/shared-styles.js';
 
 export {type FabSize} from './internal/shared.js';
 

fab/fab.ts

@@ -8,9 +8,9 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Fab} from './internal/fab.js';
-import {styles} from './internal/fab-styles.css.js';
-import {styles as forcedColors} from './internal/forced-colors-styles.css.js';
-import {styles as sharedStyles} from './internal/shared-styles.css.js';
+import {styles} from './internal/fab-styles.js';
+import {styles as forcedColors} from './internal/forced-colors-styles.js';
+import {styles as sharedStyles} from './internal/shared-styles.js';
 
 export {type FabVariant} from './internal/fab.js';
 export {type FabSize} from './internal/shared.js';

field/filled-field.ts

@@ -8,8 +8,8 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {FilledField} from './internal/filled-field.js';
-import {styles as filledStyles} from './internal/filled-styles.css.js';
-import {styles as sharedStyles} from './internal/shared-styles.css.js';
+import {styles as filledStyles} from './internal/filled-styles.js';
+import {styles as sharedStyles} from './internal/shared-styles.js';
 
 declare global {
   interface HTMLElementTagNameMap {

field/outlined-field.ts

@@ -8,8 +8,8 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {OutlinedField} from './internal/outlined-field.js';
-import {styles as outlinedStyles} from './internal/outlined-styles.css.js';
-import {styles as sharedStyles} from './internal/shared-styles.css.js';
+import {styles as outlinedStyles} from './internal/outlined-styles.js';
+import {styles as sharedStyles} from './internal/shared-styles.js';
 
 declare global {
   interface HTMLElementTagNameMap {

focus/md-focus-ring.ts

@@ -8,7 +8,7 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {FocusRing} from './internal/focus-ring.js';
-import {styles} from './internal/focus-ring-styles.css.js';
+import {styles} from './internal/focus-ring-styles.js';
 
 declare global {
   interface HTMLElementTagNameMap {

icon/icon.ts

@@ -8,7 +8,7 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Icon} from './internal/icon.js';
-import {styles} from './internal/icon-styles.css.js';
+import {styles} from './internal/icon-styles.js';
 
 declare global {
   interface HTMLElementTagNameMap {

iconbutton/filled-icon-button.ts

@@ -7,9 +7,9 @@
 import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
-import {styles} from './internal/filled-styles.css.js';
+import {styles} from './internal/filled-styles.js';
 import {IconButton} from './internal/icon-button.js';
-import {styles as sharedStyles} from './internal/shared-styles.css.js';
+import {styles as sharedStyles} from './internal/shared-styles.js';
 
 declare global {
   interface HTMLElementTagNameMap {

iconbutton/filled-tonal-icon-button.ts

@@ -7,9 +7,9 @@
 import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
-import {styles} from './internal/filled-tonal-styles.css.js';
+import {styles} from './internal/filled-tonal-styles.js';
 import {IconButton} from './internal/icon-button.js';
-import {styles as sharedStyles} from './internal/shared-styles.css.js';
+import {styles as sharedStyles} from './internal/shared-styles.js';
 
 declare global {
   interface HTMLElementTagNameMap {

iconbutton/icon-button.ts

@@ -8,8 +8,8 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {IconButton} from './internal/icon-button.js';
-import {styles as sharedStyles} from './internal/shared-styles.css.js';
-import {styles} from './internal/standard-styles.css.js';
+import {styles as sharedStyles} from './internal/shared-styles.js';
+import {styles} from './internal/standard-styles.js';
 
 declare global {
   interface HTMLElementTagNameMap {

iconbutton/outlined-icon-button.ts

@@ -8,8 +8,8 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {IconButton} from './internal/icon-button.js';
-import {styles} from './internal/outlined-styles.css.js';
-import {styles as sharedStyles} from './internal/shared-styles.css.js';
+import {styles} from './internal/outlined-styles.js';
+import {styles as sharedStyles} from './internal/shared-styles.js';
 
 declare global {
   interface HTMLElementTagNameMap {

labs/badge/badge.ts

@@ -8,7 +8,7 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Badge} from './internal/badge.js';
-import {styles} from './internal/badge-styles.css.js';
+import {styles} from './internal/badge-styles.js';
 
 declare global {
   interface HTMLElementTagNameMap {

labs/card/elevated-card.ts

@@ -8,8 +8,8 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Card} from './internal/card.js';
-import {styles as elevatedStyles} from './internal/elevated-styles.css.js';
-import {styles as sharedStyles} from './internal/shared-styles.css.js';
+import {styles as elevatedStyles} from './internal/elevated-styles.js';
+import {styles as sharedStyles} from './internal/shared-styles.js';
 
 declare global {
   interface HTMLElementTagNameMap {

labs/card/filled-card.ts

@@ -8,8 +8,8 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Card} from './internal/card.js';
-import {styles as filledStyles} from './internal/filled-styles.css.js';
-import {styles as sharedStyles} from './internal/shared-styles.css.js';
+import {styles as filledStyles} from './internal/filled-styles.js';
+import {styles as sharedStyles} from './internal/shared-styles.js';
 
 declare global {
   interface HTMLElementTagNameMap {

labs/card/outlined-card.ts

@@ -8,8 +8,8 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Card} from './internal/card.js';
-import {styles as outlinedStyles} from './internal/outlined-styles.css.js';
-import {styles as sharedStyles} from './internal/shared-styles.css.js';
+import {styles as outlinedStyles} from './internal/outlined-styles.js';
+import {styles as sharedStyles} from './internal/shared-styles.js';
 
 declare global {
   interface HTMLElementTagNameMap {

labs/item/item.ts

@@ -8,7 +8,7 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Item} from './internal/item.js';
-import {styles} from './internal/item-styles.css.js';
+import {styles} from './internal/item-styles.js';
 
 declare global {
   interface HTMLElementTagNameMap {

labs/navigationbar/navigation-bar.ts

@@ -8,7 +8,7 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {NavigationBar} from './internal/navigation-bar.js';
-import {styles} from './internal/navigation-bar-styles.css.js';
+import {styles} from './internal/navigation-bar-styles.js';
 
 declare global {
   interface HTMLElementTagNameMap {

labs/navigationdrawer/navigation-drawer-modal.ts

@@ -7,8 +7,8 @@
 import {customElement} from 'lit/decorators.js';
 
 import {NavigationDrawerModal} from './internal/navigation-drawer-modal.js';
-import {styles} from './internal/navigation-drawer-modal-styles.css.js';
-import {styles as sharedStyles} from './internal/shared-styles.css.js';
+import {styles} from './internal/navigation-drawer-modal-styles.js';
+import {styles as sharedStyles} from './internal/shared-styles.js';
 
 declare global {
   interface HTMLElementTagNameMap {

labs/navigationdrawer/navigation-drawer.ts

@@ -7,8 +7,8 @@
 import {customElement} from 'lit/decorators.js';
 
 import {NavigationDrawer} from './internal/navigation-drawer.js';
-import {styles} from './internal/navigation-drawer-styles.css.js';
-import {styles as sharedStyles} from './internal/shared-styles.css.js';
+import {styles} from './internal/navigation-drawer-styles.js';
+import {styles as sharedStyles} from './internal/shared-styles.js';
 
 declare global {
   interface HTMLElementTagNameMap {

labs/navigationtab/navigation-tab.ts

@@ -8,7 +8,7 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {NavigationTab} from './internal/navigation-tab.js';
-import {styles} from './internal/navigation-tab-styles.css.js';
+import {styles} from './internal/navigation-tab-styles.js';
 
 declare global {
   interface HTMLElementTagNameMap {

labs/segmentedbutton/outlined-segmented-button.ts

@@ -8,8 +8,8 @@ import {CSSResultOrNative} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {OutlinedSegmentedButton} from './internal/outlined-segmented-button.js';
-import {styles as outlinedStyles} from './internal/outlined-styles.css.js';
-import {styles as sharedStyles} from './internal/shared-styles.css.js';
+import {styles as outlinedStyles} from './internal/outlined-styles.js';
+import {styles as sharedStyles} from './internal/shared-styles.js';
 
 declare global {
   interface HTMLElementTagNameMap {