Change position of Livewire Style

[syntafin]

Changed the position where the Livewire styles got loaded, from before, to after the Vite injection.
This is to prevent missleading behaivor of Livewire as discussed in the Livewire Discord:

[timacdonald]

@syntafin can you elaborate on the conflict here? Looking at this, it seems to me that the previous way would be preferred.

The @livewireStyles injects the following CSS, and is an entirely static result.

<style {$nonce}>
    [wire\:loading], [wire\:loading\.delay], [wire\:loading\.inline-block], [wire\:loading\.inline], [wire\:loading\.block], [wire\:loading\.flex], [wire\:loading\.table], [wire\:loading\.grid], [wire\:loading\.inline-flex] {
        display: none;
    }

    [wire\:loading\.delay\.shortest], [wire\:loading\.delay\.shorter], [wire\:loading\.delay\.short], [wire\:loading\.delay\.long], [wire\:loading\.delay\.longer], [wire\:loading\.delay\.longest] {
        display:none;
    }

    [wire\:offline] {
        display: none;
    }

    [wire\:dirty]:not(textarea):not(input):not(select) {
        display: none;
    }

    input:-webkit-autofill, select:-webkit-autofill, textarea:-webkit-autofill {
        animation-duration: 50000s;
        animation-name: livewireautofill;
    }

    @keyframes livewireautofill { from {} }
</style>

Meanwhile, the app.css only injects Tailwinds styles...

@tailwind base;
@tailwind components;
@tailwind utilities;

Based on this, I see it as beneficial to have app.css loaded last to allow you to override the default Livewire styling if you wanted to do so.

Although it probably isn't a big deal as the livewire stuff is really only concerned with hiding things, but would still be good to better understand the problem.

[syntafin]

Good day,

when I migrated my project from Mix to Vite, I copied how Livewire and other Styles/Scripts are loaded from a new created project, to ensure nothing is wrong.

After this I saw that the loading state from the searchbar on the page didn't work as expected, because it was always visible, as seen on this screenshot:

But this was not the only problem as I found out later when tested on staging environment:

Uncaught SyntaxError: Invalid or unexpected token

I asked then on the Livewire Discord if this problem is known, and got the answer as seen in initial PR, after I tested if it works when I place @livewireStyles under Vite as I had before.