build: leverage css module imports in components

castastrophe · castastrophe · commit 43313e8a9a9d · 2025-04-22T10:37:53.000-04:00
diff --git a/packages/accordion/src/Accordion.ts b/packages/accordion/src/Accordion.ts
@@ -26,7 +26,7 @@ import { FocusGroupController } from '@spectrum-web-components/reactive-controll
 
 import { AccordionItem } from './AccordionItem.js';
 
-import styles from './accordion.css.js';
+import styles from './accordion.css' with { type: 'css' };
 
 /**
  * @element sp-accordion
diff --git a/packages/accordion/src/AccordionItem.ts b/packages/accordion/src/AccordionItem.ts
@@ -23,7 +23,7 @@ import { when } from '@spectrum-web-components/base/src/directives.js';
 import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';
 import chevronIconStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';
 
-import styles from './accordion-item.css.js';
+import styles from './accordion-item.css' with { type: 'css' };
 
 const chevronIcon: Record<string, () => TemplateResult> = {
     s: () => html`
diff --git a/packages/action-group/src/ActionGroup.ts b/packages/action-group/src/ActionGroup.ts
@@ -26,7 +26,7 @@ import { ActionButton } from '@spectrum-web-components/action-button';
 import { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';
 import { MutationController } from '@lit-labs/observers/mutation-controller.js';
 
-import styles from './action-group.css.js';
+import styles from './action-group.css' with { type: 'css' };
 
 const EMPTY_SELECTION: string[] = [];
 
diff --git a/packages/alert-banner/src/AlertBanner.ts b/packages/alert-banner/src/AlertBanner.ts
@@ -20,7 +20,7 @@ import { property } from '@spectrum-web-components/base/src/decorators.js';
 import '@spectrum-web-components/button/sp-close-button.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js';
-import styles from './alert-banner.css.js';
+import styles from './alert-banner.css' with { type: 'css' };
 
 const VALID_VARIANTS = ['neutral', 'info', 'negative'];
 export type AlertBannerVariants = (typeof VALID_VARIANTS)[number];
diff --git a/packages/asset/src/Asset.ts b/packages/asset/src/Asset.ts
@@ -18,7 +18,7 @@ import {
 } from '@spectrum-web-components/base';
 import { property } from '@spectrum-web-components/base/src/decorators.js';
 
-import styles from './asset.css.js';
+import styles from './asset.css' with { type: 'css' };
 
 const file = (label: string): TemplateResult => html`
     <svg
diff --git a/packages/badge/src/Badge.ts b/packages/badge/src/Badge.ts
@@ -22,7 +22,7 @@ import { property } from '@spectrum-web-components/base/src/decorators.js';
 
 import { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';
 import { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js';
-import styles from './badge.css.js';
+import styles from './badge.css' with { type: 'css' };
 
 export const BADGE_VARIANTS = [
     'accent',
diff --git a/packages/breadcrumbs/src/BreadcrumbItem.ts b/packages/breadcrumbs/src/BreadcrumbItem.ts
@@ -23,7 +23,7 @@ import { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';
 import chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';
 import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';
 
-import styles from './breadcrumb-item.css.js';
+import styles from './breadcrumb-item.css' with { type: 'css' };
 
 export interface BreadcrumbSelectDetail {
     value: string;
diff --git a/packages/breadcrumbs/src/Breadcrumbs.ts b/packages/breadcrumbs/src/Breadcrumbs.ts
@@ -37,7 +37,7 @@ import {
     ref,
 } from '@spectrum-web-components/base/src/directives.js';
 
-import styles from './breadcrumbs.css.js';
+import styles from './breadcrumbs.css' with { type: 'css' };
 import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
 
 type BreadcrumbItem = {
diff --git a/packages/button-group/src/ButtonGroup.ts b/packages/button-group/src/ButtonGroup.ts
@@ -24,7 +24,7 @@ import {
 } from '@spectrum-web-components/base/src/decorators.js';
 import type { Button } from '@spectrum-web-components/button';
 
-import styles from './button-group.css.js';
+import styles from './button-group.css' with { type: 'css' };
 
 /**
  * @element sp-button-group
diff --git a/packages/coachmark/src/CoachIndicator.ts b/packages/coachmark/src/CoachIndicator.ts
@@ -16,7 +16,7 @@ import {
     TemplateResult,
 } from '@spectrum-web-components/base';
 import { property } from '@spectrum-web-components/base/src/decorators.js';
-import styles from './coach-indicator.css.js';
+import styles from './coach-indicator.css' with { type: 'css' };
 
 /**
  * @element sp-coach-indicator
diff --git a/packages/color-area/src/ColorArea.ts b/packages/color-area/src/ColorArea.ts
@@ -37,7 +37,7 @@ import {
     isIOS,
 } from '@spectrum-web-components/shared/src/platform.js';
 
-import styles from './color-area.css.js';
+import styles from './color-area.css' with { type: 'css' };
 
 /**
  * @element sp-color-area
diff --git a/packages/color-handle/src/ColorHandle.ts b/packages/color-handle/src/ColorHandle.ts
@@ -21,7 +21,7 @@ import { property } from '@spectrum-web-components/base/src/decorators.js';
 
 import '@spectrum-web-components/color-loupe/sp-color-loupe.js';
 import opacityCheckerboardStyles from '@spectrum-web-components/opacity-checkerboard/src/is-opacity-checkerboard.css.js';
-import styles from './color-handle.css.js';
+import styles from './color-handle.css' with { type: 'css' };
 
 /**
  * @element sp-color-handle
diff --git a/packages/color-loupe/src/ColorLoupe.ts b/packages/color-loupe/src/ColorLoupe.ts
@@ -18,7 +18,7 @@ import {
 } from '@spectrum-web-components/base';
 import { property } from '@spectrum-web-components/base/src/decorators.js';
 
-import styles from './color-loupe.css.js';
+import styles from './color-loupe.css' with { type: 'css' };
 import opacityCheckerboardStyles from '@spectrum-web-components/opacity-checkerboard/src/opacity-checkerboard.css.js';
 
 /**
diff --git a/packages/color-slider/src/ColorSlider.ts b/packages/color-slider/src/ColorSlider.ts
@@ -36,7 +36,7 @@ import {
 import { LanguageResolutionController } from '@spectrum-web-components/reactive-controllers/src/LanguageResolution.js';
 
 import opacityCheckerBoardStyles from '@spectrum-web-components/opacity-checkerboard/src/opacity-checkerboard.css.js';
-import styles from './color-slider.css.js';
+import styles from './color-slider.css' with { type: 'css' };
 
 /**
  * @element sp-color-slider
diff --git a/packages/color-wheel/src/ColorWheel.ts b/packages/color-wheel/src/ColorWheel.ts
@@ -32,7 +32,7 @@ import {
 } from '@spectrum-web-components/reactive-controllers/src/ColorController.js';
 import { LanguageResolutionController } from '@spectrum-web-components/reactive-controllers/src/LanguageResolution.js';
 
-import styles from './color-wheel.css.js';
+import styles from './color-wheel.css' with { type: 'css' };
 
 /**
  * @element sp-color-wheel
diff --git a/packages/combobox/src/Combobox.ts b/packages/combobox/src/Combobox.ts
@@ -38,7 +38,7 @@ import '@spectrum-web-components/picker-button/sp-picker-button.js';
 import { Textfield } from '@spectrum-web-components/textfield';
 import type { Tooltip } from '@spectrum-web-components/tooltip';
 
-import styles from './combobox.css.js';
+import styles from './combobox.css' with { type: 'css' };
 import chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';
 import { Menu, MenuItem } from '@spectrum-web-components/menu';
 
diff --git a/packages/contextual-help/src/ContextualHelp.ts b/packages/contextual-help/src/ContextualHelp.ts
@@ -31,7 +31,7 @@ import {
     IS_MOBILE,
     MatchMediaController,
 } from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js';
-import styles from './contextual-help.css.js';
+import styles from './contextual-help.css' with { type: 'css' };
 
 /**
  * Spectrum Contextual help provides additional information about
diff --git a/packages/dialog/src/Dialog.ts b/packages/dialog/src/Dialog.ts
@@ -31,7 +31,7 @@ import { ObserveSlotPresence } from '@spectrum-web-components/shared';
 import { AlertDialog } from '@spectrum-web-components/alert-dialog/src/AlertDialog.js';
 import { classMap } from '@spectrum-web-components/base/src/directives.js';
 import type { CloseButton } from '@spectrum-web-components/button';
-import styles from './dialog.css.js';
+import styles from './dialog.css' with { type: 'css' };
 
 /**
  * @element sp-dialog
diff --git a/packages/divider/src/Divider.ts b/packages/divider/src/Divider.ts
@@ -20,7 +20,7 @@ import {
 } from '@spectrum-web-components/base';
 import { property } from '@spectrum-web-components/base/src/decorators.js';
 
-import styles from './divider.css.js';
+import styles from './divider.css' with { type: 'css' };
 
 /**
  * @element sp-divider
diff --git a/packages/field-group/src/FieldGroup.ts b/packages/field-group/src/FieldGroup.ts
@@ -20,7 +20,7 @@ import {
 import { property } from '@spectrum-web-components/base/src/decorators.js';
 import { ManageHelpText } from '@spectrum-web-components/help-text/src/manage-help-text.js';
 
-import styles from './field-group.css.js';
+import styles from './field-group.css' with { type: 'css' };
 
 /**
  * @element sp-field-group
diff --git a/packages/field-label/src/FieldLabel.ts b/packages/field-label/src/FieldLabel.ts
@@ -36,7 +36,7 @@ import {
     elementResolverUpdatedSymbol,
 } from '@spectrum-web-components/reactive-controllers/src/ElementResolution.js';
 
-import styles from './field-label.css.js';
+import styles from './field-label.css' with { type: 'css' };
 
 type AcceptsFocusVisisble = HTMLElement & { forceFocusVisible?(): void };
 type Labelable = Focusable & {
diff --git a/packages/help-text/src/HelpText.ts b/packages/help-text/src/HelpText.ts
@@ -21,7 +21,7 @@ import {
 import { property } from '@spectrum-web-components/base/src/decorators.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';
 
-import styles from './help-text.css.js';
+import styles from './help-text.css' with { type: 'css' };
 
 type HelpTextVariants = 'neutral' | 'negative';
 
diff --git a/packages/infield-button/src/InfieldButton.ts b/packages/infield-button/src/InfieldButton.ts
@@ -18,7 +18,7 @@ import {
 import { property } from '@spectrum-web-components/base/src/decorators.js';
 import { ButtonBase } from '@spectrum-web-components/button/src/ButtonBase.js';
 
-import styles from './infield-button.css.js';
+import styles from './infield-button.css' with { type: 'css' };
 
 /**
  * @element sp-infield-button
diff --git a/packages/meter/src/Meter.ts b/packages/meter/src/Meter.ts
@@ -28,7 +28,7 @@ import { getLabelFromSlot } from '@spectrum-web-components/shared/src/get-label-
 import { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';
 import { LanguageResolutionController } from '@spectrum-web-components/reactive-controllers/src/LanguageResolution.js';
 import '@spectrum-web-components/field-label/sp-field-label.js';
-import styles from './meter.css.js';
+import styles from './meter.css' with { type: 'css' };
 
 export const meterVariants = ['positive', 'notice', 'negative'];
 
diff --git a/packages/overlay/src/Overlay.ts b/packages/overlay/src/Overlay.ts
@@ -54,7 +54,7 @@ import {
     SlottableRequestEvent,
 } from './slottable-request-event.js';
 
-import styles from './overlay.css.js';
+import styles from './overlay.css' with { type: 'css' };
 
 const browserSupportsPopover = 'showPopover' in document.createElement('div');
 
diff --git a/packages/picker-button/src/PickerButton.ts b/packages/picker-button/src/PickerButton.ts
@@ -22,7 +22,7 @@ import { ButtonBase } from '@spectrum-web-components/button/src/ButtonBase.js';
 import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';
 import { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js';
 
-import styles from './picker-button.css.js';
+import styles from './picker-button.css' with { type: 'css' };
 import chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';
 
 const chevronClass = {
diff --git a/packages/progress-bar/src/ProgressBar.ts b/packages/progress-bar/src/ProgressBar.ts
@@ -28,7 +28,7 @@ import { getLabelFromSlot } from '@spectrum-web-components/shared/src/get-label-
 import { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';
 import { LanguageResolutionController } from '@spectrum-web-components/reactive-controllers/src/LanguageResolution.js';
 import '@spectrum-web-components/field-label/sp-field-label.js';
-import styles from './progress-bar.css.js';
+import styles from './progress-bar.css' with { type: 'css' };
 
 /**
  * @element sp-progress-bar
diff --git a/packages/split-view/src/SplitView.ts b/packages/split-view/src/SplitView.ts
@@ -33,7 +33,7 @@ import { randomID } from '@spectrum-web-components/shared/src/random-id.js';
 
 import { WithSWCResizeObserver } from './types';
 
-import styles from './split-view.css.js';
+import styles from './split-view.css' with { type: 'css' };
 
 const DEFAULT_MAX_SIZE = 3840;
 
diff --git a/packages/swatch/src/Swatch.ts b/packages/swatch/src/Swatch.ts
@@ -28,7 +28,7 @@ import '@spectrum-web-components/icons-ui/icons/sp-icon-dash100.js';
 import '@spectrum-web-components/icons-ui/icons/sp-icon-dash200.js';
 import '@spectrum-web-components/icons-ui/icons/sp-icon-dash300.js';
 
-import styles from './swatch.css.js';
+import styles from './swatch.css' with { type: 'css' };
 import dashStyles from '@spectrum-web-components/icon/src/spectrum-icon-dash.css.js';
 
 export type SwatchBorder = 'light' | 'none' | undefined;
diff --git a/packages/swatch/src/SwatchGroup.ts b/packages/swatch/src/SwatchGroup.ts
@@ -26,7 +26,7 @@ import {
 import { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';
 import { MutationController } from '@lit-labs/observers/mutation-controller.js';
 
-import styles from './swatch-group.css.js';
+import styles from './swatch-group.css' with { type: 'css' };
 import type {
     Swatch,
     SwatchBorder,
diff --git a/packages/table/src/Table.ts b/packages/table/src/Table.ts
@@ -25,7 +25,7 @@ import '@spectrum-web-components/table/sp-table-body.js';
 import '@spectrum-web-components/table/sp-table-row.js';
 import '@spectrum-web-components/table/sp-table-checkbox-cell.js';
 import { property } from '@spectrum-web-components/base/src/decorators.js';
-import styles from './table.css.js';
+import styles from './table.css' with { type: 'css' };
 import { TableBody } from './TableBody.js';
 import type { TableCheckboxCell } from './TableCheckboxCell.js';
 import type { TableHead } from './TableHead.js';
diff --git a/packages/table/src/TableBody.ts b/packages/table/src/TableBody.ts
@@ -16,7 +16,7 @@ import {
     TemplateResult,
 } from '@spectrum-web-components/base';
 import { property } from '@spectrum-web-components/base/src/decorators.js';
-import styles from './table-body.css.js';
+import styles from './table-body.css' with { type: 'css' };
 import { MutationController } from '@lit-labs/observers/mutation-controller.js';
 
 /**
diff --git a/packages/table/src/TableCell.ts b/packages/table/src/TableCell.ts
@@ -17,7 +17,7 @@ import {
 } from '@spectrum-web-components/base';
 import { property } from '@spectrum-web-components/base/src/decorators.js';
 
-import styles from './table-cell.css.js';
+import styles from './table-cell.css' with { type: 'css' };
 
 /**
  * @element sp-table-cell
diff --git a/packages/table/src/TableCheckboxCell.ts b/packages/table/src/TableCheckboxCell.ts
@@ -1,4 +1,4 @@
-/* 
+/*
 Copyright 2022 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License. You may obtain a copy
@@ -21,7 +21,7 @@ import {
     query,
 } from '@spectrum-web-components/base/src/decorators.js';
 import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
-import styles from './table-checkbox-cell.css.js';
+import styles from './table-checkbox-cell.css' with { type: 'css' };
 import { Checkbox } from '@spectrum-web-components/checkbox';
 
 /**
diff --git a/packages/table/src/TableHead.ts b/packages/table/src/TableHead.ts
@@ -19,7 +19,7 @@ import { property } from '@spectrum-web-components/base/src/decorators.js';
 import type { TableHeadCell } from './TableHeadCell.js';
 import { TableCheckboxCell } from './TableCheckboxCell.js';
 
-import styles from './table-head.css.js';
+import styles from './table-head.css' with { type: 'css' };
 
 /**
  * @element sp-table-head
diff --git a/packages/table/src/TableHeadCell.ts b/packages/table/src/TableHeadCell.ts
@@ -20,7 +20,7 @@ import {
 import { property } from '@spectrum-web-components/base/src/decorators.js';
 import '@spectrum-web-components/icons-ui/icons/sp-icon-arrow100.js';
 
-import styles from './table-head-cell.css.js';
+import styles from './table-head-cell.css' with { type: 'css' };
 import arrowStyles from '@spectrum-web-components/icon/src/spectrum-icon-arrow.css.js';
 
 export type SortedEventDetails = {
diff --git a/packages/table/src/TableRow.ts b/packages/table/src/TableRow.ts
@@ -20,7 +20,7 @@ import {
     property,
     queryAssignedElements,
 } from '@spectrum-web-components/base/src/decorators.js';
-import styles from './table-row.css.js';
+import styles from './table-row.css' with { type: 'css' };
 import { TableCheckboxCell } from './TableCheckboxCell.js';
 
 /**
diff --git a/packages/tabs/src/TabsOverflow.ts b/packages/tabs/src/TabsOverflow.ts
@@ -31,7 +31,7 @@ import '@spectrum-web-components/action-button/sp-action-button.js';
 import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';
 import chevronIconStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';
 import tabSizes from './tabs-sizes.css.js';
-import styles from './tabs-overflow.css.js';
+import styles from './tabs-overflow.css' with { type: 'css' };
 
 interface TabsOverflowState {
     canScrollLeft: boolean;
diff --git a/packages/tags/src/Tag.ts b/packages/tags/src/Tag.ts
@@ -23,7 +23,7 @@ import { property } from '@spectrum-web-components/base/src/decorators.js';
 
 import '@spectrum-web-components/button/sp-clear-button.js';
 
-import styles from './tag.css.js';
+import styles from './tag.css' with { type: 'css' };
 
 /**
  * @element sp-tag
diff --git a/packages/tags/src/Tags.ts b/packages/tags/src/Tags.ts
@@ -22,7 +22,7 @@ import { RovingTabindexController } from '@spectrum-web-components/reactive-cont
 
 import { Tag } from './Tag.js';
 
-import styles from './tags.css.js';
+import styles from './tags.css' with { type: 'css' };
 
 /**
  * @element sp-tags
diff --git a/packages/thumbnail/src/Thumbnail.ts b/packages/thumbnail/src/Thumbnail.ts
@@ -20,7 +20,7 @@ import {
 import { property } from '@spectrum-web-components/base/src/decorators.js';
 import opacityCheckerboardStyles from '@spectrum-web-components/opacity-checkerboard/src/opacity-checkerboard.css.js';
 
-import styles from './thumbnail.css.js';
+import styles from './thumbnail.css' with { type: 'css' };
 
 const validSizes = [
     '50',
diff --git a/packages/tray/src/Tray.ts b/packages/tray/src/Tray.ts
@@ -26,7 +26,7 @@ import { firstFocusableIn } from '@spectrum-web-components/shared/src/first-focu
 import { MatchMediaController } from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js';
 
 import modalStyles from '@spectrum-web-components/modal/src/modal.css.js';
-import styles from './tray.css.js';
+import styles from './tray.css' with { type: 'css' };
 
 /**
  * @element sp-tray
@@ -50,7 +50,7 @@ export class Tray extends SpectrumElement {
 
     private transitionPromise = Promise.resolve();
 
-    private resolveTransitionPromise = () => {};
+    private resolveTransitionPromise: () => void = () => {};
 
     @query('.tray')
     private tray!: HTMLDivElement;
diff --git a/packages/underlay/src/Underlay.ts b/packages/underlay/src/Underlay.ts
diff --git a/projects/templates/plop-templates/component.ts.hbs b/projects/templates/plop-templates/component.ts.hbs
diff --git a/tools/grid/src/Grid.ts b/tools/grid/src/Grid.ts
diff --git a/tools/truncated/src/Truncated.ts b/tools/truncated/src/Truncated.ts
