Vite support

[Muffinman]

I'm struggling to get this working properly with Vite assets.

This is because Vite does not currently expose a way of getting the filesystem path for a chunked asset.

It's possible to get an HTTP link to the asset below, but this will not work in a CI environment.

Config::set('css-inliner.css-files', [
    // Returns HTTP URL to the asset. Not useful for me because the URL does not resolve in CI environment
    Vite::asset('my-styles.css');
]);

Vite has protected methods for returning the chunked filename, so it's not possible to call Vite::chunk() or Vite::manifest() directly.

I can however, get the content of the files with Vite::content('my-styles.css'), so I would propose to add a new config option css-inliner.css-content which would allow this to be used as below.

Config::set('css-inliner.css-content', [
    Vite::content('my-styles.css');
]);

Maybe I've missed something so let me know if there's another way of doing this.

[Muffinman]

I did just discover a work-around:

// Add a way of accessing the storage path
Vite::macro('assetSystemPath', function ($asset, $buildDirectory = null) {
    $buildDirectory ??= $this->buildDirectory;

    if ($this->isRunningHot()) {
        return $this->hotAsset($asset);
    }

    $chunk = $this->chunk($this->manifest($buildDirectory), $asset);

    return public_path($buildDirectory.'/'.$chunk['file']);
});

Config::set('css-inliner.css-files', [
    Vite::assetSystemPath('my-styles.css'),
]);

[dvlpr91]

@Muffinman

I faced the same situation.

I am using laravel and vite.

Can you tell me specifically what file should i put your settings in?

[Muffinman]

I put it in my AppServiceProvider.php boot method. Might also work fine in register.

[dvlpr91]

@Muffinman

Thank you very much for your kind reply.
I also wrote your code in the boot method of the AppServiceProvider file, but it didn't work, which is why I left the question.
I'm very confused, but I'll try to find the cause further.

[Muffinman]

I think my code might be bugged if running isRunningHot() check passes, I just quickly coped that code from an existing block without thinking about it too much!

[dvlpr91]

@Muffinman

My problem was due to tailwindcss.
Actually, even if you don't use this package, laravel 10 seems to convert it to an inline style on its own. However, some css variables from tailwindcss remain in the internal area.

[DannyvdSluijs]

@Muffinman / @dvlpr91 is there a consensus? Will either of you two make a PR to add Vite support?

[Muffinman]

I'm happy to make a PR to add css-inliner.css-content config file support, if we agree that is the best way to go.

I believe that allows for maximum flexibility.

[fithurriague]

Hi! @Muffinman @DannyvdSluijs any news on this? I would love to help but I do not have enough experience on php I guess. Tomorrow I'll try the work around, but the config approach seems really nice taking into consideration that now laravel works with vite by default. Thanks for all the work you both have put on <3

[SlothLady]

Was this ever added?

[Muffinman]

I used my work around posted above in the end.

I can still PR the content change though because I think it will be useful for others.