Subscribe on changes!

Style attributes with numeric values are not rendered on server side

avatar
Sep 8th 2022

Vue version

3.2.38

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-ats2me?file=generate.js&terminal=dev

Steps to reproduce

  1. npm generate.js

What is expected?

<div><p style="-webkit-line-clamp:2;--myVar:1;">Foo</p><p style="-webkit-line-clamp:2;--myVar:1;">Bar</p></div>

To get the exact same style attributes in the DOM in the server side rendered version. So the UI is not broken or jumping by loading/hydrating a SSR-Page.

What is actually happening?

<div><p style="">Foo</p><p style="-webkit-line-clamp:2;--myVar:1;">Bar</p></div>

its about the empty style attribute in the first paragraph.

This issue only occures in the SSR process. By rendering the exact same component in the browser, the style attributes with numeric values are rendered fine.

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (4) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.17.0 - /usr/local/bin/npm
  npmPackages:
    vue: ^3.2.38 => 3.2.38

Any additional comments?

No response