border-color is not applying color correctly with light-dark()

[fmacherey]

Hey guys,

I found out that light-dark is not transpiled correctly when used inside in border-color.

We have a module on different pages, some of them have color-scheme to only light-mode, some other pages have color-scheme set to light and dark. So my css definition is:

border-bottom: 1px solid light-dark(
    var(--wcom-c-outline-variant-light),
    var(--wcom-c-outline-variant-dark)
);

But in a page with only light color-scheme, it wrongly applies the dark color only, so the rendered CSS in the browser is:

border-bottom: 1px solid var(--lightningcss-dark,var(--wcom-c-outline-variant-dark));

I also checked, and the normal color-rule correctly applies the light and dark colors, so I suppose, border-bottom is not transpiled correctly.

I fixed this, by defining an extra var right before usage:

--border-color: light-dark(
    var(--wcom-c-outline-variant-light),
    var(--wcom-c-outline-variant-dark)
);
border-bottom: 1px solid var(--border-color);

I hope this can help trouble shooting the issue. About my project infrastructure (only partially listed deps):

"dependencies": {
    "next": "^14.2.14",
    "postcss": "^8.4.47",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "sass": "^1.79.4",
},

and experimental.useLightningcss is enabled in next.config.js

[fmacherey]

Additional info: color and background-color are transpiled correctly, but border-bottom and also the other border-rules not.