`width: -webkit-fill-available;` is removed unexpectedly

[Lutymane]

I'm using Lightning CSS for cssMinify option in Vite and I noticed it removes width: -webkit-fill-available; in production styles.

I also tried to do this in Vite config:

css: {
    lightningcss: {
      targets: browserslistToTargets(browserslist(">= 0.25%")),
    },
  },

but it still removes the rule.

What is wrong?

Lightning CSS version: 1.27 Vite: 5.4.8

[devongovett]

Please provide a reproduction. Try the playground here: https://lightningcss.dev/playground/index.html

[Lutymane]

I did more investigation and found the cause finally. I use build.target: "esnext" in Vite and following their source code, Vite passes empty object to targets option for lightningcss.

So lightningcss removes non standard values if targets are not specified. Here's reproduction:

https://lightningcss.dev/playground/index.html#%7B%22minify%22%3Afalse%2C%22customMedia%22%3Afalse%2C%22cssModules%22%3Afalse%2C%22analyzeDependencies%22%3Afalse%2C%22targets%22%3A%7B%7D%2C%22include%22%3A0%2C%22exclude%22%3A0%2C%22source%22%3A%22a%20%7B%5Cn%20%20%20%20width%3A%20-webkit-fill-available%3B%5Cn%20%20%20%20width%3A%20-moz-available%3B%5Cn%20%20%20%20width%3A%20stretch%3B%5Cn%7D%22%2C%22visitorEnabled%22%3Afalse%2C%22visitor%22%3A%22%7B%5Cn%20%20Color(color)%20%7B%5Cn%20%20%20%20if%20(color.type%20%3D%3D%3D%20'rgb')%20%7B%5Cn%20%20%20%20%20%20color.g%20%3D%200%3B%5Cn%20%20%20%20%20%20return%20color%3B%5Cn%20%20%20%20%7D%5Cn%20%20%7D%5Cn%7D%22%2C%22unusedSymbols%22%3A%5B%5D%2C%22version%22%3A%22local%22%7D

[fregante]

I can confirm the issue. I was stumped because I could only reproduce via my rollup setup (and unplugin-lightningcss).

The most confusing part is that include: Features.Nesting | Features.VendorPrefixes still added a bunch of antiquate prefixes but not on fill-available, which was supposedly added in https://github.com/parcel-bundler/lightningcss/issues/186

[devongovett]

I think this is working as expected? You should always provide browser targets to lightningcss. If you don't, we assume you are targeting a theoretical browser with perfect support for standards, so fallbacks and prefixes will be removed. We need to know what browser you actually want to target so we can output the correct code.

[Lutymane]

Hmm but isn't it counter intuitive? Since if you don't supply the target that means you don't know which browser will use the code, thus it definitely shouldn't remove anything at least. Just perhaps not adding anything extra? It just leads to hard to pinpoint problems like this one with Vite

[fregante]

I think that inheriting Vite's targets is a "good default", however removing the prefixed value is a bug because no browser currently supports the non-prefixed value.

Another way to think of it: it's not a "prefixed value", but just "a valid value for all current browsers". As such, it should not be removed.