A small bug

[diqye]

source page.css

@property --p{
    /* https://developer.mozilla.org/zh-CN/docs/Web/CSS/percentage */
    syntax: '<percentage>';
    initial-value: 0%;
    inherits: false;
}

After next build

@property --p{
    /* https://developer.mozilla.org/zh-CN/docs/Web/CSS/percentage */
    syntax: '<percentage>';
    initial-value: 0;
    inherits: false;
}

The problem is that 0 isn't a valid value for <percentage>, so @property will be ignored

[icyJoseph]

Hi,

Yeah this sort of thing happens because either PostCSS or cssnano modifications.

I've explored a similar issue before, here, #62002 (comment), again, not exactly the same issue you describe, but this one was a PostCSS code transformation.

Now, to your particular case, I've found:

• [Bug]: postcss-convert-values stripping % from 0 in initial-value for @property at-rule cssnano/cssnano#1526

This has been fixed on cssnano, so I guess, it can be brought into the next.js config somehow.

• Fix in cssnano, https://github.com/cssnano/cssnano/releases/tag/cssnano%406.0.2

So, looks like Next.js needs v6.0.2 - but I am not 100% about which version is currently compiled in, but it probably requires a postcss update 🤔