CSS var default `transparent` becomes `#0000` (Version 0.15.1)

[Hauke B.]

I may have found a problem. Could be PostCSS, but I am absolutely not shure why and how this even can happen.

Localy I run Microbundle with Node 16 and 18 on Fedora and it produces always the same output. In CI I run Microbundle on Alpine with Node 18. There is one difference in one of the artifacts:

var(--dhv-card-background, transparent) becomes var(--dhv-card-background, #0000)

The complete diff looks like this:

Left is localy build and on the right is from the CI

Packages are installed via npm ci --cache .npm --prefer-offline

Microbundle is executed this way (via npm script):

microbundle build -f modern --css inline --sourcemap false --generateTypes false --external @fullcalendar,@owja --pkg-main false -i src/components.ts -o ./Resources/Public/Js/components.js

Custom Browserslist Config:

"browserslist": [
    "extends @owja/browserslist-config"
]

module.exports = [
  "since 2021 and > 0.2%",
  "current node",
];

[Hauke B.]

I updated Node localy (via nvm) from 18.13.0 to 18.16.1 and reinstalled packages. Now I get #0000 localy too. ^^

Strange. At least I have the problem now on all plattforms: transparent becomes #0000 :-D

[Hauke B.]

ok I got it partialy. Not sure why the build output differed, but #0000 is the same as transparent. I missed completly the short syntax of hex colors with transparency. ^^

Edit: switching back to a older node version produces again transparent. It relies on node/npm version as far as I can see.

[Ryan Christian]

Might be rollup-plugin-postcss being a bit weird, but yes, #0000 is intentional as it's smaller and compresses better than transparent.

[Ryan Christian]

Going to close this out as there's no functional issue and nothing for us to fix really.

If the inconsistency is an issue for you, you might want to reach out and make an issue on cssnano, as I believe that's what's handling this. No idea why that differs across environments myself.