Skip to content

Vite adds spaces after commas in image url within srcset (HTML files) #16323

Closed
@rarous

Description

Describe the bug

Vite appears to add spaces around commas when a comma is present in a srcset property. This only occurs in HTML files.

If my index.html file contains

<img
srcset="https://res.cloudinary.com/hackercamp/image/upload/dpr_1,f_auto,fl_progressive,q_auto,w_100/v1/www.hackercamp.cz/faq-ubytko-3 1x, https://res.cloudinary.com/hackercamp/image/upload/dpr_2,f_auto,fl_progressive,q_auto,w_100/v1/www.hackercamp.cz/faq-ubytko-3 2x"
src="https://res.cloudinary.com/hackercamp/image/upload/dpr_auto,f_auto,fl_progressive,q_auto,w_100/v1/www.hackercamp.cz/faq-ubytko-3"
>

Vite outputs

<img srcset="https://res.cloudinary.com/hackercamp/image/upload/dpr_1, f_auto, fl_progressive, q_auto, w_100/v1/www.hackercamp.cz/faq-ubytko-3 1x, https://res.cloudinary.com/hackercamp/image/upload/dpr_2, f_auto, fl_progressive, q_auto, w_100/v1/www.hackercamp.cz/faq-ubytko-3 2x" src="https://res.cloudinary.com/hackercamp/image/upload/dpr_auto,f_auto,fl_progressive,q_auto,w_100/v1/www.hackercamp.cz/faq-ubytko-3">

Take note of the space added to the image URL after the comma in the pathname. /dpr_2, f_auto, fl_progressive, q_auto, w_100/.

To narrow the matching logic, in Cloudinary case, the commas always between slashes.

Reproduction

https://stackblitz.com/edit/vitejs-vite-ruqamh?file=index.html

Steps to reproduce

HTML plugin always breaks it

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.3 - /usr/local/bin/pnpm
  npmPackages:
    vite: ^5.2.6 => 5.2.7

Used Package Manager

npm

Logs

No response

Validations

Metadata

Assignees

No one assigned

    Labels

    feat: htmlp3-minor-bugAn edge case that only affects very specific usage (priority)

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions