Multiple background images starting with gradient compile to background-color

[alb-lv]

The class

bg-[linear-gradient(hsl(0_0%_0%_/_60%),_hsl(0_0%_0%_/_60%)),_url(https://picsum.photos/id/237/1000/600)]

is expected to compile to background-image

.bg-\[linear-gradient\(hsl\(0_0\%_0\%_\/_60\%\)\2c _hsl\(0_0\%_0\%_\/_60\%\)\)\2c _url\(https\:\/\/picsum\.photos\/id\/237\/1000\/600\)\] {
  background-image: linear-gradient(hsl(0 0% 0% / 60%), hsl(0 0% 0% / 60%)), url(https://picsum.photos/id/237/1000/600);
}

as per https://developer.mozilla.org/en-US/docs/Web/CSS/background-image.

Actual compiles to background-color instead:

.bg-\[linear-gradient\(hsl\(0_0\%_0\%_\/_60\%\)\2c _hsl\(0_0\%_0\%_\/_60\%\)\)\2c _url\(https\:\/\/picsum\.photos\/id\/237\/1000\/600\)\] {
  background-color: linear-gradient(hsl(0 0% 0% / 60%), hsl(0 0% 0% / 60%)), url(https://picsum.photos/id/237/1000/600);
}

[wongjn]

You can "typecast" the value with image: to avoid ambiguities like:

bg-[image:linear-gradient(hsl(0_0%_0%_/_60%),_hsl(0_0%_0%_/_60%)),_url(https://picsum.photos/id/237/1000/600)]

[alb-lv]

That is neat! Thanks wongjn :)