refactor: Replace Rollup with Vite (#2656)

This is a high risk change: every byte the card ships is emitted by a
different bundler, minified by a different minifier, and every
stylesheet is compiled by a different sass. The intent is that the
card's behaviour is unchanged.

**Significant development win**: Build time drops from 24s to 1.1s 🎉 

Also adds a test suite ('dist') that runs against the built bundle.

src/camera-manager/engine-factory.ts

@@ -8,6 +8,9 @@ import type { HomeAssistant } from '../ha/types';
 import { RecordingSegmentsCache } from './cache';
 import type { CameraManagerEngine } from './engine';
 import { CameraNoEntityError } from './error';
+// Every other engine subclasses GenericCameraManagerEngine so it is loaded no
+// matter what -- no lazy loading is useful.
+import { GenericCameraManagerEngine } from './generic/engine-generic';
 import { CameraManagerRequestCache, Engine, type CameraEventCallback } from './types';
 import { getCameraEntityFromConfig } from './utils/camera-entity-from-config';
 
@@ -36,7 +39,6 @@ export class CameraManagerEngineFactory {
     let cameraManagerEngine: CameraManagerEngine;
     switch (engine) {
       case Engine.Generic:
-        const { GenericCameraManagerEngine } = await import('./generic/engine-generic');
         cameraManagerEngine = new GenericCameraManagerEngine(
           options.hassManager,
           this._entityRegistryManager,

src/card.ts

@@ -62,7 +62,7 @@ import { REPO_URL } from './const.js';
 import { registerCustomIconset } from './ha/custom-icons.js';
 import type { HomeAssistant, LovelaceCardEditor } from './ha/types.js';
 import { localize } from './localize/localize.js';
-import cardStyle from './scss/card.scss';
+import cardStyle from './scss/card.scss?inline';
 import type { MediaLoadedInfoEventDetail } from './types.js';
 import { hasAction } from './utils/action.js';
 import { getReleaseVersion } from './utils/build-info.js';

src/components/call-controls.ts

@@ -13,7 +13,7 @@ import { dispatchActionExecutionRequest } from '../card-controller/actions/utils
 import type { MicrophoneState } from '../card-controller/types.js';
 import type { ActionConfig } from '../config/schema/actions/types.js';
 import { localize } from '../localize/localize.js';
-import callControlsStyle from '../scss/call-controls.scss';
+import callControlsStyle from '../scss/call-controls.scss?inline';
 import {
   createCallAnswerAction,
   createCallEndAction,

src/components/carousel.ts

@@ -10,7 +10,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { createRef, ref, type Ref } from 'lit/directives/ref.js';
 
 import type { TransitionEffect } from '../config/schema/common/transition-effect';
-import carouselStyle from '../scss/carousel.scss';
+import carouselStyle from '../scss/carousel.scss?inline';
 import {
   CarouselController,
   type CarouselDirection,

src/components/date-picker.ts

@@ -9,7 +9,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { createRef, ref, type Ref } from 'lit/directives/ref.js';
 
 import { localize } from '../localize/localize';
-import datePickerStyle from '../scss/date-picker.scss';
+import datePickerStyle from '../scss/date-picker.scss?inline';
 import { stopEventFromActivatingCardWideActions } from '../utils/action';
 import { fireAdvancedCameraCardEvent } from '../utils/fire-advanced-camera-card-event';
 

src/components/diagnostics.ts

@@ -13,7 +13,7 @@ import type { RawAdvancedCameraCardConfig } from '../config/types';
 import type { DeviceRegistryManager } from '../ha/registry/device';
 import type { HomeAssistant } from '../ha/types';
 import { localize } from '../localize/localize';
-import basicBlockStyle from '../scss/basic-block.scss';
+import basicBlockStyle from '../scss/basic-block.scss?inline';
 import { getDiagnostics } from '../utils/diagnostics';
 import { renderNotificationBlockFromText } from './notification/block';
 

src/components/drawer.ts

@@ -13,8 +13,8 @@ import 'side-drawer';
 
 import type { SideDrawer } from 'side-drawer';
 
-import drawerInjectStyle from '../scss/drawer-inject.scss';
-import drawerStyle from '../scss/drawer.scss';
+import drawerInjectStyle from '../scss/drawer-inject.scss?inline';
+import drawerStyle from '../scss/drawer.scss?inline';
 import { stopEventFromActivatingCardWideActions } from '../utils/action.js';
 import {
   contentsChanged,

src/components/editor/cameras.ts

@@ -20,7 +20,7 @@ import { CONF_CAMERAS } from '../../config/const';
 import type { EditorMode } from '../../config/schema/editor';
 import type { HomeAssistant } from '../../ha/types';
 import { localize } from '../../localize/localize';
-import editorExpanderBodyStyle from '../../scss/editor-expander-body.scss';
+import editorExpanderBodyStyle from '../../scss/editor-expander-body.scss?inline';
 import { renderDocumentation } from './doc-link';
 import { renderForms } from './form';
 

src/components/editor/doc-link.ts

@@ -10,7 +10,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { getDocURL } from '../../components-lib/editor/doc-links';
 import type { ConfigPath } from '../../components-lib/editor/types';
 import { localize } from '../../localize/localize';
-import editorDocLinkStyle from '../../scss/editor-doc-link.scss';
+import editorDocLinkStyle from '../../scss/editor-doc-link.scss?inline';
 
 // A self-styled documentation link row. Carries its own styles so it renders
 // correctly when passed into the shadow DOM of Home Assistant elements (e.g. as

src/components/editor/folders.ts

@@ -15,7 +15,7 @@ import type { ConfigPath } from '../../components-lib/editor/types';
 import { CONF_FOLDERS } from '../../config/const';
 import type { HomeAssistant } from '../../ha/types';
 import { localize } from '../../localize/localize';
-import editorExpanderBodyStyle from '../../scss/editor-expander-body.scss';
+import editorExpanderBodyStyle from '../../scss/editor-expander-body.scss?inline';
 import { renderDocumentation } from './doc-link';
 import { renderForms } from './form';
 

src/components/editor/keyboard-shortcuts.ts

@@ -14,7 +14,7 @@ import { CONF_VIEW_KEYBOARD_SHORTCUTS } from '../../config/const.js';
 import type { KeyboardShortcut } from '../../config/schema/view.js';
 import type { HomeAssistant } from '../../ha/types.js';
 import { localize } from '../../localize/localize.js';
-import editorKeyboardShortcutsStyle from '../../scss/editor-keyboard-shortcuts.scss';
+import editorKeyboardShortcutsStyle from '../../scss/editor-keyboard-shortcuts.scss?inline';
 import { renderDocumentation } from './doc-link.js';
 import { renderForms } from './form.js';
 

src/components/editor/list.ts

@@ -9,7 +9,7 @@ import {
 import { customElement, property } from 'lit/decorators.js';
 
 import { localize } from '../../localize/localize';
-import editorListStyle from '../../scss/editor-list.scss';
+import editorListStyle from '../../scss/editor-list.scss?inline';
 import { fireAdvancedCameraCardEvent } from '../../utils/fire-advanced-camera-card-event';
 
 import './../icon';

src/components/editor/page.ts

@@ -9,7 +9,7 @@ import {
 import { customElement, property } from 'lit/decorators.js';
 
 import { localize } from '../../localize/localize';
-import editorPageStyle from '../../scss/editor-page.scss';
+import editorPageStyle from '../../scss/editor-page.scss?inline';
 import { fireAdvancedCameraCardEvent } from '../../utils/fire-advanced-camera-card-event';
 
 // The editor for one item of a list, shown in place of the list itself: a

src/components/editor/section.ts

@@ -16,7 +16,7 @@ import type { FormRequest } from '../../components-lib/editor/schema/registry';
 import { SectionController } from '../../components-lib/editor/section-controller';
 import type { ConfigPath } from '../../components-lib/editor/types';
 import type { HomeAssistant } from '../../ha/types';
-import editorSectionStyle from '../../scss/editor-section.scss';
+import editorSectionStyle from '../../scss/editor-section.scss?inline';
 import { renderDocumentation } from './doc-link';
 import { renderForms } from './form';
 

src/components/effects/base.ts

@@ -1,7 +1,7 @@
 import { LitElement, unsafeCSS, type CSSResultGroup, type PropertyValues } from 'lit';
 import { property } from 'lit/decorators.js';
 
-import effectBaseStyle from '../../scss/effect-base.scss';
+import effectBaseStyle from '../../scss/effect-base.scss?inline';
 import { forceReflow } from '../../utils/basic';
 
 export abstract class BaseEffectComponent extends LitElement {

src/components/effects/check.ts

@@ -2,7 +2,7 @@ import { html, unsafeCSS, type CSSResultGroup, type TemplateResult } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
 import checkCircleIcon from '../../images/check-circle.svg';
-import checkStyle from '../../scss/check.scss';
+import checkStyle from '../../scss/check.scss?inline';
 import { BaseEffectComponent } from './base';
 
 @customElement('advanced-camera-card-effect-check')

src/components/effects/effects.ts

@@ -2,7 +2,7 @@ import { LitElement, unsafeCSS, type PropertyValues } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
 import type { EffectsManager } from '../../card-controller/effects/effects-manager';
-import effectsStyle from '../../scss/effects.scss';
+import effectsStyle from '../../scss/effects.scss?inline';
 
 @customElement('advanced-camera-card-effects')
 export class AdvancedCameraCardEffects extends LitElement {

src/components/effects/firework-burst.ts

@@ -8,7 +8,7 @@ import {
 import { customElement, property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 
-import fireworkBurstStyle from '../../scss/firework-burst.scss';
+import fireworkBurstStyle from '../../scss/firework-burst.scss?inline';
 
 import './firework-particle';
 

src/components/effects/firework-particle.ts

@@ -7,7 +7,7 @@ import {
 } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import fireworkParticleStyle from '../../scss/firework-particle.scss';
+import fireworkParticleStyle from '../../scss/firework-particle.scss?inline';
 
 @customElement('advanced-camera-card-firework-particle')
 export class AdvancedCameraCardFireworkParticle extends LitElement {

src/components/effects/ghost.ts

@@ -1,7 +1,7 @@
 import { html, unsafeCSS, type CSSResultGroup, type TemplateResult } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import ghostStyle from '../../scss/ghost.scss';
+import ghostStyle from '../../scss/ghost.scss?inline';
 import { BaseEffectComponent } from './base';
 
 @customElement('advanced-camera-card-effect-ghost')

src/components/effects/heart.ts

@@ -7,7 +7,7 @@ import {
 } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import heartStyle from '../../scss/heart.scss';
+import heartStyle from '../../scss/heart.scss?inline';
 
 @customElement('advanced-camera-card-heart')
 export class AdvancedCameraCardHeart extends LitElement {

src/components/effects/shamrock.ts

@@ -7,7 +7,7 @@ import {
 } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import shamrockStyle from '../../scss/shamrock.scss';
+import shamrockStyle from '../../scss/shamrock.scss?inline';
 
 @customElement('advanced-camera-card-shamrock')
 export class AdvancedCameraCardShamrock extends LitElement {

src/components/effects/snowflake.ts

@@ -7,7 +7,7 @@ import {
 } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import snowflakeStyle from '../../scss/snowflake.scss';
+import snowflakeStyle from '../../scss/snowflake.scss?inline';
 
 @customElement('advanced-camera-card-snowflake')
 export class AdvancedCameraCardSnowflake extends LitElement {

src/components/elements.ts

@@ -32,7 +32,7 @@ import type {
 } from '../config/schema/elements/types.js';
 import type { HomeAssistant } from '../ha/types.js';
 import { localize } from '../localize/localize.js';
-import elementsStyle from '../scss/elements.scss';
+import elementsStyle from '../scss/elements.scss?inline';
 import { AdvancedCameraCardError } from '../types.js';
 import { errorToConsole } from '../utils/basic.js';
 import { fireAdvancedCameraCardEvent } from '../utils/fire-advanced-camera-card-event.js';

src/components/gallery/gallery-core.ts

@@ -16,7 +16,7 @@ import {
 import { THUMBNAIL_WIDTH_DEFAULT } from '../../config/schema/common/controls/thumbnails.js';
 import type { CardWideConfig } from '../../config/schema/types.js';
 import type { HomeAssistant } from '../../ha/types.js';
-import galleryCoreStyle from '../../scss/gallery-core.scss';
+import galleryCoreStyle from '../../scss/gallery-core.scss?inline';
 
 import '../progress-indicator.js';
 

src/components/gallery/gallery.ts

@@ -28,7 +28,7 @@ import type { MediaGalleryConfig } from '../../config/schema/media-gallery.js';
 import type { CardWideConfig } from '../../config/schema/types.js';
 import { MEDIA_CHUNK_SIZE_DEFAULT } from '../../const.js';
 import type { HomeAssistant } from '../../ha/types.js';
-import galleryStyle from '../../scss/gallery.scss';
+import galleryStyle from '../../scss/gallery.scss?inline';
 import { stopEventFromActivatingCardWideActions } from '../../utils/action.js';
 import { ViewItemClassifier } from '../../view/item-classifier.js';
 import type { ViewFolder, ViewItem } from '../../view/item.js';

src/components/icon.ts

@@ -10,7 +10,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { IconController } from '../components-lib/icon-controller';
 import type { InternalIcon } from '../config/schema/common/icon.js';
 import type { HomeAssistant } from '../ha/types';
-import iconStyle from '../scss/icon.scss';
+import iconStyle from '../scss/icon.scss?inline';
 import { contentsChanged } from '../utils/basic.js';
 
 @customElement('advanced-camera-card-icon')

src/components/image-player.ts

@@ -11,7 +11,7 @@ import { createRef, ref, type Ref } from 'lit/directives/ref.js';
 
 import { MediaLoadedInfoSourceController } from '../components-lib/media-loaded-info-source-controller.js';
 import { ImageMediaPlayerController } from '../components-lib/media-player/image';
-import imagePlayerStyle from '../scss/image-player.scss';
+import imagePlayerStyle from '../scss/image-player.scss?inline';
 import type {
   MediaPlayer,
   MediaPlayerController,

src/components/image-updating-player.ts

@@ -31,7 +31,7 @@ import { isHassDifferent } from '../ha/is-hass-different.js';
 import type { HomeAssistant } from '../ha/types.js';
 import defaultImage from '../images/iris-screensaver.jpg';
 import { localize } from '../localize/localize.js';
-import imageUpdatingPlayerStyle from '../scss/image-updating-player.scss';
+import imageUpdatingPlayerStyle from '../scss/image-updating-player.scss?inline';
 import type { MediaPlayer, MediaPlayerController } from '../types.js';
 import { contentsChanged } from '../utils/basic.js';
 import { fireAdvancedCameraCardEvent } from '../utils/fire-advanced-camera-card-event.js';

src/components/image.ts

@@ -22,7 +22,7 @@ import {
 import { type ImageViewConfig, type ImageViewProxyConfig } from '../config/schema/image';
 import type { HomeAssistant } from '../ha/types';
 import { localize } from '../localize/localize.js';
-import imageStyle from '../scss/image.scss';
+import imageStyle from '../scss/image.scss?inline';
 import type {
   MediaPlayer,
   MediaPlayerController,

src/components/key-assigner.ts

@@ -11,7 +11,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { KeyAssignerController } from '../components-lib/key-assigner-controller';
 import type { KeyboardShortcut } from '../config/schema/view';
 import { localize } from '../localize/localize';
-import keyAssignerStyle from '../scss/key-assigner.scss';
+import keyAssignerStyle from '../scss/key-assigner.scss?inline';
 
 import './icon';
 

src/components/live/carousel.ts

@@ -31,7 +31,7 @@ import type { TransitionEffect } from '../../config/schema/common/transition-eff
 import type { LiveConfig } from '../../config/schema/live.js';
 import { configDefaults, type CardWideConfig } from '../../config/schema/types.js';
 import type { HomeAssistant } from '../../ha/types.js';
-import liveCarouselStyle from '../../scss/live-carousel.scss';
+import liveCarouselStyle from '../../scss/live-carousel.scss?inline';
 import { stopEventFromActivatingCardWideActions } from '../../utils/action.js';
 import type { CarouselSelected } from '../../utils/embla/carousel-controller.js';
 import { getTextDirection } from '../../utils/text-direction.js';

src/components/live/grid.ts

@@ -18,7 +18,7 @@ import type { MediaGridSelected } from '../../components-lib/media-grid-controll
 import type { LiveConfig } from '../../config/schema/live.js';
 import type { CardWideConfig } from '../../config/schema/types.js';
 import type { HomeAssistant } from '../../ha/types.js';
-import liveGridStyle from '../../scss/live-grid.scss';
+import liveGridStyle from '../../scss/live-grid.scss?inline';
 import { contentsChanged } from '../../utils/basic.js';
 
 import './carousel.js';

src/components/live/index.ts

@@ -21,7 +21,7 @@ import '../../components-lib/live/types.js';
 import type { LiveConfig } from '../../config/schema/live.js';
 import type { CardWideConfig } from '../../config/schema/types.js';
 import type { HomeAssistant } from '../../ha/types.js';
-import basicBlockStyle from '../../scss/basic-block.scss';
+import basicBlockStyle from '../../scss/basic-block.scss?inline';
 import { contentsChanged } from '../../utils/basic.js';
 
 import './grid.js';

src/components/live/provider.ts

@@ -23,7 +23,7 @@ import type { LiveConfig } from '../../config/schema/live.js';
 import type { CardWideConfig } from '../../config/schema/types.js';
 import type { HomeAssistant } from '../../ha/types.js';
 import { localize } from '../../localize/localize.js';
-import liveProviderStyle from '../../scss/live-provider.scss';
+import liveProviderStyle from '../../scss/live-provider.scss?inline';
 import type {
   MediaPlayer,
   MediaPlayerController,

src/components/live/providers/go2rtc-experimental/index.ts

@@ -34,7 +34,7 @@ import type { MicrophoneConfig } from '../../../../config/schema/live.js';
 import type { CardWideConfig } from '../../../../config/schema/types.js';
 import type { HomeAssistant } from '../../../../ha/types.js';
 import { localize } from '../../../../localize/localize.js';
-import liveGo2RTCExperimentalStyle from '../../../../scss/live-go2rtc-experimental.scss';
+import liveGo2RTCExperimentalStyle from '../../../../scss/live-go2rtc-experimental.scss?inline';
 import type { MediaPlayer, MediaPlayerController } from '../../../../types.js';
 import {
   dispatchMediaPauseEvent,

src/components/live/providers/go2rtc/index.ts

@@ -18,7 +18,7 @@ import {
 import type { MicrophoneConfig } from '../../../../config/schema/live.js';
 import type { HomeAssistant } from '../../../../ha/types.js';
 import { localize } from '../../../../localize/localize.js';
-import liveGo2RTCStyle from '../../../../scss/live-go2rtc.scss';
+import liveGo2RTCStyle from '../../../../scss/live-go2rtc.scss?inline';
 import type { MediaPlayer, MediaPlayerController } from '../../../../types.js';
 import { renderMediaNotification } from '../../../notification/media.js';
 import { VideoRTC } from './video-rtc.js';

src/components/live/providers/ha.ts

@@ -16,7 +16,7 @@ import '../../../patches/ha-camera-stream';
 import '../../../patches/ha-hls-player.js';
 import '../../../patches/ha-web-rtc-player.js';
 
-import liveHAStyle from '../../../scss/live-ha.scss';
+import liveHAStyle from '../../../scss/live-ha.scss?inline';
 import type {
   MediaPlayer,
   MediaPlayerController,

src/components/live/providers/image.ts

@@ -12,7 +12,7 @@ import type { Camera } from '../../../camera-manager/camera.js';
 import type { MediaUnavailableIssueReason } from '../../../card-controller/issues/issues/media-unavailable.js';
 import { dispatchLiveErrorEvent } from '../../../components-lib/live/utils/dispatch-live-error.js';
 import type { HomeAssistant } from '../../../ha/types';
-import basicBlockStyle from '../../../scss/basic-block.scss';
+import basicBlockStyle from '../../../scss/basic-block.scss?inline';
 import type {
   MediaPlayer,
   MediaPlayerController,

src/components/live/providers/jsmpeg.ts

@@ -20,7 +20,7 @@ import type { CardWideConfig } from '../../../config/schema/types.js';
 import { homeAssistantGetSignedURLIfNecessary } from '../../../ha/sign-path.js';
 import type { HomeAssistant } from '../../../ha/types.js';
 import { localize } from '../../../localize/localize.js';
-import liveJSMPEGStyle from '../../../scss/live-jsmpeg.scss';
+import liveJSMPEGStyle from '../../../scss/live-jsmpeg.scss?inline';
 import type { MediaPlayer, MediaPlayerController } from '../../../types.js';
 import { errorToConsole } from '../../../utils/basic.js';
 import {

src/components/live/providers/webrtc-card.ts

@@ -20,7 +20,7 @@ import type { Notification } from '../../../config/schema/actions/types.js';
 import type { CardWideConfig } from '../../../config/schema/types.js';
 import type { HomeAssistant } from '../../../ha/types.js';
 import { localize } from '../../../localize/localize.js';
-import liveWebRTCCardStyle from '../../../scss/live-webrtc-card.scss';
+import liveWebRTCCardStyle from '../../../scss/live-webrtc-card.scss?inline';
 import type { MediaPlayer, MediaPlayerController } from '../../../types.js';
 import { mayHaveAudio } from '../../../utils/audio.js';
 import {

src/components/loading.ts

@@ -7,7 +7,7 @@ import {
 } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import loadingStyle from '../scss/loading.scss';
+import loadingStyle from '../scss/loading.scss?inline';
 import type { EffectName, EffectsManagerInterface } from '../types';
 import { getReleaseVersion } from '../utils/build-info.js';
 

src/components/media-dimensions-container.ts

@@ -11,7 +11,7 @@ import { createRef, ref, type Ref } from 'lit/directives/ref.js';
 
 import { MediaDimensionsContainerController } from '../components-lib/media-dimensions-container-controller.js';
 import type { CameraDimensionsConfig } from '../config/schema/cameras';
-import mediaDimensionsContainerStyle from '../scss/media-dimensions-container.scss';
+import mediaDimensionsContainerStyle from '../scss/media-dimensions-container.scss?inline';
 
 @customElement('advanced-camera-card-media-dimensions-container')
 export class AdvancedCameraCardMediaDimensionsContainer extends LitElement {

src/components/media-filter.ts

@@ -21,7 +21,7 @@ import {
 import type { CardWideConfig } from '../config/schema/types';
 import type { HomeAssistant } from '../ha/types';
 import { localize } from '../localize/localize';
-import mediaFilterStyle from '../scss/media-filter.scss';
+import mediaFilterStyle from '../scss/media-filter.scss?inline';
 import { AdvancedCameraCardDatePicker } from './date-picker';
 
 import './date-picker.js';

src/components/media-grid.ts

@@ -11,7 +11,7 @@ import { createRef, ref, type Ref } from 'lit/directives/ref.js';
 
 import { MediaGridController } from '../components-lib/media-grid-controller.js';
 import type { ViewDisplayConfig } from '../config/schema/common/display.js';
-import mediaGridStyle from '../scss/media-grid.scss';
+import mediaGridStyle from '../scss/media-grid.scss?inline';
 
 @customElement('advanced-camera-card-media-grid')
 export class AdvancedCameraCardMediaGrid extends LitElement {

src/components/menu.ts

@@ -17,7 +17,7 @@ import type { MenuConfig } from '../config/schema/menu.js';
 import { getEntityTitle } from '../ha/get-entity-title.js';
 import type { EntityRegistryManager } from '../ha/registry/entity/types.js';
 import type { HomeAssistant } from '../ha/types.js';
-import menuStyle from '../scss/menu.scss';
+import menuStyle from '../scss/menu.scss?inline';
 import { hasAction } from '../utils/action.js';
 import { contentsChanged } from '../utils/basic.js';
 

src/components/next-prev-control.ts

@@ -12,7 +12,7 @@ import { isAutoHidden, type AutoHideState } from '../components-lib/auto-hide.js
 import type { NextPreviousControlConfig } from '../config/schema/common/controls/next-previous.js';
 import type { Icon } from '../config/schema/common/icon.js';
 import type { HomeAssistant } from '../ha/types.js';
-import controlStyle from '../scss/next-previous-control.scss';
+import controlStyle from '../scss/next-previous-control.scss?inline';
 import { contentsChanged } from '../utils/basic.js';
 import { renderTask } from '../utils/task.js';
 import { createFetchThumbnailTask } from '../utils/thumbnail.js';

src/components/notification/block.ts

@@ -15,7 +15,7 @@ import {
 import { NotificationContextController } from '../../components-lib/notification/notification-context-controller.js';
 import type { Notification } from '../../config/schema/actions/types.js';
 import { localize } from '../../localize/localize.js';
-import notificationBlockStyle from '../../scss/notification-block.scss';
+import notificationBlockStyle from '../../scss/notification-block.scss?inline';
 import {
   renderControl,
   renderDetail,

src/components/notification/popup.ts

@@ -13,7 +13,7 @@ import { NotificationContextController } from '../../components-lib/notification
 import { NotificationPopupController } from '../../components-lib/notification/notification-popup-controller.js';
 import type { Notification } from '../../config/schema/actions/types.js';
 import { localize } from '../../localize/localize.js';
-import notificationPopupStyle from '../../scss/notification-popup.scss';
+import notificationPopupStyle from '../../scss/notification-popup.scss?inline';
 import {
   renderControl,
   renderDetail,

src/components/overlay.ts

@@ -7,7 +7,7 @@ import {
 } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import overlayStyle from '../scss/overlay.scss';
+import overlayStyle from '../scss/overlay.scss?inline';
 
 @customElement('advanced-camera-card-overlay')
 export class AdvancedCameraCardOverlay extends LitElement {

src/components/progress-indicator.ts

@@ -10,7 +10,7 @@ import { classMap, type ClassInfo } from 'lit/directives/class-map.js';
 import { ref, type Ref } from 'lit/directives/ref.js';
 
 import type { CardWideConfig } from '../config/schema/types';
-import progressIndicatorStyle from '../scss/progress-indicator.scss';
+import progressIndicatorStyle from '../scss/progress-indicator.scss?inline';
 
 import './icon.js';
 

src/components/ptz.ts

@@ -20,7 +20,7 @@ import type {
 } from '../config/schema/common/controls/ptz.js';
 import type { HomeAssistant } from '../ha/types.js';
 import { localize } from '../localize/localize.js';
-import ptzStyle from '../scss/ptz.scss';
+import ptzStyle from '../scss/ptz.scss?inline';
 import type { Interaction } from '../types.js';
 import { hasAction } from '../utils/action.js';
 import { prettifyTitle } from '../utils/basic.js';

src/components/select.ts

@@ -12,7 +12,7 @@ import { createRef, ref, type Ref } from 'lit/directives/ref.js';
 import { isEqual } from 'lodash-es';
 
 import { grSelectElements } from '../scoped-elements/gr-select';
-import selectStyle from '../scss/select.scss';
+import selectStyle from '../scss/select.scss?inline';
 import { contentsChanged } from '../utils/basic';
 import { fireAdvancedCameraCardEvent } from '../utils/fire-advanced-camera-card-event';
 

src/components/status-bar.ts

@@ -15,7 +15,7 @@ import type { AutoHideState } from '../components-lib/auto-hide.js';
 import { StatusBarController } from '../components-lib/status-bar-controller';
 import type { StatusBarItem } from '../config/schema/actions/types.js';
 import type { StatusBarConfig } from '../config/schema/status-bar.js';
-import statusStyle from '../scss/status.scss';
+import statusStyle from '../scss/status.scss?inline';
 import { hasAction } from '../utils/action';
 import { contentsChanged } from '../utils/basic.js';
 

src/components/submenu/index.ts

@@ -12,7 +12,7 @@ import { actionHandler } from '../../action-handler-directive.js';
 import type { LockManagerEpoch } from '../../card-controller/lock/types';
 import { getEntityTitle } from '../../ha/get-entity-title.js';
 import type { HomeAssistant } from '../../ha/types.js';
-import submenuStyle from '../../scss/submenu.scss';
+import submenuStyle from '../../scss/submenu.scss?inline';
 import {
   hasAction,
   stopEventFromActivatingCardWideActions,

src/components/submenu/select-button.ts

@@ -20,7 +20,7 @@ import { getEntityTitle } from '../../ha/get-entity-title.js';
 import { isHassDifferent } from '../../ha/is-hass-different.js';
 import type { EntityRegistryManager } from '../../ha/registry/entity/types.js';
 import type { HomeAssistant } from '../../ha/types.js';
-import menuButtonStyle from '../../scss/menu-button.scss';
+import menuButtonStyle from '../../scss/menu-button.scss?inline';
 import { createSelectOptionAction, hasAction } from '../../utils/action.js';
 
 import '../icon.js';

src/components/submenu/submenu-button.ts

@@ -12,7 +12,7 @@ import { actionHandler } from '../../action-handler-directive.js';
 import type { LockManagerEpoch } from '../../card-controller/lock/types';
 import type { MenuSubmenu } from '../../config/schema/elements/custom/menu/submenu.js';
 import type { HomeAssistant } from '../../ha/types.js';
-import menuButtonStyle from '../../scss/menu-button.scss';
+import menuButtonStyle from '../../scss/menu-button.scss?inline';
 import { hasAction } from '../../utils/action.js';
 
 import '../icon.js';

src/components/surround-basic.ts

@@ -8,7 +8,7 @@ import {
 import { customElement, property } from 'lit/decorators.js';
 import { createRef, ref, type Ref } from 'lit/directives/ref.js';
 
-import surroundBasicStyle from '../scss/surround-basic.scss';
+import surroundBasicStyle from '../scss/surround-basic.scss?inline';
 import { contentsChanged } from '../utils/basic.js';
 
 import './drawer.js';

src/components/surround.ts

@@ -17,7 +17,7 @@ import type { ThumbnailsControlConfig } from '../config/schema/common/controls/t
 import type { MiniTimelineControlConfig } from '../config/schema/common/controls/timeline.js';
 import type { CardWideConfig } from '../config/schema/types.js';
 import type { HomeAssistant } from '../ha/types.js';
-import basicBlockStyle from '../scss/basic-block.scss';
+import basicBlockStyle from '../scss/basic-block.scss?inline';
 import { contentsChanged } from '../utils/basic.js';
 import { fireAdvancedCameraCardEvent } from '../utils/fire-advanced-camera-card-event.js';
 

src/components/thumbnail-carousel.ts

@@ -25,7 +25,7 @@ import type { ThumbnailsControlConfig } from '../config/schema/common/controls/t
 import type { CardWideConfig } from '../config/schema/types.js';
 import { MEDIA_CHUNK_SIZE_DEFAULT } from '../const.js';
 import type { HomeAssistant } from '../ha/types.js';
-import thumbnailCarouselStyle from '../scss/thumbnail-carousel.scss';
+import thumbnailCarouselStyle from '../scss/thumbnail-carousel.scss?inline';
 import { stopEventFromActivatingCardWideActions } from '../utils/action.js';
 import type { CarouselDirection } from '../utils/embla/carousel-controller.js';
 import { fireAdvancedCameraCardEvent } from '../utils/fire-advanced-camera-card-event.js';

src/components/thumbnail/details.ts

@@ -14,7 +14,7 @@ import type { CameraManager } from '../../camera-manager/manager';
 import { MediaNotificationController } from '../../components-lib/media/notification-controller';
 import type { NotificationDetail } from '../../config/schema/actions/types';
 import type { HomeAssistant } from '../../ha/types';
-import thumbnailDetailsStyle from '../../scss/thumbnail-details.scss';
+import thumbnailDetailsStyle from '../../scss/thumbnail-details.scss?inline';
 import type { ViewItem } from '../../view/item';
 
 import '../icon';

src/components/thumbnail/feature/feature.ts

@@ -20,7 +20,7 @@ import {
 import { ThumbnailFeatureController } from '../../../components-lib/thumbnail/feature/controller';
 import type { HomeAssistant } from '../../../ha/types';
 import { localize } from '../../../localize/localize';
-import thumbnailFeatureStyle from '../../../scss/thumbnail-feature.scss';
+import thumbnailFeatureStyle from '../../../scss/thumbnail-feature.scss?inline';
 import {
   createNotificationAction,
   stopEventFromActivatingCardWideActions,

src/components/thumbnail/feature/thumbnail.ts

@@ -11,7 +11,7 @@ import { customElement, property } from 'lit/decorators.js';
 
 import type { HomeAssistant } from '../../../ha/types';
 import { localize } from '../../../localize/localize';
-import thumbnailFeatureThumbnailStyle from '../../../scss/thumbnail-feature-thumbnail.scss';
+import thumbnailFeatureThumbnailStyle from '../../../scss/thumbnail-feature-thumbnail.scss?inline';
 import { renderTask } from '../../../utils/task';
 import {
   createFetchThumbnailTask,

src/components/thumbnail/thumbnail.ts

@@ -6,7 +6,7 @@ import type { FoldersManager } from '../../card-controller/folders/manager.js';
 import type { ViewItemManager } from '../../card-controller/view/item-manager.js';
 import type { ViewManagerEpoch } from '../../card-controller/view/types.js';
 import type { HomeAssistant } from '../../ha/types.js';
-import thumbnailStyle from '../../scss/thumbnail.scss';
+import thumbnailStyle from '../../scss/thumbnail.scss?inline';
 import type { ViewItem } from '../../view/item.js';
 
 import './details.js';

src/components/timeline-core.ts

@@ -26,7 +26,7 @@ import type { TimelineCoreComponentConfig } from '../config/schema/common/contro
 import type { CardWideConfig } from '../config/schema/types';
 import type { HomeAssistant } from '../ha/types';
 import { localize } from '../localize/localize';
-import timelineCoreStyle from '../scss/timeline-core.scss';
+import timelineCoreStyle from '../scss/timeline-core.scss?inline';
 import { contentsChanged } from '../utils/basic';
 
 import './date-picker.js';

src/components/timeline.ts

@@ -15,7 +15,7 @@ import type { ConditionStateManagerReadonlyInterface } from '../condition-trigge
 import type { TimelineConfig } from '../config/schema/timeline';
 import type { CardWideConfig } from '../config/schema/types';
 import type { HomeAssistant } from '../ha/types';
-import basicBlockStyle from '../scss/basic-block.scss';
+import basicBlockStyle from '../scss/basic-block.scss?inline';
 
 import './surround.js';
 import './timeline-core.js';

src/components/video-player.ts

@@ -11,7 +11,7 @@ import { createRef, ref, type Ref } from 'lit/directives/ref.js';
 
 import { MediaLoadedInfoSourceController } from '../components-lib/media-loaded-info-source-controller.js';
 import { VideoMediaPlayerController } from '../components-lib/media-player/video';
-import videoPlayerStyle from '../scss/video-player.scss';
+import videoPlayerStyle from '../scss/video-player.scss?inline';
 import type { MediaPlayer, MediaPlayerController, MediaPlayerElement } from '../types';
 import { mayHaveAudio } from '../utils/audio';
 import {

src/components/viewer/carousel.ts

@@ -27,7 +27,7 @@ import { localize } from '../../localize/localize.js';
 
 import '../../patches/ha-hls-player.js';
 
-import viewerCarouselStyle from '../../scss/viewer-carousel.scss';
+import viewerCarouselStyle from '../../scss/viewer-carousel.scss?inline';
 import { stopEventFromActivatingCardWideActions } from '../../utils/action.js';
 import { contentsChanged } from '../../utils/basic.js';
 import type { CarouselSelected } from '../../utils/embla/carousel-controller.js';

src/components/viewer/grid.ts

@@ -20,7 +20,7 @@ import type { HomeAssistant } from '../../ha/types.js';
 
 import '../../patches/ha-hls-player.js';
 
-import basicBlockStyle from '../../scss/basic-block.scss';
+import basicBlockStyle from '../../scss/basic-block.scss?inline';
 
 import './carousel';
 

src/components/viewer/index.ts

@@ -18,7 +18,7 @@ import type { HomeAssistant } from '../../ha/types.js';
 
 import '../../patches/ha-hls-player.js';
 
-import viewerStyle from '../../scss/viewer.scss';
+import viewerStyle from '../../scss/viewer.scss?inline';
 import { ViewItemClassifier } from '../../view/item-classifier.js';
 import { renderNoMediaNotification } from '../notification/media.js';
 

src/components/viewer/provider.ts

@@ -30,7 +30,7 @@ import type { HomeAssistant, ResolvedMedia } from '../../ha/types.js';
 
 import '../../patches/ha-hls-player.js';
 
-import viewerProviderStyle from '../../scss/viewer-provider.scss';
+import viewerProviderStyle from '../../scss/viewer-provider.scss?inline';
 import type {
   MediaPlayer,
   MediaPlayerController,

src/components/views.ts

@@ -27,7 +27,7 @@ import type { RawAdvancedCameraCardConfig } from '../config/types.js';
 import type { DeviceRegistryManager } from '../ha/registry/device/index.js';
 import type { ResolvedMediaCache } from '../ha/resolved-media.js';
 import type { HomeAssistant } from '../ha/types.js';
-import viewsStyle from '../scss/views.scss';
+import viewsStyle from '../scss/views.scss?inline';
 import { contentsChanged } from '../utils/basic.js';
 
 import './surround.js';

src/declarations.d.ts

@@ -1,4 +1,7 @@
-declare module '*.scss';
+declare module '*.scss?inline' {
+  const css: string;
+  export default css;
+}
 declare module '*.svg' {
   const icon: { path: string; viewBox: string };
   export default icon;

src/editor.ts

@@ -29,7 +29,7 @@ import { CONF_CAMERAS } from './config/const.js';
 import type { RawAdvancedCameraCardConfig } from './config/types.js';
 import type { HAFormSchema, HomeAssistant, LovelaceCardEditor } from './ha/types.js';
 import { localize } from './localize/localize.js';
-import editorStyle from './scss/editor.scss';
+import editorStyle from './scss/editor.scss?inline';
 import { fireAdvancedCameraCardEvent } from './utils/fire-advanced-camera-card-event.js';
 
 interface EditorSection {

src/patches/ha-camera-stream.ts

@@ -28,7 +28,7 @@ import { MediaLoadedInfoSourceController } from '../components-lib/media-loaded-
 
 import '../components/image-player.js';
 
-import liveHAComponentsStyle from '../scss/live-ha-components.scss';
+import liveHAComponentsStyle from '../scss/live-ha-components.scss?inline';
 import type {
   MediaLoadedInfo,
   MediaLoadedInfoEventDetail,

src/patches/ha-hls-player.ts

@@ -25,7 +25,7 @@ import { MediaLoadedInfoSourceController } from '../components-lib/media-loaded-
 import { VideoMediaPlayerController } from '../components-lib/media-player/video.js';
 import { renderMediaNotification } from '../components/notification/media.js';
 import { localize } from '../localize/localize.js';
-import liveHAComponentsStyle from '../scss/live-ha-components.scss';
+import liveHAComponentsStyle from '../scss/live-ha-components.scss?inline';
 import type { MediaPlayer, MediaPlayerController } from '../types.js';
 import { mayHaveAudio } from '../utils/audio.js';
 import { errorToConsole } from '../utils/basic.js';

src/patches/ha-web-rtc-player.ts

@@ -25,7 +25,7 @@ import { MediaLoadedInfoSourceController } from '../components-lib/media-loaded-
 import { VideoMediaPlayerController } from '../components-lib/media-player/video.js';
 import { renderMediaNotification } from '../components/notification/media.js';
 import { localize } from '../localize/localize.js';
-import liveHAComponentsStyle from '../scss/live-ha-components.scss';
+import liveHAComponentsStyle from '../scss/live-ha-components.scss?inline';
 import type { MediaPlayer, MediaPlayerController } from '../types.js';
 import {
   addAudioTracksMuteStateListener,

src/scss/card.scss

@@ -1,5 +1,5 @@
 @use './themes/base.scss';
-@import './z-index.scss';
+@use './z-index.scss' as *;
 
 :host {
   display: block;

src/scss/drawer-inject.scss

@@ -1,4 +1,4 @@
-@import './z-index.scss';
+@use './z-index.scss' as *;
 
 :host {
   // Drawer width sizes to contents.

src/scss/effects.scss

@@ -1,4 +1,4 @@
-@import './z-index.scss';
+@use './z-index.scss' as *;
 
 :host {
   display: block;

src/scss/themes/base.scss

@@ -1,6 +1,6 @@
-@import 'dark.scss';
-@import 'light.scss';
-@import 'traditional.scss';
+@use 'dark.scss' as *;
+@use 'light.scss' as *;
+@use 'traditional.scss' as *;
 
 :host {
   /*********