image-set property not converting correctly

[y-anzai-colsis]

What version of Tailwind CSS are you using?

v4.0.17

What build tool (or framework if it abstracts the build tool) are you using?

Astro v5.5.5
@tailwindcss/vite v4.0.17

What version of Node.js are you using?

v22.12.0

What browser are you using?

Chrome

What operating system are you using?

macOS

ideal transformation

bg-[image-set(url(/images/header-bg.jpg.avif)_type('image/avif'),url(/images/header-bg.jpg)_type('image/jpeg'))]
↓↓↓
.bg-\[image-set\(url\(\/images\/header-bg\.jpg\.avif\)_type\(\'image\/avif\'\)\,url\(\/images\/header-bg\.jpg\)_type\(\'image\/jpeg\'\)\)\] {
  background-image: image-set(url(/images/header-bg.jpg.avif) type('image/avif'),url(/images/header-bg.jpg) type('image/jpeg'));
}

transformation of reality

bg-[image-set(url(/images/header-bg.jpg.avif)_type('image/avif'),url(/images/header-bg.jpg)_type('image/jpeg'))]
↓↓↓
.bg-\[image-set\(url\(\/images\/header-bg\.jpg\.avif\)_type\(\'image\/avif\'\)\,url\(\/images\/header-bg\.jpg\)_type\(\'image\/jpeg\'\)\)\]{
  background-image:-webkit-image-set(url(/images/header-bg.jpg.avif) 1x type("image/avif"),url(1x) type("image/jpeg"));
  background-image:image-set(url(/images/header-bg.jpg.avif) 1x type("image/avif"),url(1x) type("image/jpeg"))
}

url(1x) is wrong

[wongjn]

At least in Tailwind Play, it generates fine:

.bg-\[image-set\(url\(\/images\/header-bg\.jpg\.avif\)_type\(\'image\/avif\'\)\,url\(\/images\/header-bg\.jpg\)_type\(\'image\/jpeg\'\)\)\] {
  background-image: image-set(url(/images/header-bg.jpg.avif) type('image/avif'),url(/images/header-bg.jpg) type('image/jpeg'));
}

In Lightning CSS playground (Tailwind uses it in production), the non-prefixed version has no url() wrappers at all:

.bg-\[image-set\(url\(\/images\/header-bg\.jpg\.avif\)_type\(\'image\/avif\'\)\,url\(\/images\/header-bg\.jpg\)_type\(\'image\/jpeg\'\)\)\] {
  background-image: -webkit-image-set(url("/images/header-bg.jpg.avif") 1x type("image/avif"), url("/images/header-bg.jpg") 1x type("image/jpeg"));
  background-image: image-set("/images/header-bg.jpg.avif" 1x type("image/avif"), "/images/header-bg.jpg" 1x type("image/jpeg"));
}

Perhaps it's some Vite/Astro thing?

[y-anzai-colsis]

Thank you!

Lightning adds 1x, and url() is converted like text.

I'll try writing it differently and see what happens.

[y-anzai-colsis]

I converted it correctly when I used a Vite project instead of Astro!

I'm not sure yet, but it seems to be caused by Astro.

I'll close it and check on the Astro side.

Thank you!!!