Add cssAsset method to get associated css files to an asset

[JuKra00]

Hey @lukaskleinschmidt,
thank you very much for this plugin!

I have a small feature request that I hope you might consider. I've a built a plugin called kirby-asset-manager that allows one to include assets on a snippet / block level. I use this to minimize the css / js files on the page, if a certain block is not being used.

To get the urls from Vite, I use the asset method from your plugin like so:

$assetManager->add('js', vite()->asset('frontend/blocks/key-visual/key-visual.ts'), ['data-taxi-reload', 'type' => 'module']);

That works perfectly, but there is one issue when using more complex components (e.g. Svelte). On built, Vite will extract the css into it's own files that are associated with the asset itself.

  "frontend/blocks/key-visual/key-visual.ts": {
    "file": "assets/key-visual-DOfCgXsk.js",
    "name": "key-visual",
    "src": "frontend/blocks/key-visual/key-visual.ts",
    "isEntry": true,
    "imports": [
      "frontend/blocks/key-visual/store/layers.svelte.ts"
    ],
    "css": [
      "assets/key-visual-CoRjIvEW.css"
    ]
  }

Using the vite()->asset() method alone, will only return the javascript file, which is expected. This is why I added a vite()->assetCss() method to resolve the css array on those files.

$assetManager->add('js', vite()->asset('frontend/blocks/key-visual/key-visual.ts'), ['data-taxi-reload', 'type' => 'module']);

foreach (vite()->assetCss('frontend/blocks/key-visual/key-visual.ts') as $cssFile):
   $assetManager->add('css', $cssFile);
endforeach;

[lukaskleinschmidt]

That looks like a good addition. How does the resolving in dev mode look like? Is it automatically injected by vite as soon as you add the respective js script in the vite input?

[JuKra00]

Yes, in dev mode, the asset method returns the hotAsset, which loads the css internally. So no need to include any css assets imo.