MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

This commit is contained in:
Petitminion 2025-05-15 17:46:56 +02:00
parent d5a440fc0a
commit 32f67e838f
28 changed files with 96 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
front/src/components/library/FileUpload.vue
View File

@ -589,7 +589,7 @@ const isServerDisclosureOpen = ref(false)
v-model="fsPath" v-model="fsPath"
:loading="isLoadingFs" :loading="isLoadingFs"
:data="fsStatus" :data="fsStatus"
@import="importFs" @use="importFs"
/> />
<template v-if="fsStatus && fsStatus.import"> <template v-if="fsStatus && fsStatus.import">
<h3 class="ui header"> <h3 class="ui header">

2
front/src/components/playlist/Card.vue
View File

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

2
front/src/components/podcast/Card.vue
View File

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

2
front/src/components/radio/Card.vue
View File

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

2
front/src/components/ui/Activity.vue
View File

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

2
front/src/components/ui/Alert.vue
View File

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

2
front/src/components/ui/Input.vue
View File

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

2
front/src/components/ui/Loader.vue
View File

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

2
front/src/components/ui/Modal.vue
View File

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

2
front/src/components/ui/Pagination.vue
View File

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

2
front/src/components/ui/Popover.vue
View File

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

2
front/src/components/ui/Tabs.vue
View File

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

2
front/src/components/ui/Textarea.vue
View File

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

2
front/src/components/ui/Toc.vue
View File

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

2
front/src/components/ui/button/Options.vue
View File

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

2
front/src/components/ui/button/Play.vue
View File

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

106
front/src/style/_main.scss
View File

@ -3,60 +3,60 @@ $desktop-sidebar-width: 275px;
$widedesktop-sidebar-width: 275px; $widedesktop-sidebar-width: 275px;
$bottom-player-height: 4rem; $bottom-player-height: 4rem;
@import "./vendor/_media.scss"; @use "./vendor/_media.scss";
@import "./globals/_app.scss"; @use "./globals/_app.scss";
@import "./globals/_channels.scss"; @use "./globals/_channels.scss";
@import "./globals/_layout.scss"; @use "./globals/_layout.scss";
@import "./globals/_utils.scss"; @use "./globals/_utils.scss";
@import "./components/_action_table.scss"; @use "./components/_action_table.scss";
@import "./components/_album_card.scss"; @use "./components/_album_card.scss";
@import "./components/_attachment_input.scss"; @use "./components/_attachment_input.scss";
@import "./components/_avatar.scss"; @use "./components/_avatar.scss";
@import "./components/_builder.scss"; @use "./components/_builder.scss";
@import "./components/_button.scss"; @use "./components/_button.scss";
@import "./components/_card.scss"; @use "./components/_card.scss";
@import "./components/_content_form.scss"; @use "./components/_content_form.scss";
@import "./components/_copy_input.scss"; @use "./components/_copy_input.scss";
@import "./components/_empty_state.scss"; @use "./components/_empty_state.scss";
@import "./components/_favorite.scss"; @use "./components/_favorite.scss";
@import "./components/_form.scss"; @use "./components/_form.scss";
@import "./components/_file_upload.scss"; @use "./components/_file_upload.scss";
@import "./components/_fs_browser.scss"; @use "./components/_fs_browser.scss";
@import "./components/_fs_logs.scss"; @use "./components/_fs_logs.scss";
@import "./components/_header.scss"; @use "./components/_header.scss";
@import "./components/_label.scss"; @use "./components/_label.scss";
@import "./components/_modal.scss"; @use "./components/_modal.scss";
@import "./components/_pagination.scss"; @use "./components/_pagination.scss";
@import "./components/_placeholder.scss"; @use "./components/_placeholder.scss";
@import "./components/_play_button.scss"; @use "./components/_play_button.scss";
@import "./components/_play_indicator.scss"; @use "./components/_play_indicator.scss";
@import "./components/_player.scss"; @use "./components/_player.scss";
@import "./components/_playlist_editor.scss"; @use "./components/_playlist_editor.scss";
@import "./components/_queue.scss"; @use "./components/_queue.scss";
@import "./components/_settings_group.scss"; @use "./components/_settings_group.scss";
@import "./components/_search.scss"; @use "./components/_search.scss";
@import "./components/_sidebar.scss"; @use "./components/_sidebar.scss";
@import "./components/_table.scss"; @use "./components/_table.scss";
@import "./components/_tags_list.scss"; @use "./components/_tags_list.scss";
@import "./components/_tooltip.scss"; @use "./components/_tooltip.scss";
@import "./components/_track_widget.scss"; @use "./components/_track_widget.scss";
@import "./components/_track_table.scss"; @use "./components/_track_table.scss";
@import "./components/_user_link.scss"; @use "./components/_user_link.scss";
@import "./components/user_modal.scss"; @use "./components/user_modal.scss";
@import "./components/_volume_control.scss"; @use "./components/_volume_control.scss";
@import "./components/_loaders.scss"; @use "./components/_loaders.scss";
@import "./pages/_about.scss"; @use "./pages/_about.scss";
@import "./pages/_admin_account_detail.scss"; @use "./pages/_admin_account_detail.scss";
@import "./pages/_admin_domain_detail.scss"; @use "./pages/_admin_domain_detail.scss";
@import "./pages/_admin_library.scss"; @use "./pages/_admin_library.scss";
@import "./pages/_artists.scss"; @use "./pages/_artists.scss";
@import "./pages/_home.scss"; @use "./pages/_home.scss";
@import "./pages/_library.scss"; @use "./pages/_library.scss";
@import "./pages/_notifications.scss"; @use "./pages/_notifications.scss";
@import "./pages/_profile.scss"; @use "./pages/_profile.scss";
@import "./themes/light/_main.scss"; @use "./themes/light/_main.scss";
@import "./themes/dark/_main.scss"; @use "./themes/dark/_main.scss";

