Merge pull request #5 from JuKra00/feature/asset-css

Add cssAsset method to get associated css files to an asset

Author: lukaskleinschmidt

README.md

@@ -188,6 +188,15 @@ These assets will now be processed by Vite when running `npm run build`. You can
 <img src="<?= vite()->asset('assets/images/logo.png') ?>">
 ```
 
+## Associated CSS Files
+In some cases, you may want to include a Javascript file conditionally using the `vite()->asset()` method. Associated CSS files will not be included automatically. You can use the `vite()->assetCss()` method, which will return an array of URLs for the CSS files associated with a given asset:
+
+```php
+<?php foreach (vite()->assetCss('assets/js/my-component.js') as $cssFile): ?>
+  <link rel="stylesheet" href="<?= $cssFile ?>">
+<?php endforeach ?>
+```
+
 ## Arbitrary Attributes
 If you need to include additional attributes on your script and style tags, such as the `data-turbo-track` attribute, you may specify them via the plugin options.
 

Vite.php

@@ -382,6 +382,32 @@ public function asset(string $asset, string $buildDirectory = null): string
         return url($buildDirectory . '/' . $chunk['file']);
     }
 
+    /**
+     * Get URL(s) of CSS file(s) associated with an asset.
+     *
+     * @param string $asset The asset to get CSS for
+     * @param string|null $buildDirectory Optional build directory
+     * @return array Array of CSS file URLs
+     */
+    public function assetCss(string $asset, string $buildDirectory = null): array
+    {
+        $buildDirectory ??= $this->buildDirectory;
+
+        if ($this->isRunningHot()) {
+            return [];
+        }
+
+        $chunk = $this->chunk($this->manifest($buildDirectory), $asset);
+        $cssFiles = [];
+
+        // Get direct CSS files
+        foreach ($chunk['css'] ?? [] as $cssFile) {
+            $cssFiles[] = url($buildDirectory . '/' . $cssFile);
+        }
+
+        return $cssFiles;
+    }
+
     /**
      * Generate React refresh runtime script.
      */