fix(server-renderer): omit nullish class and style attrs

[leno23]

Fixes #13228.\n\nssrRenderAttrs already skips nullish values for regular attrs, but class and style are special-cased and were rendered as empty attributes. This skips class/style when their raw value is null or undefined while preserving existing array/object normalization for non-nullish values.\n\nTest: pnpm vitest packages/server-renderer/tests/ssrRenderAttrs.spec.ts --run

Summary by CodeRabbit

• Bug Fixes
  • Fixed server-side rendering to properly handle null and undefined values for class and style attributes, preventing empty attribute emissions in the rendered output.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: aba40b41-4410-4b54-8cc3-01d83a344eef

📥 Commits

Reviewing files that changed from the base of the PR and between 9d92dbd and 77ddaa1.

📒 Files selected for processing (2)

• packages/server-renderer/__tests__/ssrRenderAttrs.spec.ts
• packages/server-renderer/src/helpers/ssrRenderAttrs.ts

---

📝 Walkthrough

Walkthrough

This PR fixes SSR attribute rendering to skip class and style attributes when their values are nullish. The implementation adds null guards to the attribute emission logic in ssrRenderAttrs, while tests confirm that nullish values produce empty output strings instead of empty attributes.

Changes

Nullish class and style attribute handling in SSR

Layer / File(s)	Summary
Implementation of null guards for class and style attributes packages/server-renderer/src/helpers/ssrRenderAttrs.ts	ssrRenderAttrs wraps class and style attribute string emission in value != null checks, preventing empty attributes when props are null or undefined.
Test coverage for nullish class and style values packages/server-renderer/__tests__/ssrRenderAttrs.spec.ts	New test cases verify that ssrRenderAttrs returns an empty string when class: undefined, class: null, style: undefined, or style: null are passed.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

• vuejs/core#14327: Modifies packages/server-renderer/src/helpers/ssrRenderAttrs.ts logic for rendering class attributes, overlapping with the main PR's nullish handling.
• vuejs/core#14469: Updates packages/server-renderer/src/helpers/ssrRenderAttrs.ts class attribute emission logic, including handling based on nullish values.

Suggested labels

ready to merge, scope: ssr, :hammer: p3-minor-bug

Suggested reviewers

• skirtles-code
• KazariEX

Poem

🐰 A null-aware render spins its thread,
When class and style are not there—
Empty strings prevent what shouldn't spread,
The SSR cleaner breathes fresh air.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly and accurately describes the main change: fixing server-renderer to omit nullish class and style attributes.
Linked Issues check	✅ Passed	The PR successfully addresses issue #13228 by modifying ssrRenderAttrs to skip class and style attributes when their values are null or undefined, which is the core requirement.
Out of Scope Changes check	✅ Passed	All changes are directly related to the stated objective of fixing nullish class and style attribute handling in SSR rendering.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[pkg-pr-new]

Open in StackBlitz

@vue/compiler-core

pnpm add https://pkg.pr.new/@vue/compiler-core@14930

npm i https://pkg.pr.new/@vue/compiler-core@14930

yarn add https://pkg.pr.new/@vue/compiler-core@14930.tgz

@vue/compiler-dom

pnpm add https://pkg.pr.new/@vue/compiler-dom@14930

npm i https://pkg.pr.new/@vue/compiler-dom@14930

yarn add https://pkg.pr.new/@vue/compiler-dom@14930.tgz

@vue/compiler-sfc

pnpm add https://pkg.pr.new/@vue/compiler-sfc@14930

npm i https://pkg.pr.new/@vue/compiler-sfc@14930

yarn add https://pkg.pr.new/@vue/compiler-sfc@14930.tgz

@vue/compiler-ssr

pnpm add https://pkg.pr.new/@vue/compiler-ssr@14930

npm i https://pkg.pr.new/@vue/compiler-ssr@14930

yarn add https://pkg.pr.new/@vue/compiler-ssr@14930.tgz

@vue/reactivity

pnpm add https://pkg.pr.new/@vue/reactivity@14930

npm i https://pkg.pr.new/@vue/reactivity@14930

yarn add https://pkg.pr.new/@vue/reactivity@14930.tgz

@vue/runtime-core

pnpm add https://pkg.pr.new/@vue/runtime-core@14930

npm i https://pkg.pr.new/@vue/runtime-core@14930

yarn add https://pkg.pr.new/@vue/runtime-core@14930.tgz

@vue/runtime-dom

pnpm add https://pkg.pr.new/@vue/runtime-dom@14930

npm i https://pkg.pr.new/@vue/runtime-dom@14930

yarn add https://pkg.pr.new/@vue/runtime-dom@14930.tgz

@vue/server-renderer

pnpm add https://pkg.pr.new/@vue/server-renderer@14930

npm i https://pkg.pr.new/@vue/server-renderer@14930

yarn add https://pkg.pr.new/@vue/server-renderer@14930.tgz

@vue/shared

pnpm add https://pkg.pr.new/@vue/shared@14930

npm i https://pkg.pr.new/@vue/shared@14930

yarn add https://pkg.pr.new/@vue/shared@14930.tgz

vue

pnpm add https://pkg.pr.new/vue@14930

npm i https://pkg.pr.new/vue@14930

yarn add https://pkg.pr.new/vue@14930.tgz

@vue/compat

pnpm add https://pkg.pr.new/@vue/compat@14930

npm i https://pkg.pr.new/@vue/compat@14930

yarn add https://pkg.pr.new/@vue/compat@14930.tgz

commit: 77ddaa1

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	106 kB	40.1 kB	36 kB
vue.global.prod.js	164 kB	60.1 kB	53.5 kB

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	48.8 kB	19 kB	17.4 kB
createApp	56.9 kB	22 kB	20.1 kB
createSSRApp	61.2 kB	23.8 kB	21.7 kB
defineCustomElement	63.1 kB	23.9 kB	21.8 kB
overall	71.7 kB	27.4 kB	25 kB

[edison1105]

duplicate of #13745