Vite Treats CSS Files as JavaScript When GET Parameters Are Present

[tabuna]

Laravel Version

12.4.0

PHP Version

8.3

Database Driver & Version

No response

Description

Description:
During the migration from Laravel Mix to Vite, I am trying to maintain backward compatibility with existing files. In Mix, we generated the app.css file, added a hash to the URL, and everything worked fine.

However, when we try the same approach with Vite, for example, our manifest.json:

{
  "resources/js/app.js": {
    "file": "assets/app.js?v=a42ae7b4",
    "isEntry": true,
    "src": "resources/js/app.js",
    "integrity": "sha384-7o3LR7D3SZeNYlEBtutqQ5RTIAsoRMWVyGcFz+j5UN8OaSMKx7JNDb5Vs63R23MO"
  },
  "resources/sass/app.scss": {
    "file": "assets/app.css?v=2b2b9de9",
    "isEntry": true,
    "src": "resources/sass/app.scss",
    "integrity": "sha384-viRAZs+4cm2FTR/3nVhiUnJpMjS0B8sXxUq1Fu4wIjgyY9G+5qSxgHJQyjhiRy3/"
  }
}

The generated HTML looks like this:

<link rel="modulepreload" href="http://127.0.0.1:8000/vendor/orchid/assets/app.js?v=a42ae7b4" integrity="sha384-7o3LR7D3SZeNYlEBtutqQ5RTIAsoRMWVyGcFz+j5UN8OaSMKx7JNDb5Vs63R23MO" />
<link rel="modulepreload" href="http://127.0.0.1:8000/vendor/orchid/assets/app.css?v=2b2b9de9" integrity="sha384-viRAZs+4cm2FTR/3nVhiUnJpMjS0B8sXxUq1Fu4wIjgyY9G+5qSxgHJQyjhiRy3/" />
<script type="module" src="http://127.0.0.1:8000/vendor/orchid/assets/app.js?v=a42ae7b4" integrity="sha384-7o3LR7D3SZeNYlEBtutqQ5RTIAsoRMWVyGcFz+j5UN8OaSMKx7JNDb5Vs63R23MO" data-turbo-track="reload"></script>
<script type="module" src="http://127.0.0.1:8000/vendor/orchid/assets/app.css?v=2b2b9de9" integrity="sha384-viRAZs+4cm2FTR/3nVhiUnJpMjS0B8sXxUq1Fu4wIjgyY9G+5qSxgHJQyjhiRy3/" data-turbo-track="reload"></script>

This results in the following error:

app.css:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/css". Strict MIME type checking is enforced for module scripts per HTML spec.

Cause:
The issue arises from incorrect handling of GET parameters in the CSS file paths. When a hash is added to the URL, the isCssPath method in the Vite class does not account for the GET parameters, leading to the misidentification of files as JavaScript.

Proposed Solution:
The isCssPath method in the Vite class should be updated to correctly handle GET parameters in the file path:

/**
 * Determine whether the given path is a CSS file.
 *
 * @param  string  $path
 * @return bool
 */
protected function isCssPath($path)
{
    return Str::of($path)
        ->before('?')
        ->isMatch('/\.(css|less|sass|scss|styl|stylus|pcss|postcss)$/');
}

Steps To Reproduce

Steps to reproduce:

1. Generate the app.css and manifest.json files.
2. Add a GET parameter for the file in the manifest.json.
3. Output the file using Vite.

[tabuna]

It seems that this issue is no longer present in the newer versions, as it was fixed in #54219 .
However, I noticed that there was no test for this, so I decided to add one.