[frontend] vuetify config file is misused to load global styles, causing lots of duplicated styles

[Sirs0ri]

What version of Music Assistant has the issue?

music-assistant/frontend 2.0.11

The problem

The vuetify config file loaded through the vite config is currently used to load the full content of the global.css stylesheet, and the styles from '@egjs/vue3-flicking`.

It's not intended to do this (vuetify docs) as this leads to a copy of these styles being injected into every single component, causing lots of duplicated code.

A preferred solution for loading styles globally would for example be to load them in the App.vue file, or through a css loader configured in vite.

The frontend currently loads ~900KB just stylesheets on the settings page, a lot of which is just duplicated code.

How to reproduce

Look at any component through your browser's dev-tools and you'll notice, there's the following style defined over and over:

* {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

This is a part of global.css that's imported into every file through the vuetify settings as described above.

Relevant log output

No response

Additional information

No response

What version of Home Assistant Core are your running

n.a.

What type of installation are you running?

Home Assistant Container

On what type of hardware are you running?

Raspberry Pi

[marcelveldt]

Yes this is true and there is lots more of stuff like that. PR welcome to fix it, I'm already swamped as-is

[Sirs0ri]

I'll see what I can do! :)

[marcelveldt]

That's the spirit! :-)

[OzGav]

Het @Sirs0ri just wondering if you have been able to make any progress with this?

[OzGav]

Hi again @Sirs0ri any progress to report?

[Sirs0ri]

@OzGav sorry, not really. I haven't found a clean solution for this yet.

[OzGav]

@Sirs0ri Just checking in again. Should we keep this issue open?

[Sirs0ri]

I'd keep it open if that's okay with y'all since fixing this would be an acutal enhancement, but I'll unassing myself for now - I'd have to dive a lot deeper into the config behind vuetify to figure out a proper solution

Maybe someone else wants to pick it up in the meantime :3

[OzGav]

Ok we will keep it open for now. The project needs all the help it can get though so I’m not sure if someone else will pick this up any time soon….

[OzGav]

@Sirs0ri Just checking in again if you have had a chance to look into this?

[OzGav]

@Sirs0ri just checking in again if you might have time to look into this