RFC | leverage css module imports in components

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

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`

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[] = [];
 

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];

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

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',

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;

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 = {

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

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

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

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

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';
 
 /**

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

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

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';
 

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

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

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

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

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 & {

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';
 

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

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'];
 

packages/overlay/src/Overlay.ts

@@ -53,7 +53,7 @@ import {
     SlottableRequestEvent,
 } from './slottable-request-event.js';
 
-import styles from './overlay.css.js';
+import styles from './overlay.css' with { type: 'css' };
 import { FocusTrap } from 'focus-trap';
 
 const browserSupportsPopover = 'showPopover' in document.createElement('div');

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 = {

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

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;
 

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;

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,

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';

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';
 
 /**

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

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';
 
 /**

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

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 = {

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';
 
 /**

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;

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

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

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',

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;