backdrop-filter being removed from production build

[surrealroad]

Hello, hope someone can help. I have the following in my app.css:

@utility glass {
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow:
		inset -0.75px -0.5px rgba(255, 255, 255, 0.1),
		inset + 0.75px +0.5px rgba(255, 255, 255, 0.025),
		3px 2px 10px rgba(0, 0, 0, 0.25),
		inset 0px 0px 10px 5px rgba(255, 255, 255, 0.025),
		 inset 0px 0px 40px 5px rgba(255, 255, 255, 0.025);
	background: hsl(0deg 0% 100% / 0.1);
}

when i do npm run dev everything is fine, when i do npm run preview, my utility class loses the backdrop-filter property:

[wongjn]

Try reversing the order of the vendor-prefixed and non-vendor-prefixed declarations to the conventional order:

 @utility glass {
-  backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
   box-shadow:

[surrealroad]

Well, that works! Why though?

[wongjn]

Lightning CSS is used under the hood when you run a production build. It seems like it has some logic that collapses similar properties together, and thus the later -webkit one would win out.

[arunmohan12]

Hola amigoz

[fabianwohlfart]

google the issue was more effective than asking chat or claude, they have been on the complete wrong track. thanks.