$ sass-migrator module --migrate-deps your-entrypoint.scss

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"
       />
       <template v-if="fsStatus && fsStatus.import">
         <h3 class="ui header">

front/src/components/playlist/Card.vue

@@ -74,5 +74,5 @@ if (import.meta.env.PROD) {
 </template>
 
 <style lang="scss">
-@import './style.scss'
+@use './style.scss'
 </style>

front/src/components/podcast/Card.vue

@@ -27,5 +27,5 @@ const timeAgo = useTimeAgo(new Date(podcast.artist?.modification_date ?? new Dat
 </template>
 
 <style lang="scss">
-@import './style.scss'
+@use './style.scss'
 </style>

front/src/components/radio/Card.vue

@@ -41,5 +41,5 @@ const { radio, small, ...cardProps } = defineProps<{
 </template>
 
 <style lang="scss">
-@import './style.scss'
+@use './style.scss'
 </style>

front/src/components/ui/Activity.vue

@@ -69,5 +69,5 @@ const profileParams = computed(() => {
 </template>
 
 <style lang="scss">
-@import './activity.scss'
+@use './activity.scss'
 </style>

front/src/components/ui/Alert.vue

@@ -32,5 +32,5 @@ const props = defineProps<Props>()
 </template>
 
 <style lang="scss">
-@import './alert.scss'
+@use './alert.scss'
 </style>

front/src/components/ui/Input.vue

@@ -156,7 +156,7 @@ const model = defineModel<string|number>({ required: true })
 </template>
 
 <style lang="scss">
-@import './input.scss';
+@use './input.scss';
 
 input[type=number]::-webkit-inner-spin-button {
     opacity: 1;

front/src/components/ui/Loader.vue

@@ -21,5 +21,5 @@ const { container = true } = defineProps<{ container?: boolean }>()
 </template>
 
 <style lang="scss">
-@import './loader.scss'
+@use './loader.scss'
 </style>

front/src/components/ui/Modal.vue

@@ -148,5 +148,5 @@ onKeyboardShortcut('escape', () => { isOpen.value = false })
 </template>
 
 <style lang="scss">
-@import './modal.scss'
+@use './modal.scss'
 </style>

front/src/components/ui/Pagination.vue

@@ -179,5 +179,5 @@ watch(page, (_) => {
 </template>
 
 <style lang="scss">
-@import './pagination.scss'
+@use './pagination.scss'
 </style>

front/src/components/ui/Popover.vue

@@ -159,5 +159,5 @@ watch(isOpen, (isOpen) => {
 </template>
 
 <style lang="scss">
-@import './popover.scss'
+@use './popover.scss'
 </style>

front/src/components/ui/Tabs.vue

@@ -63,5 +63,5 @@ watch(tabs, () => {
 </template>
 
 <style lang="scss">
-@import './tabs.scss'
+@use './tabs.scss'
 </style>

front/src/components/ui/Textarea.vue

@@ -362,5 +362,5 @@ onMounted(() => {
 </template>
 
 <style lang="scss">
-@import './textarea.scss';
+@use './textarea.scss';
 </style>

front/src/components/ui/Toc.vue

@@ -55,5 +55,5 @@ watchEffect(() => {
 </template>
 
 <style lang="scss">
-@import './toc.scss'
+@use './toc.scss'
 </style>

front/src/components/ui/button/Options.vue

@@ -21,5 +21,5 @@ defineProps<{
 </template>
 
 <style lang="scss">
-@import './options.scss'
+@use './options.scss'
 </style>

front/src/components/ui/button/Play.vue

@@ -15,5 +15,5 @@ const play = defineEmits(['play'])
 </template>
 
 <style lang="scss">
-@import './play.scss';
+@use './play.scss';
 </style>

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

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);
   }
 

front/src/style/base/index.scss

@@ -1 +1 @@
-@import "generic"
+@use "generic"

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;

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

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);
       }
     }
 

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";
 }

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

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";
   }
 }

front/src/views/playlists/Detail.vue

@@ -222,7 +222,7 @@ const shuffle = () => {}
       />
       <playlist-dropdown
         :playlist="playlist"
-        @import="fetchData"
+        @use="fetchData"
       />
     </Layout>
   </Header>

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";
         `
       }
     }

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";
         `
       }
     }