Version hash in CSS does not match manifest and mix() output

• Laravel Mix Version: 6.6.6
• Node Version: 15.5.1
• NPM Version: 7.3.0
• OS: macOS 11

Description:

I use mix with file versioning and I have custom fonts that I embed. These font assets get different hashes in the generated CSS files (where the fonts are defined) and in the HTML where I preload them using mix().

Steps To Reproduce:

My mixpack.mix.js looks like this:

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('tailwindcss'),
    ]);

mix.copy('resources/img', 'public/img');
mix.copy('resources/fonts', 'public/fonts');

if (mix.inProduction()) {
    mix.version();
}

app.css imports fonts.css which has fonts defined like this:

@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Rubik Regular'),
    url('../fonts/rubik-v11-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/rubik-v11-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

Now in my HTML header I preload the WOFF2 fonts like this:

<link rel="preload" href="{{ mix('fonts/rubik-v11-latin-regular.woff2') }}" as="font" type="font/woff2" crossorigin>

In the compiled CSS the font URL is

url(/fonts/rubik-v11-latin-regular.woff2?1d5a416e2889e382ab1af96fef09bd16)

but in the mix manifest file it is

"/fonts/rubik-v11-latin-regular.woff2": "/fonts/rubik-v11-latin-regular.woff2?id=e21357a42764554dd5e3"

and accordingly in the HTML the mix() function will also output the URL with the hash e21357a42764554dd5e3

So the hashes in the generated CSS differ from the hashes in the manifest and in the HTML. This breaks my preloading as the file will be loaded twice.

---

Now am I doing something wrong or is this a bug?

Also, I would be fine with excluding all WOFF files from the versioning as they won’t change anyway. But the docs say I could either version everything or list each file separately. Is there some kind of exclusion list or a way to include entire folders? I don’t want to put every single image as a paremeter to version().

I guess a workaround would be to put absolute URLs in the CSS file so they are not versioned. But I thought there must be a better solution.

[thecrypticace]

I’m going to re-open for me to investigate this further. Ideally the hashes generated by mix would match those by webpack but I’m not yet sure of the feasibility of that. I’ve investigated this some previously and it appears to be rather difficult.

As this isn’t strictly an error but a preloading issue this isn’t super high priority but I’ll see what I can figure out.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.