From 32f67e838f1fa5b0a095f045d7276b1914233ff6 Mon Sep 17 00:00:00 2001 From: Petitminion Date: Thu, 15 May 2025 17:46:56 +0200 Subject: [PATCH] $ sass-migrator module --migrate-deps your-entrypoint.scss --- front/src/components/library/FileUpload.vue | 2 +- front/src/components/playlist/Card.vue | 2 +- front/src/components/podcast/Card.vue | 2 +- front/src/components/radio/Card.vue | 2 +- front/src/components/ui/Activity.vue | 2 +- front/src/components/ui/Alert.vue | 2 +- front/src/components/ui/Input.vue | 2 +- front/src/components/ui/Loader.vue | 2 +- front/src/components/ui/Modal.vue | 2 +- front/src/components/ui/Pagination.vue | 2 +- front/src/components/ui/Popover.vue | 2 +- front/src/components/ui/Tabs.vue | 2 +- front/src/components/ui/Textarea.vue | 2 +- front/src/components/ui/Toc.vue | 2 +- front/src/components/ui/button/Options.vue | 2 +- front/src/components/ui/button/Play.vue | 2 +- front/src/style/_main.scss | 106 ++++++++++---------- front/src/style/base/generic.scss | 10 +- front/src/style/base/index.scss | 2 +- front/src/style/font.scss | 2 +- front/src/style/funkwhale.scss | 10 +- front/src/style/inc/theme.scss | 8 +- front/src/style/themes/dark/_main.scss | 2 +- front/src/style/themes/dark/_vars.scss | 2 +- front/src/style/themes/light/_main.scss | 2 +- front/src/views/playlists/Detail.vue | 2 +- front/ui-docs/vite.config.ts | 6 +- front/vite.config.ts | 4 +- 28 files changed, 96 insertions(+), 92 deletions(-) diff --git a/front/src/components/library/FileUpload.vue b/front/src/components/library/FileUpload.vue index 432352e5d..c6d3d9357 100644 --- a/front/src/components/library/FileUpload.vue +++ b/front/src/components/library/FileUpload.vue @@ -589,7 +589,7 @@ const isServerDisclosureOpen = ref(false) v-model="fsPath" :loading="isLoadingFs" :data="fsStatus" - @import="importFs" + @use="importFs" /> diff --git a/front/src/components/podcast/Card.vue b/front/src/components/podcast/Card.vue index 2a31fb278..970ab593f 100644 --- a/front/src/components/podcast/Card.vue +++ b/front/src/components/podcast/Card.vue @@ -27,5 +27,5 @@ const timeAgo = useTimeAgo(new Date(podcast.artist?.modification_date ?? new Dat diff --git a/front/src/components/radio/Card.vue b/front/src/components/radio/Card.vue index f16f2957f..89930095d 100644 --- a/front/src/components/radio/Card.vue +++ b/front/src/components/radio/Card.vue @@ -41,5 +41,5 @@ const { radio, small, ...cardProps } = defineProps<{ diff --git a/front/src/components/ui/Activity.vue b/front/src/components/ui/Activity.vue index 3904f7a2b..ec6556294 100644 --- a/front/src/components/ui/Activity.vue +++ b/front/src/components/ui/Activity.vue @@ -69,5 +69,5 @@ const profileParams = computed(() => { diff --git a/front/src/components/ui/Alert.vue b/front/src/components/ui/Alert.vue index d17fc083a..997cba49e 100644 --- a/front/src/components/ui/Alert.vue +++ b/front/src/components/ui/Alert.vue @@ -32,5 +32,5 @@ const props = defineProps() diff --git a/front/src/components/ui/Input.vue b/front/src/components/ui/Input.vue index 0f8efb262..2763bacea 100644 --- a/front/src/components/ui/Input.vue +++ b/front/src/components/ui/Input.vue @@ -156,7 +156,7 @@ const model = defineModel({ required: true }) diff --git a/front/src/components/ui/Modal.vue b/front/src/components/ui/Modal.vue index ff8a7b601..d54f427ad 100644 --- a/front/src/components/ui/Modal.vue +++ b/front/src/components/ui/Modal.vue @@ -148,5 +148,5 @@ onKeyboardShortcut('escape', () => { isOpen.value = false }) diff --git a/front/src/components/ui/Pagination.vue b/front/src/components/ui/Pagination.vue index a65f485f7..5b22305ab 100644 --- a/front/src/components/ui/Pagination.vue +++ b/front/src/components/ui/Pagination.vue @@ -179,5 +179,5 @@ watch(page, (_) => { diff --git a/front/src/components/ui/Popover.vue b/front/src/components/ui/Popover.vue index f345f6042..7834e601a 100644 --- a/front/src/components/ui/Popover.vue +++ b/front/src/components/ui/Popover.vue @@ -159,5 +159,5 @@ watch(isOpen, (isOpen) => { diff --git a/front/src/components/ui/Tabs.vue b/front/src/components/ui/Tabs.vue index 266a4a62a..0fc3236bd 100644 --- a/front/src/components/ui/Tabs.vue +++ b/front/src/components/ui/Tabs.vue @@ -63,5 +63,5 @@ watch(tabs, () => { diff --git a/front/src/components/ui/Textarea.vue b/front/src/components/ui/Textarea.vue index 2eade843c..c99ca4d59 100644 --- a/front/src/components/ui/Textarea.vue +++ b/front/src/components/ui/Textarea.vue @@ -362,5 +362,5 @@ onMounted(() => { diff --git a/front/src/components/ui/Toc.vue b/front/src/components/ui/Toc.vue index d86d06447..7d0e12127 100644 --- a/front/src/components/ui/Toc.vue +++ b/front/src/components/ui/Toc.vue @@ -55,5 +55,5 @@ watchEffect(() => { diff --git a/front/src/components/ui/button/Options.vue b/front/src/components/ui/button/Options.vue index afd967473..25bd05864 100644 --- a/front/src/components/ui/button/Options.vue +++ b/front/src/components/ui/button/Options.vue @@ -21,5 +21,5 @@ defineProps<{ diff --git a/front/src/components/ui/button/Play.vue b/front/src/components/ui/button/Play.vue index eb93bab93..09d4890ed 100644 --- a/front/src/components/ui/button/Play.vue +++ b/front/src/components/ui/button/Play.vue @@ -15,5 +15,5 @@ const play = defineEmits(['play']) diff --git a/front/src/style/_main.scss b/front/src/style/_main.scss index 556adadc4..624a5af10 100644 --- a/front/src/style/_main.scss +++ b/front/src/style/_main.scss @@ -3,60 +3,60 @@ $desktop-sidebar-width: 275px; $widedesktop-sidebar-width: 275px; $bottom-player-height: 4rem; -@import "./vendor/_media.scss"; +@use "./vendor/_media.scss"; -@import "./globals/_app.scss"; -@import "./globals/_channels.scss"; -@import "./globals/_layout.scss"; -@import "./globals/_utils.scss"; +@use "./globals/_app.scss"; +@use "./globals/_channels.scss"; +@use "./globals/_layout.scss"; +@use "./globals/_utils.scss"; -@import "./components/_action_table.scss"; -@import "./components/_album_card.scss"; -@import "./components/_attachment_input.scss"; -@import "./components/_avatar.scss"; -@import "./components/_builder.scss"; -@import "./components/_button.scss"; -@import "./components/_card.scss"; -@import "./components/_content_form.scss"; -@import "./components/_copy_input.scss"; -@import "./components/_empty_state.scss"; -@import "./components/_favorite.scss"; -@import "./components/_form.scss"; -@import "./components/_file_upload.scss"; -@import "./components/_fs_browser.scss"; -@import "./components/_fs_logs.scss"; -@import "./components/_header.scss"; -@import "./components/_label.scss"; -@import "./components/_modal.scss"; -@import "./components/_pagination.scss"; -@import "./components/_placeholder.scss"; -@import "./components/_play_button.scss"; -@import "./components/_play_indicator.scss"; -@import "./components/_player.scss"; -@import "./components/_playlist_editor.scss"; -@import "./components/_queue.scss"; -@import "./components/_settings_group.scss"; -@import "./components/_search.scss"; -@import "./components/_sidebar.scss"; -@import "./components/_table.scss"; -@import "./components/_tags_list.scss"; -@import "./components/_tooltip.scss"; -@import "./components/_track_widget.scss"; -@import "./components/_track_table.scss"; -@import "./components/_user_link.scss"; -@import "./components/user_modal.scss"; -@import "./components/_volume_control.scss"; -@import "./components/_loaders.scss"; +@use "./components/_action_table.scss"; +@use "./components/_album_card.scss"; +@use "./components/_attachment_input.scss"; +@use "./components/_avatar.scss"; +@use "./components/_builder.scss"; +@use "./components/_button.scss"; +@use "./components/_card.scss"; +@use "./components/_content_form.scss"; +@use "./components/_copy_input.scss"; +@use "./components/_empty_state.scss"; +@use "./components/_favorite.scss"; +@use "./components/_form.scss"; +@use "./components/_file_upload.scss"; +@use "./components/_fs_browser.scss"; +@use "./components/_fs_logs.scss"; +@use "./components/_header.scss"; +@use "./components/_label.scss"; +@use "./components/_modal.scss"; +@use "./components/_pagination.scss"; +@use "./components/_placeholder.scss"; +@use "./components/_play_button.scss"; +@use "./components/_play_indicator.scss"; +@use "./components/_player.scss"; +@use "./components/_playlist_editor.scss"; +@use "./components/_queue.scss"; +@use "./components/_settings_group.scss"; +@use "./components/_search.scss"; +@use "./components/_sidebar.scss"; +@use "./components/_table.scss"; +@use "./components/_tags_list.scss"; +@use "./components/_tooltip.scss"; +@use "./components/_track_widget.scss"; +@use "./components/_track_table.scss"; +@use "./components/_user_link.scss"; +@use "./components/user_modal.scss"; +@use "./components/_volume_control.scss"; +@use "./components/_loaders.scss"; -@import "./pages/_about.scss"; -@import "./pages/_admin_account_detail.scss"; -@import "./pages/_admin_domain_detail.scss"; -@import "./pages/_admin_library.scss"; -@import "./pages/_artists.scss"; -@import "./pages/_home.scss"; -@import "./pages/_library.scss"; -@import "./pages/_notifications.scss"; -@import "./pages/_profile.scss"; +@use "./pages/_about.scss"; +@use "./pages/_admin_account_detail.scss"; +@use "./pages/_admin_domain_detail.scss"; +@use "./pages/_admin_library.scss"; +@use "./pages/_artists.scss"; +@use "./pages/_home.scss"; +@use "./pages/_library.scss"; +@use "./pages/_notifications.scss"; +@use "./pages/_profile.scss"; -@import "./themes/light/_main.scss"; -@import "./themes/dark/_main.scss"; +@use "./themes/light/_main.scss"; +@use "./themes/dark/_main.scss"; diff --git a/front/src/style/base/generic.scss b/front/src/style/base/generic.scss index 6475a72c8..a742afb11 100644 --- a/front/src/style/base/generic.scss +++ b/front/src/style/base/generic.scss @@ -1,7 +1,9 @@ +@use "../inc/theme"; + // Links %link, .funkwhale.link { - @include light-theme { + @include theme.light-theme { --fw-link-color: var(--fw-blue-400); --fw-link-hover-color: var(--fw-blue-500); @@ -11,7 +13,7 @@ } } - @include dark-theme { + @include theme.dark-theme { --fw-link-color: var(--fw-gray-300); --fw-link-hover-color: var(--fw-gray-400); @@ -53,11 +55,11 @@ border: none; border-bottom: 1px solid var(--fw-border-color); - @include light-theme { + @include theme.light-theme { --fw-border-color: var(--fw-gray-200); } - @include dark-theme { + @include theme.dark-theme { --fw-border-color: var(--fw-gray-800); } diff --git a/front/src/style/base/index.scss b/front/src/style/base/index.scss index e1448946d..21f2cb50d 100644 --- a/front/src/style/base/index.scss +++ b/front/src/style/base/index.scss @@ -1 +1 @@ -@import "generic" +@use "generic" diff --git a/front/src/style/font.scss b/front/src/style/font.scss index 31f534e5f..5cc00dfdd 100644 --- a/front/src/style/font.scss +++ b/front/src/style/font.scss @@ -1,4 +1,4 @@ -@import url("~/style/bootstrap-icons/font/bootstrap-icons.css"); +@use url("~/style/bootstrap-icons/font/bootstrap-icons.css"); @font-face { font-family: Lato; diff --git a/front/src/style/funkwhale.scss b/front/src/style/funkwhale.scss index 5f809d3ff..d4b20a038 100644 --- a/front/src/style/funkwhale.scss +++ b/front/src/style/funkwhale.scss @@ -1,11 +1,11 @@ @charset "utf-8"; -@import "base/index"; -@import "inc/theme.scss"; -@import "font"; -@import "colors"; +@use "base/index"; +@use "inc/theme.scss"; +@use "font"; +@use "colors"; html, body { - font-family: $font-main; + font-family: theme.$font-main; font-size: 16px; margin: 0; } diff --git a/front/src/style/inc/theme.scss b/front/src/style/inc/theme.scss index 871a8be2c..322199051 100644 --- a/front/src/style/inc/theme.scss +++ b/front/src/style/inc/theme.scss @@ -1,3 +1,5 @@ +@use "sass:list"; +@use "sass:selector"; $font-main: "Lato", sans-serif; @mixin theme($isDark) { @@ -12,16 +14,16 @@ $font-main: "Lato", sans-serif; // If we call `@include dark-theme {}` at the root of the file @if & == null { - $root-selectors: append($root-selectors, $root-element); + $root-selectors: list.append($root-selectors, $root-element); } @else { // For every selector in selector list @each $selector in & { // If it is `html`, we add a root rule @if #{$selector} == ":root" or #{$selector} == "html" { - $root-selectors: append($root-selectors, $root-element, comma); + $root-selectors: list.append($root-selectors, $root-element, comma); // If it's any other rule, we append it to the root rule } @else { - $root-selectors: append($root-selectors, "#{selector-nest($root-element, $selector)}", comma); + $root-selectors: list.append($root-selectors, "#{selector.nest($root-element, $selector)}", comma); } } diff --git a/front/src/style/themes/dark/_main.scss b/front/src/style/themes/dark/_main.scss index 6a9c54f75..e1c557618 100644 --- a/front/src/style/themes/dark/_main.scss +++ b/front/src/style/themes/dark/_main.scss @@ -3,5 +3,5 @@ .theme-dark { $fwVars: meta.module-variables("vars"); - @import "../../_css_vars.scss"; + @use "../../_css_vars.scss"; } diff --git a/front/src/style/themes/dark/_vars.scss b/front/src/style/themes/dark/_vars.scss index e0f3ef8a3..247d3ffbb 100644 --- a/front/src/style/themes/dark/_vars.scss +++ b/front/src/style/themes/dark/_vars.scss @@ -30,4 +30,4 @@ $secondary-menu-active-item-color: $text-color; $segment-background: $light-background-color; $table-background: $input-background; -@import "../../_vars"; +@use "../../_vars"; diff --git a/front/src/style/themes/light/_main.scss b/front/src/style/themes/light/_main.scss index cbd52cc28..fc7f45900 100644 --- a/front/src/style/themes/light/_main.scss +++ b/front/src/style/themes/light/_main.scss @@ -4,6 +4,6 @@ $fwVars: meta.module-variables("vars"); .theme-light { & { - @import "../../_css_vars.scss"; + @use "../../_css_vars.scss"; } } diff --git a/front/src/views/playlists/Detail.vue b/front/src/views/playlists/Detail.vue index aa3943a5c..1b4b1caef 100644 --- a/front/src/views/playlists/Detail.vue +++ b/front/src/views/playlists/Detail.vue @@ -222,7 +222,7 @@ const shuffle = () => {} /> diff --git a/front/ui-docs/vite.config.ts b/front/ui-docs/vite.config.ts index dca558272..fbd7f4ee6 100644 --- a/front/ui-docs/vite.config.ts +++ b/front/ui-docs/vite.config.ts @@ -20,9 +20,9 @@ export default defineConfig({ scss: { additionalData: ` $docs: ${!!process.env.VP_DOCS}; - @import "~/style/inc/theme.scss"; - @import "~/style/inc/docs.scss"; - @import "~/style/funkwhale.scss"; + @use "~/style/inc/theme.scss"; + @use "~/style/inc/docs.scss"; + @use "~/style/funkwhale.scss"; ` } } diff --git a/front/vite.config.ts b/front/vite.config.ts index 46a00cd71..27c481c5d 100644 --- a/front/vite.config.ts +++ b/front/vite.config.ts @@ -81,8 +81,8 @@ export default defineConfig(({ mode }) => ({ additionalData: ` $docs: ${!!process.env.VP_DOCS}; @use "~/style/_vars" as *; - @import "~/style/inc/theme"; - @import "~/style/funkwhale"; + @use "~/style/inc/theme"; + @use "~/style/funkwhale"; ` } }