[5.x] feature: this adds the vite integrity plugin to support assetsAreCurrent check (#1415)

mmachatschek · driesvints · web-flow · commit df27ad9c125c · 2024-04-15T10:17:16.000-05:00
* feature: this adds the vite integrity plugin to support assetsAreCurrent check

fix schema -&gt; scheme

compile assets

* Update resources/views/layout.blade.php

---------

Co-authored-by: Dries Vints &lt;dries@vints.be&gt;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
         "sass": "^1.74.1",
         "sql-formatter": "^4.0.2",
         "vite": "^5.2.8",
+        "vite-plugin-manifest-sri": "^0.2.0",
         "vue": "^2.7.16",
         "vue-json-pretty": "^1.9.5",
         "vue-router": "^3.6.5"
diff --git a/public/build/manifest.json b/public/build/manifest.json
@@ -1,7 +1,8 @@
 {
   "resources/img/favicon.png": {
     "file": "favicon.png",
-    "src": "resources/img/favicon.png"
+    "src": "resources/img/favicon.png",
+    "integrity": "sha384-tqnRilkeRgqFt3SUYaxuaQs14WOwuU8Gvk3sqRZmnyWZVhr1Kk19Ecr7dFMb4HZo"
   },
   "resources/js/app.js": {
     "file": "app.js",
@@ -10,16 +11,19 @@
     "isEntry": true,
     "css": [
       "app.css"
-    ]
+    ],
+    "integrity": "sha384-EV5vlraT2g7leIzueltC7I+UzR7uBT4ndQF5b1G9I+kUrQ4XL0DREuRw/XiU/U3P"
   },
   "resources/sass/styles-dark.scss": {
     "file": "styles-dark.css",
     "src": "resources/sass/styles-dark.scss",
-    "isEntry": true
+    "isEntry": true,
+    "integrity": "sha384-/sLOxh+NTFEdcZ8svIuVTv/lSL65X3QGIXhExXAhntQYWjiez1CQbv4ICbtwRfd8"
   },
   "resources/sass/styles.scss": {
     "file": "styles.css",
     "src": "resources/sass/styles.scss",
-    "isEntry": true
+    "isEntry": true,
+    "integrity": "sha384-4HOmv1E51xgqbUYzCYXaRXPRja5nEho6eq/L/CKs0LlidzTGNTk81VtCAHqLiYSC"
   }
 }
diff --git a/resources/views/layout.blade.php b/resources/views/layout.blade.php
@@ -1,5 +1,16 @@
 @php
 use Illuminate\Support\Facades\Vite;
+use Illuminate\Foundation\Vite as ViteFoundation;
+
+$viteDataSchemeLight = new ViteFoundation();
+$viteDataSchemeLight->useStyleTagAttributes([
+'data-scheme' => 'light',
+]);
+
+$viteDataSchemeDark = new ViteFoundation();
+$viteDataSchemeDark->useStyleTagAttributes([
+'data-scheme' => 'dark',
+]);
 @endphp
 <!DOCTYPE html>
 <html lang="en">
@@ -16,10 +27,8 @@
     <link rel="preconnect" href="https://fonts.bunny.net">
     <link href="https://fonts.bunny.net/css?family=figtree:300,400,500,600" rel="stylesheet" />
 
-    <link rel="preload" as="style" href="{{ Vite::asset('resources/sass/styles.scss', 'vendor/horizon') }}" data-scheme="light" />
-    <link rel="stylesheet" href="{{ Vite::asset('resources/sass/styles.scss', 'vendor/horizon') }}" data-scheme="light" />
-    <link rel="preload" as="style" href="{{ Vite::asset('resources/sass/styles-dark.scss', 'vendor/horizon') }}" data-scheme="dark" />
-    <link rel="stylesheet" href="{{ Vite::asset('resources/sass/styles-dark.scss', 'vendor/horizon') }}" data-scheme="dark" />
+    {{ $viteDataSchemeLight('resources/sass/styles.scss', 'vendor/horizon') }}
+    {{ $viteDataSchemeDark('resources/sass/styles-dark.scss', 'vendor/horizon') }}
 </head>
 <body>
 <div id="horizon" v-cloak>
@@ -147,6 +156,6 @@
     window.Horizon = @json($horizonScriptVariables);
 </script>
 
-    @vite('resources/js/app.js', 'vendor/horizon')
+@vite('resources/js/app.js', 'vendor/horizon')
 </body>
 </html>
diff --git a/vite.config.mjs b/vite.config.mjs
@@ -1,6 +1,7 @@
 import vue2 from "@vitejs/plugin-vue2";
 import { defineConfig } from "vite";
 import laravel from "laravel-vite-plugin";
+import manifestSRI from "vite-plugin-manifest-sri";
 
 const config = defineConfig({
     plugins: [
@@ -10,6 +11,7 @@ const config = defineConfig({
             "resources/js/app.js",
         ]),
         vue2(),
+        manifestSRI(),
     ],
     resolve: {
         alias: {
