Mismatch between AppleSplashScreenLink href and filename #62
Description
I ran into a mismatch when using createAppleSplashScreens() without passing any options. The generated splash image filenames correctly do not include any -light- or -dark- suffix. However, the generated HTML <link> that gets added to the <head> always includes -light- in the href.
Example:
◐ Generating assets for pwa/public/favicon.svg...
✔ Generated PNG file: /pwa-assets-generator/playground/pwa/public/apple-splash-landscape-2048x1536.png
...
◐ Generating Html Head Links...
<link rel="apple-touch-startup-image" media="screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/apple-splash-landscape-light-2048x1536.png">As you can see, the filename on disk doesn't contain -light-, but the href in the generated link does, which results in a broken reference.
Config (modified from playground)
import {
createAppleSplashScreens,
defineConfig,
minimal2023Preset,
} from '@vite-pwa/assets-generator/config'
export default defineConfig({
headLinkOptions: {
preset: '2023',
},
preset: {
...minimal2023Preset,
appleSplashScreens: createAppleSplashScreens({}, ['iPad Air 9.7"']),
},
images: [
'elk/public/logo.svg',
'elk/public-dev/logo.svg',
'elk/public-staging/logo.svg',
'pwa/public/favicon.svg',
],
})My current workaround is just explicitly setting the name function and always add the suffix:
...
appleSplashScreens: createAppleSplashScreens({
name: (landscape, size) => {
return `apple-splash-${landscape ? "landscape" : "portrait"}-light-${size.width}x${size.height}.png`;
}
})
...Expected behavior: I assume If no additional options (or dark screens) are defined, the filename and the href should match (i.e., both include or exclude "light" consistently).