quasarframework / quasar

Quasar Framework - Build high-performance VueJS user interfaces in record time
https://quasar.dev
MIT License
25.29k stars 3.43k forks source link

Build plugin transforms/breaks inline favicon #17091

Closed duncan-oxd closed 2 weeks ago

duncan-oxd commented 1 month ago

What happened?

I have a requirement to minimize network requests, so I need to encode the favicon and include it inline in index.html

The built version of index.html has a / character prepended to the inline favicon's data URI, which makes it invalid.

If the encoded data URI is very long, you even get an error from Vite:

[vite:build-html] ENAMETOOLONG

What did you expect to happen?

Data URIs should be left alone and not transformed by the Vite build. Note that this does not happen with a plain Vite project, or on Vite.new: https://stackblitz.com/edit/vitejs-vite-uimtpr?file=index.html

I believe it is part of Quasar's plugins/configuration.

Reproduction URL

https://stackblitz.com/edit/quasarframework-tteblu?file=index.html

How to reproduce?

I'm using vite-plugin-singlefile and dynamically URL-encoding the favicon but, ignoring that for now, here's a minimal reproduction:

  1. Create a new Quasar v2 app, using @quasar/app-vite 2.0.0-beta.5 when prompted. (That's the environment I'm using, but I think it happens on any version)

  2. In index.html, delete the included favicons and replace them with an inline one. For example:

<link rel="shortcut icon" href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAA/4QAANQA/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIgAAAAAAIAICIAIAIiIgAAIgAgAAIAAAAgACAAACAAIiAAIAAAIAAAIgAgAgAgAAACACACIiAAIiIAAAACAAAAAAAAAAAAAAAAAAEAERARAAEAAQAQAAAQAQABABEQAQABAAEAEAAQAAEAERAREAEQERAAAAAAAAAAD/8wAA/2kAALB5AAC9+wAAvuMAAL75AAC2/QAAsOEAAP3/AAD//wAA2J0AANvtAADY3QAA270AAIjIAAD//wAA" />
  1. Build the app, and the data URI will be prepended with a / character.

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Quasar CLI Commands/Configuration (@quasar/cli | @quasar/app-webpack | @quasar/app-vite)

Platforms/Browsers

Firefox, Chrome

Quasar info output

Operating System - Darwin(21.6.0) - darwin/arm64
NodeJs - 20.11.1

Global packages
  NPM - 10.2.4
  yarn - 1.22.18
  @quasar/cli - undefined
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.15.2 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 2.0.0-beta.5 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.11 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.4.21 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.3.0
  pinia - 2.1.7 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  vite - 5.2.8 -- Native-ESM powered web dev build tool
  vite-plugin-checker - Not installed
  eslint - 8.57.0 -- An AST-based pattern checker for JavaScript.
  esbuild - 0.20.2 -- An extremely fast JavaScript and CSS bundler and minifier.
  typescript - Not installed
  workbox-build - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  Host - Myhostname.local
  en0 - 192.168.50.171
  bridge100 - 192.168.64.1

Relevant log output

Build mode............. spa
 Pkg quasar............. v2.15.2
 Pkg @quasar/app-vite... v2.0.0-beta.5
 Pkg vite............... v5.2.8
 Debugging.............. no
 Publishing............. no

 App • Using quasar.config.js in "esm" format
 App •  WAIT  • Compiling of SPA UI with Vite in progress...
 App •  DONE  • SPA UI compiled with success by Vite • 1825ms

[...]

 Build succeeded

 Build mode............. spa
 Pkg quasar............. v2.15.2
 Pkg @quasar/app-vite... v2.0.0-beta.5
 Pkg vite............... v5.2.8
 Debugging.............. no
 Publishing............. no
 Browser target......... es2022|firefox115|chrome115|safari14
 =======================
 Output folder.......... /Users/myhomefolder/repos/quasar-project/dist/spa

Additional context

It's an edge case, I know, but I'm building a web dashboard to be served from an IoT device, so the entire app has to be inlined into a single index.html file :)

rstoenescu commented 2 weeks ago

Thank you for reporting this!

Fix will be available in: