`@property` percentage initial-value fails to include the "%" symbol on build

[mitchuman]

What version of Tailwind CSS are you using?

v4.1.16

What build tool (or framework if it abstracts the build tool) are you using?

"@tailwindcss/postcss": "^4.1.16"

What version of Node.js are you using?

v20.19.0

What browser are you using?

All major browsers (FF, Ch, Sf)

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/pHMIv6qP8i

I'm not able to replicate a build output in Tailwind Play...

Describe your issue

I'm using a simple @property declaration (<percentage>) with an initial-value set to 0%. This renders normally during local dev, but only after building (when it gets minified) the 0% transpiles to plain 0.

Not sure if this is a Tailwind or @tailwindcss/postcss bug, but a bug nonetheless that is preventing my animation to perform as intended on production.

[wongjn]

I thought this could be a Lightning CSS bug (Lightning CSS runs only in production) but it seems to retain the percentage unit OK. There's mention of something about zero lengths being too agressively optimized in v1.17.1 but not sure if it applies here. Also, that's quite an old version - current tag is v1.30.2 - so I wouldn't expect that to be the problem.

Consider providing a git repo that reproduces the issue and we can take a look for you.

[thecrypticace]

I think I've seen this with cssnano — possibly related. A reproduction would be helpful here.

[mitchuman]

@wongjn @thecrypticace Repro repo created here: https://github.com/mitchuman/at-property-percentage-repro

Demo: https://at-property-percentage-repro-webpack.vercel.app/

When reproducing, I noticed the issue happens only on Next.js Webpack builds, and not on Turbopack builds (which uses Lightningcss). I linked demos to both in the README.

[thecrypticace]

Ah, if it’s only on next’s webpack builds that definitely feels like a css nano bug. I think they bundle their version of cssnano.

I’ll check this some time today to verify.

[thecrypticace]

Oh, @RobinMalfait already opened an issue with Next.js about this back in May: vercel/next.js#79149

[thecrypticace]

Gonna close this as a duplicate of #17977

There's a workaround in that issue: #17977 (comment)