refactor(styles): split components.css into per-section files (#657)

components.css (14205 LOC) → 84 per-section files in src/styles/components/ +
an index.css that imports them in original cascade order.

Same approach as the theme.css split: top-level sections are detected by
single-dash or 3+ dash header decoration (/^\/\* ─(?: |─{2,})/), 2-dash
sub-sections stay inside their parent. Concatenating in @import order
reproduces the original byte stream (+1 trailing newline, cosmetic).

Each section is now self-contained — touching Tracklist, Modal, Hero,
Sidebar, etc. only opens one focused file.

Generated via /tmp/split-components-css.mjs.
This commit is contained in:
Frank Stellmacher
2026-05-13 19:10:11 +02:00
committed by GitHub
parent 45a6a18849
commit 4b4cf42167
87 changed files with 14215 additions and 14206 deletions
+85
View File
@@ -0,0 +1,85 @@
@import './_intro.css';
@import './hero.css';
@import './page-header-row-title-actions.css';
@import './section-titles.css';
@import './album-card.css';
@import './artist-card-grid-view.css';
@import './composer-grid-text-only-compact.css';
@import './album-row-container.css';
@import './artist-card-selection-checkbox.css';
@import './live-search.css';
@import './album-detail.css';
@import './offline-library.css';
@import './cover-lightbox.css';
@import './offline-cache-button.css';
@import './download-folder-modal.css';
@import './song-info-modal.css';
@import './tracklist.css';
@import './modal.css';
@import './playback-delay-sleep-delayed-start-modal.css';
@import './lucky-mix-pips-shared-by-the-inline-queue-lucky-cube-indicator.css';
@import './playlist-edit-modal.css';
@import './artists-page.css';
@import './years-page.css';
@import './settings.css';
@import './help-page.css';
@import './normalization-block-per-mode-sub-section.css';
@import './sidebar-customizer.css';
@import './login-page.css';
@import './loading-empty.css';
@import './fullscreen-player-adaptive-portrait.css';
@import './context-menu.css';
@import './css-tooltips.css';
@import './playlists-page.css';
@import './statistics-page.css';
@import './connection-indicator.css';
@import './offline-overlay.css';
@import './now-playing-page.css';
@import './now-playing-page-2.css';
@import './radio-nowplaying-section.css';
@import './equalizer.css';
@import './custom-select.css';
@import './changelog.css';
@import './genre-filter-bar.css';
@import './genre-tag-cloud.css';
@import './random-landing.css';
@import './playlists-overview-header.css';
@import './playlist-card-grid-overview.css';
@import './internet-radio.css';
@import './radio-toolbar.css';
@import './radio-card-edit-chip.css';
@import './alphabet-filter-bar.css';
@import './artists-page-alphabet-bar.css';
@import './radio-favorite-star.css';
@import './radio-browser-directory.css';
@import './bulk-select.css';
@import './playlist-search-panel.css';
@import './context-menu-submenu.css';
@import './tracklist-compact-title-artist-rows.css';
@import './artist-detail-page.css';
@import './album-artist-grid-fewer-columns.css';
@import './hero-mobile.css';
@import './live-search-full-width.css';
@import './section-page-titles.css';
@import './album-detail-header-stack-vertically-on-mobile.css';
@import './page-padding.css';
@import './hide-desktop-search-on-mobile.css';
@import './search-bar.css';
@import './results-area.css';
@import './empty-state.css';
@import './category-chips.css';
@import './recent-searches.css';
@import './section-headers.css';
@import './result-items.css';
@import './album-header-mobile-actions.css';
@import './album-tracklist-mobile.css';
@import './most-played-page.css';
@import './ui-scale-slider.css';
@import './zip-download-overlay.css';
@import './device-sync.css';
@import './what-s-new-banner-page.css';
@import './page.css';
@import './mini-player-window.css';
@import './_banner.css';
@import './np-dash.css';
@import './orbit-session-top-strip.css';