Allow referencing CSS from JS modules with imported styles in Vite manifest

[benedekcsaba]

I’ve encountered a limitation when working with Vite in Laravel involving JS modules that import CSS directly.

In my project, I have a JavaScript file like this:

This JS file is declared as an entry point in Vite and gets compiled properly. The resulting Vite manifest looks like this:

The issue is that there's no built-in way to access the CSS file (assets/jodit-C9o_wwJe.css) independently through Laravel's Vite helpers — even though it’s clearly listed in the manifest as being imported from the JS file. This makes it difficult to include the CSS in templates where I don’t need the corresponding JavaScript.

the solution I used in the component:

The issue is that there's no built-in way to access the CSS file (jodit-C9o_wwJe.css) independently through Laravel's Vite helpers — even though it’s clearly listed in the manifest as being imported from the JS file. This makes it difficult to include the CSS in templates where I don’t need the corresponding JavaScript.

Feature Request:
It would be great to have a way to reference the CSS generated from a JS entry point (which imports the style) independently.

This would help in situations where a third-party JS library (like Jodit) includes its CSS via import, but we only need the styles in a Blade view, not the JS behavior.

Thanks for all the great work, and I appreciate your consideration!

[Csaba27]

there is a solution to this

// Vite css from js file

Vite::macro('getCss', function (string $entrypoint, bool $toHtml = false) {
    $buildDirectory ??= $this->buildDirectory;
    $manifest = $this->manifest($buildDirectory);
    $chunk = $this->chunk($manifest, $entrypoint);

    $files = collect($chunk['css'] ?? []);

    if ($toHtml) {
        return new HtmlString(
            $files->map(fn ($file) => $this->makeTag($this->assetPath("{$buildDirectory}/{$file}")))->implode('')
        );
    }

    return $files->map(fn ($file) => $this->assetPath("{$buildDirectory}/{$file}"))->all();

    return $files;
});