10
front/src/style/base/generic.scss
View File

@ -1,7 +1,9 @@
@use "../inc/theme";
// Links // Links
%link, %link,
.funkwhale.link { .funkwhale.link {
@include light-theme { @include theme.light-theme {
--fw-link-color: var(--fw-blue-400); --fw-link-color: var(--fw-blue-400);
--fw-link-hover-color: var(--fw-blue-500); --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-color: var(--fw-gray-300);
--fw-link-hover-color: var(--fw-gray-400); --fw-link-hover-color: var(--fw-gray-400);
@ -53,11 +55,11 @@
border: none; border: none;
border-bottom: 1px solid var(--fw-border-color); border-bottom: 1px solid var(--fw-border-color);
@include light-theme { @include theme.light-theme {
--fw-border-color: var(--fw-gray-200); --fw-border-color: var(--fw-gray-200);
} }
@include dark-theme { @include theme.dark-theme {
--fw-border-color: var(--fw-gray-800); --fw-border-color: var(--fw-gray-800);
} }

2
front/src/style/base/index.scss
View File

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

2
front/src/style/font.scss
View File

@ -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-face {
font-family: Lato; font-family: Lato;

10
front/src/style/funkwhale.scss
View File

@ -1,11 +1,11 @@
@charset "utf-8"; @charset "utf-8";
@import "base/index"; @use "base/index";
@import "inc/theme.scss"; @use "inc/theme.scss";
@import "font"; @use "font";
@import "colors"; @use "colors";
html, body { html, body {
font-family: $font-main; font-family: theme.$font-main;
font-size: 16px; font-size: 16px;
margin: 0; margin: 0;
} }

8
front/src/style/inc/theme.scss
View File

@ -1,3 +1,5 @@
@use "sass:list";
@use "sass:selector";
$font-main: "Lato", sans-serif; $font-main: "Lato", sans-serif;
@mixin theme($isDark) { @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 we call `@include dark-theme {}` at the root of the file
@if & == null { @if & == null {
$root-selectors: append($root-selectors, $root-element); $root-selectors: list.append($root-selectors, $root-element);
} @else { } @else {
// For every selector in selector list // For every selector in selector list
@each $selector in & { @each $selector in & {
// If it is `html`, we add a root rule // If it is `html`, we add a root rule
@if #{$selector} == ":root" or #{$selector} == "html" { @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 // If it's any other rule, we append it to the root rule
} @else { } @else {
$root-selectors: append($root-selectors, "#{selector-nest($root-element, $selector)}", comma); $root-selectors: list.append($root-selectors, "#{selector.nest($root-element, $selector)}", comma);
} }
} }

2
front/src/style/themes/dark/_main.scss
View File

@ -3,5 +3,5 @@
.theme-dark { .theme-dark {
$fwVars: meta.module-variables("vars"); $fwVars: meta.module-variables("vars");
@import "../../_css_vars.scss"; @use "../../_css_vars.scss";
} }

2
front/src/style/themes/dark/_vars.scss
View File

@ -30,4 +30,4 @@ $secondary-menu-active-item-color: $text-color;
$segment-background: $light-background-color; $segment-background: $light-background-color;
$table-background: $input-background; $table-background: $input-background;
@import "../../_vars"; @use "../../_vars";

2
front/src/style/themes/light/_main.scss
View File

@ -4,6 +4,6 @@
$fwVars: meta.module-variables("vars"); $fwVars: meta.module-variables("vars");
.theme-light { .theme-light {
& { & {
@import "../../_css_vars.scss"; @use "../../_css_vars.scss";
} }
} }

2
front/src/views/playlists/Detail.vue
View File

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

6
front/ui-docs/vite.config.ts
View File

@ -20,9 +20,9 @@ export default defineConfig({
scss: { scss: {
additionalData: ` additionalData: `
$docs: ${!!process.env.VP_DOCS}; $docs: ${!!process.env.VP_DOCS};
@import "~/style/inc/theme.scss"; @use "~/style/inc/theme.scss";
@import "~/style/inc/docs.scss"; @use "~/style/inc/docs.scss";
@import "~/style/funkwhale.scss"; @use "~/style/funkwhale.scss";
` `
} }
} }

4
front/vite.config.ts
View File

@ -81,8 +81,8 @@ export default defineConfig(({ mode }) => ({
additionalData: ` additionalData: `
$docs: ${!!process.env.VP_DOCS}; $docs: ${!!process.env.VP_DOCS};
@use "~/style/_vars" as *; @use "~/style/_vars" as *;
@import "~/style/inc/theme"; @use "~/style/inc/theme";
@import "~/style/funkwhale"; @use "~/style/funkwhale";
` `
} }
} }