<percentage> in css @property is handled incorrectly after run build

[llliuyang]

Version

2.7.15

Reproduction link

codepen.io

Steps to reproduce

npm run build

What is expected?

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

What is actually happening?

@property --p {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0;
}

---

The value of 'initial-value' property changes from 0% to 0, causing the animation to fail.
I've tried vue 2.6 upgrades to the latest 2.7.15 all have this problem,but it's correct in vue3.x

@vue/cli: 5.0.8

[yunchuan123]

This is not a Vue issue, but rather a result of the CSS compression plugin during the bundling process.

[yunchuan123]

This is an issue with the CSS compression plugin , so you will only encounter this issue after packaging, rather than during the development process.
Although this compression plugin is built-in to Vue-cli.