Inline CSS Loading Fails with Vite 5

[bavodeclercq]

Describe the bug

When using Vite 5, the function {{ craft.vite.inline(craft.vite.entry('emails.css')) }} fails to return any output, indicating a significant issue with inline CSS loading. The core of the problem lies within the extractEntry function in manifestHelper.php, which is required to delve deeper due to changes in how CSS files are represented in manifest.json in Vite 5. The malfunction occurs because the styleKey is not correctly retrieved. This is due to the filenameWithoutHash function not functioning correctly, as it only searches for dots in filenames, ignoring dashes. This specific issue traces back to the transition from Vite 3 to Vite 4, where the separator in filenames changed from dots to dashes. However, the repercussions of this change only became apparent with the introduction of Vite 5, due to adjustments in the manifest file structure and the handling of CSS files. A workaround involves modifying line 300 in ManifestHelper.php from $filenameParts = explode('.', $filename); to $filenameParts = preg_split("/[.-]/", $filename);, which addresses the issue and allows the CSS from email.css to be correctly inlined.

To reproduce

To reproduce the behavior, follow these steps:

1. Upgrade to Vite 5.
2. Attempt to inline CSS in a Craft CMS template using {{ craft.vite.inline(craft.vite.entry('emails.css')) }}.
3. Observe that the expected inline CSS is not rendered, indicating the function returns nothing.

Expected behaviour

The expected behavior is for the CSS from emails.css to be correctly inlined when using the {{ craft.vite.inline(craft.vite.entry('emails.css')) }} function in Craft CMS with Vite 5.

Screenshots

N/A

Versions

• Plugin version: Vite 4.0.8
• Craft version: Craft 4.7.1

[khalwat]

Appreciate the issue! I think:

$filenameParts = preg_split("/[.-]/", $filename);

Might be problematic if the file name has a - in it however.

[bavodeclercq]

Yeah, you're right. The quick and dirty fix was a stopgap for my scenario. Ideally, if possible, checking which version of Vite is being used and then deciding whether to split file names at dots, or just at the last dash (for Vite 5) based on that information, could be a more stable solution. Alternatively, instead of checking the version, checking if there are dots in the filename and, if not, splitting at the last dash could be another approach.

[khalwat]

Addressed in the above commits.