allow (s)css and image files as entry points (#6)

* allow (s)css files as entry points
* allow preloading of css & image entrypoints
* test on PHP 8.4

Author: mimmi20

.github/workflows/ci.yml

@@ -14,6 +14,7 @@ jobs:
           - '8.1'
           - '8.2'
           - '8.3'
+          - '8.4'
     steps:
       - uses: shivammathur/setup-php@2.30.4
         with:

composer.json

@@ -4,7 +4,7 @@
     "license": "MPL-2.0",
     "description": "a lightweight PHP-backend integration for the Vite frontend build tool",
     "scripts": {
-        "test": "XDEBUG_MODE=coverage php test/test.php"
+        "test": "XDEBUG_MODE=coverage php test/test.php -v"
     },
     "autoload": {
         "psr-4": {

src/Manifest.php

@@ -120,6 +120,17 @@ public function preloadFonts(): void
         ];
     }
 
+    /**
+     * Register MIME types for preloading stylesheets.
+     */
+    public function preloadStyles(): void
+    {
+        $this->preload_types = [
+            ...$this->preload_types,
+            'css' => ['type' => 'text/css', 'as' => 'style'],
+        ];
+    }
+
     /**
      * Create preload, CSS and JS tags for the specified entry point script(s).
      *
@@ -208,6 +219,16 @@ private function createPreloadTags(array $chunks): string
 
             // Preload assets:
 
+            ['extension' => $extension] = pathinfo($chunk->file);
+
+            if (isset($this->preload_types[$extension])) {
+                $preload = $this->preload_types[$extension];
+                $type = $preload['type'];
+                $as = $preload['as'];
+
+                $tags[] = "<link rel=\"preload\" as=\"{$as}\" type=\"{$type}\" href=\"{$this->base_path}{$chunk->file}\" />";
+            }
+
             foreach ($chunk->assets as $asset) {
                 $type = substr($asset, strrpos($asset, '.') + 1);
 
@@ -235,6 +256,10 @@ private function createStyleTags(array $chunks): string
             foreach ($chunk->css as $css) {
                 $tags[] = "<link rel=\"stylesheet\" href=\"{$this->base_path}{$css}\" />";
             }
+
+            if (str_ends_with($chunk->file, '.css') && $chunk->isEntry) {
+                $tags[] = "<link rel=\"stylesheet\" href=\"{$this->base_path}{$chunk->file}\" />";
+            }
         }
 
         return implode("\n", $tags);
@@ -248,7 +273,7 @@ private function createScriptTags(array $chunks): string
         $tags = [];
 
         foreach ($chunks as $chunk) {
-            if ($chunk->isEntry) {
+            if (str_ends_with($chunk->file, '.js') && $chunk->isEntry) {
                 $tags[] = "<script type=\"module\" src=\"{$this->base_path}{$chunk->file}\"></script>";
             }
         }
@@ -267,7 +292,8 @@ private function findImportedChunks(array $entries): array
                 throw new RuntimeException("Entry not found in manifest: {$entry}");
             }
 
-            if (! $chunk->isEntry) {
+            // only check .js and .css files, because images dont get the "isEntry" information in the manifest
+            if ((str_ends_with($chunk->file, '.js') || str_ends_with($chunk->file, '.css')) && ! $chunk->isEntry) {
                 throw new RuntimeException("Chunk is not an entry point: {$entry}");
             }
 

test/fixtures/manifest.json

@@ -39,5 +39,25 @@
         "css": [
             "assets/shared.a834bfc3.css"
         ]
+    },
+    "public/scss/themes/admin/admin.scss": {
+        "file": "assets/admin-B8_LVhy3.css",
+        "src": "public/scss/themes/admin/admin.scss",
+        "isEntry": true,
+        "names": [
+            "admin.css"
+        ]
+    },
+    "public/css/plus.css": {
+        "file": "assets/plus-DwWFnKP0.css",
+        "src": "public/css/plus.css",
+        "isEntry": true,
+        "names": [
+            "plus.css"
+        ]
+    },
+    "public/img/favicon.ico": {
+        "file": "assets/favicon-zR_S-YMI.ico",
+        "src": "public/img/favicon.ico"
     }
 }

test/test.php

@@ -98,8 +98,9 @@ function () {
         );
 
         $vite->preloadImages();
+        $vite->preloadStyles();
 
-        $tags = $vite->createTags("main.js", "consent-banner.js");
+        $tags = $vite->createTags("main.js", "consent-banner.js", "public/scss/themes/admin/admin.scss", "public/css/plus.css", "public/img/favicon.ico");
 
         eq(
             explode("\n", $tags->preload),
@@ -111,6 +112,9 @@ function () {
                 '<link rel="modulepreload" href="/dist/assets/shared.83069a53.js" />',
                 // Preload `views/foo.js` entry point script:
                 '<link rel="modulepreload" href="/dist/assets/consent-banner.0e3b3b7b.js" />',
+                '<link rel="preload" as="style" type="text/css" href="/dist/assets/admin-B8_LVhy3.css" />',
+                '<link rel="preload" as="style" type="text/css" href="/dist/assets/plus-DwWFnKP0.css" />',
+                '<link rel="preload" as="image" type="image/x-icon" href="/dist/assets/favicon-zR_S-YMI.ico" />',
             ],
         );
 
@@ -123,6 +127,8 @@ function () {
                 '<link rel="stylesheet" href="/dist/assets/shared.a834bfc3.css" />',
                 // CSS imported by the consent-banner entry point script:
                 '<link rel="stylesheet" href="/dist/assets/consent-banner.8ba40300.css" />',
+                '<link rel="stylesheet" href="/dist/assets/admin-B8_LVhy3.css" />',
+                '<link rel="stylesheet" href="/dist/assets/plus-DwWFnKP0.css" />',
             ]
         );