[5.x] Change Laravel Mix asset bundling to Vite setup

[mmachatschek]

This moves the current laravel mix asset bundling setup to the recommended way of bundling with Vite.

[driesvints]

We'll also want to pass in the right command (build) for the compile assets workflow: https://github.com/laravel/.github/blob/main/.github/workflows/compile-assets.yml#L9

[driesvints]

Thanks btw! This is great.

[mmachatschek]

@driesvints the default command for the compile assets workflow is production which is available as a npm script. I'm not 100% sure I can follow what you mean.

If this gets merged, then I'll update the laravel/telescope package with the same changes too

[driesvints]

ah nvm. We usually use build as a default for that but it's fine: https://github.com/laravel/laravel/blob/11.x/package.json#L6

[mmachatschek]

vite doesn't inline the css of the file Alert component into JS anymore (public/build/app.css) but puts it into a css file with the same filename as the entry javascript file. unfortunately the app.scss file has the same name as the main js entrypoint and therefore vite detects a name conflict and adds an incrementing number to the filename until its unique in the output folder.

when reviewing this, just change this workaround to this and rebuild, then you can see what I mean. With this approach, I tried to be as compatible as possible with the previous output format of webpack.

Suggested change

	input: {
	"app-css": "resources/sass/app.scss",
	"app-dark-css": "resources/sass/app-dark.scss",
	app: "resources/js/app.js",
	},
	input: [
	"resources/sass/app.scss",
	"resources/sass/app-dark.scss",
	"resources/js/app.js",
	],

another solution would be to move the styles from the SFC <style></style> tag on the Alert Vue component directly to the scss files, but if future changes to the vue files happen and someone wants to add component based styles with the Vue SFC style tags then the same issue will happen again as outlined above

I can add screenshots later if any questions come up

For horizon v6.x we could make a „breaking change“ to rename either the app.js or app.scss entrypoint and avoid naming collisions. (I suppose there is no big UI refactoring planned for the 5.x release anyway)

[mmachatschek]

I tested moving the Vue SFC styles from the .vue components to the dedicated scss files but still, vite sees a name conflict between the input files app.scss and app.js so moving of the styles doesn't work in that case either

[mmachatschek]

I went ahead and renamed the app.scss and app-dark.scss files to styles.scss and styles-dark.scss to avoid name conflicts.

There are basically three files now that will change behaviour on user side in the public/vendor/horizon folder:

1. mix-manifest.json -> manifest.json -> old file not deleted
2. app.css -> styles.css -> old file not deleted
3. app-dark.css -> styles-dark.css -> old file not deleted
4. img/favicon.png -> favicon.png -> old file not deleted
5. X img/horizon.svg -> not deleted/no replacement
6. X img/sprite.svg -> not deleted/no replacement
7. X app.js.LICENSE.txt -> not deleted/no replacement

When user publish the horizon assets they will end up with 3 new files and 3 old files that are not cleaned up automatically

if this is an issue, then I will need to send this PR to the 6.x branch

Let me know @driesvints

[driesvints]

I don't think letting the old files remain is a big issue. As long as the new files are there and picked up it's fine.

[jhm-ciberman]

So as far as I understand, is it safe to upgrade, republish assets and then manually delete these files?

• mix-manifest.json
• app.css
• app-dark.css
• img/favicon.png