CSS minifying process removing percent character from CSS.

[ilkkag]

Summary

So, I am using the new @Property css rule (https://developer.mozilla.org/en-US/docs/Web/CSS/@property) to animate some gradient masks. The issue is that CSS minifying process replaces the value of 0% with 0 and that causes the animation to fail as the value is expected to be percentage, not an integer. It is working correctly in local dev environment but when deployed to Vercel, no luck. Is there any way to fix this problem? I am using the latest version of Next.js.

Additional information

Chrome gives this error message: "An @property rule is ignored because it contains an invalid property or is missing a required one"

My code that works locally:
@property --c {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

Example

No response

[ilkkag]

No one?

[icyJoseph]

Hi,

This can be one of the PostCSS plugins used, but I am not sure which one.

It looks a lot like this other issue: #62002 (comment)

Most definitely not the actual same issue, but it is a start I guess.

What's happening is that when you do next build, the CSS is compressed, minified and uglified as much as possible to save bits of data.

So, we have to figure out which step of that process is removing the unit.

[ilkkag]

Sure, that config change fixed it.

[icyJoseph]

Alright then it is most likely cssnano that's doing something weird.

Could you please try to create a reproduction example at Stackblitz? Just type next.new on your URL search bar, and enter. It'll take you to a Stackblitz playground ready with Next.js.

Do the smallest change necessary to see the error, save the project and paste back the link. I'll make sure to use the link with next build, to narrow things further.

[ilkkag]

Sure thing, here it is: https://stackblitz.com/edit/nextjs-dbqjyf?file=app%2Fglobals.css

[icyJoseph]

Alright, I got something.

@property --test {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

div {
  width: var(--test);
}

If we take that through CSSNano, it outputs:

@property --test{syntax:"<percentage>";inherits:false;initial-value:0}div{width:var(--test)}

To run this locally:

yarn init -y && yarn add postcss-cli postcss cssnano

and then create postcss.config.js with these contents:

module.exports = {
    plugins: [
        require('cssnano')({
            preset: 'default',
        }),
    ],
};

Then create input.css paste your code in and run npx postcss input.css, and it'll print the faulty code.

It might still be PostCSS though... gonna have to test that as well

[rstar2]

Same problem exists in Nextjs 15.2 (not really Next.js fault but still it's not fixed in postCSS or what's so ever)