@tailwindcss/vite fails handling image-set() notations

[RaBic]

I'm currently using v4.0.11 as a Vite plugin with Node v22.14.0.

when using image-set() CSS functional notations in a css file and processing them with the tailwind vite plugin,

background-image: image-set(
  url("@/assets/image1.avif") 1x,
  url("@/assets/image2.avif") 2x,
);

becomes

background-image:image-set(url(/assets/image1-xxx.avif) 1x,url(2x))

I've made a little repo for reproduction purposes:
RaBic/tw4-imageset-bug

[philipp-spiess]

Hey! I was looking into this and it seems to be an issue with esbuild CSS minification. We'll have to report an upstream issue for this.

The bug can be reproduced in a new Vite setup with only the following CSS:

body {
  background-image: image-set("./assets/image1.avif" 1x,"./assets/image2.avif" 2x);
}

Notice the missing space between 1x, and ". That's what's causing esbuild CSS minifier to fail here.

A workaround might be to either not minify the CSS file (since Tailwind CSS already minifies it for you anyway) by setting

build: {
  cssMinify: false,
},

In your Vite config or by changing the CSS processor to lightningcss via css: { transformer: 'lightningcss' }.

[RaBic]

Hey Phillipp, thank you for having a look into this.

Both workarounds are working fine for me, I'll go with ligtningcss.

[philipp-spiess]

Created an upstream Vite issue: vitejs/vite#19659

Interestingly, it doesn't seem to be an esbuild issue, see: https://esbuild.github.io/try/#dAAwLjI1LjEALS1taW5pZnkgLS1sb2FkZXI9Y3NzAGJvZHkgewogIGJhY2tncm91bmQtaW1hZ2U6IGltYWdlLXNldCgiYS5wbmciIDF4LCJiLnBuZyIgMngpOwp9Cg

[philipp-spiess]

Seems like this issue was resolved on Vite in the main branch. The next patch release should contain the fix for it 😎 Going to mark this issue as closed then but feel free to reach out if there's anything else.