logical properties with css variables

[lekoala]

I might be missing something here but

a {
  padding-inline: var(--test)
}

does not get properly converted to padding-left and padding-right

it works fine when not using a css variable

using a css variable doesn't always means that the browser will support logical properties (eg: on chrome, css variables are supported since v49, but logical properties like padding-inline will work from v87)

Playground link:
https://lightningcss.dev/playground#%7B%22minify%22%3Afalse%2C%22customMedia%22%3Atrue%2C%22cssModules%22%3Afalse%2C%22analyzeDependencies%22%3Afalse%2C%22targets%22%3A%7B%22chrome%22%3A4128768%2C%22safari%22%3A786432%7D%2C%22include%22%3A0%2C%22exclude%22%3A0%2C%22source%22%3A%22a%20%7B%5Cn%20%20padding-inline%3A%20var(--test)%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