Percent values in @keyframes in CSS are incorrect only at build time.

[aoisensi]

Version

4.5.9

Reproduction link

aoisensi/bug-vue-cli-keyframe-percent@cfbf0f5

Environment info

  System:
    OS: Linux 5.7 Arch Linux
    CPU: (8) x64 Intel(R) Core(TM) i7-3770K CPU @ 3.50GHz
  Binaries:
    Node: 15.2.1 - /usr/bin/node
    Yarn: 1.22.10 - /usr/bin/yarn
    npm: 6.14.8 - /usr/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmGlobalPackages:
    @vue/cli: 4.5.9

Steps to reproduce

$ vue create app
Select "Default (Vue 3 Preview)".
Edit .vue file.
$ yarn serve
Success fade-in.
$ yarn build
No fade-in!!

What is expected?

Successful fade-in with built data.

What is actually happening?

  to {
    opacity: 100%;
  }

will be

  to {
    opacity: 1%;
  }

[fangbinwei]

check this comment cssnano/cssnano#829 (comment)
This problem will be fixed in cssnano next release. CSS will be minified in production by cssnano.

[aoisensi]

Thank you!