Skip to content

CSS unit stripped after build in the linear() timing function causes it to break #33014

@cernymatej

Description

@cernymatej

Environment

  • Operating System: Darwin
  • Node Version: v22.17.0
  • Nuxt Version: 4.0.3
  • CLI Version: 3.27.0
  • Nitro Version: 2.12.4
  • Package Manager: pnpm@10.14.0
  • Builder: -
  • User Config: modules, pages, dir, vite, typescript
  • Runtime Modules: (), ()
  • Build Modules: -

Reproduction

https://stackblitz.com/edit/github-wzqq2xfw?file=app/app.vue

Describe the bug

I noticed that after building Nuxt, the % unit in CSS gets stripped from all values that are 0, which causes the linear() timing function to break, because it always expects a percentage on the right side.

.example {
  transition-timing-function: linear(0 0%, 1 100%);
}
Image

Steps to reproduce

  1. run pnpm build
  2. run pnpm preview
  3. inspect the CSS of the Example div

Additional context

Might not be a Nuxt bug, but I wasn't able to reproduce it in plain Vue: https://stackblitz.com/edit/vitejs-vite-u8bwhrqx?file=src/App.vue&terminal=dev

Logs

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions