fix: handle multiline classes

[Brentlok]

#608
Adds only around ~2-3ms in our benchmarks

Summary by CodeRabbit

• Bug Fixes
  • Fixed styling for native components when class names are separated by newlines or other whitespace.
  • Multiple utility classes now parse and apply together as expected.

[coderabbitai]

📝 Walkthrough

Walkthrough

Native style resolution now handles newline- and whitespace-separated class names. A new test verifies multiline classes produce the expected background color and border width.

Changes

Multiline className parsing

Layer / File(s)	Summary
Whitespace tokenization and validation packages/uniwind/src/core/native/store.ts, packages/uniwind/tests/native/styles-parsing/multiline.test.tsx	resolveStyles splits multiline class names with whitespace-aware tokenization, and the test verifies the parsed backgroundColor and borderWidth values.

Estimated code review effort: 2 (Simple) | ~10 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: fixing support for multiline class strings.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/multiline-classes

---

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.}

[greptile-apps]

Greptile Summary

This PR adds multiline class-name support to native style resolution. The main changes are:

• Tokenization of newline-containing native class strings.
• A native test for multiline background and border classes.

Confidence Score: 4/5

The changed native tokenization path needs a small fix before merging.

• Newline-separated classes resolve correctly.
• Tab-separated classes without a newline remain joined and lose their styles.
• Unconditional whitespace splitting fixes the affected path.

packages/uniwind/src/core/native/store.ts

Important Files Changed

Filename	Overview
packages/uniwind/src/core/native/store.ts	Adds newline-aware tokenization, but tab-separated classes without a newline are still silently dropped.
packages/uniwind/tests/native/styles-parsing/multiline.test.tsx	Adds focused coverage for newline-separated native classes.

_{Reviews (1): Last reviewed commit: "fix: handle multiline classes" | Re-trigger Greptile}

[greptile-apps]

Non-Newline Whitespace Joins Classes

When a native className uses tabs without a newline, such as bg-red-500\tborder-2, this condition selects the space-only split and treats both classes as one unknown token. Native rendering then silently omits both styles, while the web resolver accepts the same whitespace-separated input.

Suggested change

	const classNameTokens = classNames.includes('\n')
	? classNames.split(/\s+/).filter(Boolean)
	: classNames.split(' ')
	const classNameTokens = classNames.split(/\s+/).filter(Boolean)

[Brentlok]

This will resolve in performance drop

[greptile-apps]

That's a fair point — split(/\s+/).filter(Boolean) is measurably slower than split(' ') on the hot path. Given that the PR already benchmarks the overhead carefully, always using the regex split would undermine that work.

A middle ground: extend the fast-path condition to also cover tabs, keeping the regex split only for non-space whitespace:

Suggested change

	const classNameTokens = classNames.includes('\n')
	? classNames.split(/\s+/).filter(Boolean)
	: classNames.split(' ')
	const classNameTokens = classNames.includes('\n') || classNames.includes('\t')
	? classNames.split(/\s+/).filter(Boolean)
	: classNames.split(' ')

This preserves the fast split(' ') path for the common case while still correctly handling tab-separated class names. If tabs in className strings are genuinely not a concern in your usage (i.e. always space- or newline-separated), then the original code is fine as-is.

Tip: You can customize Greptile's behavior for this repo with .greptile/rules.md and .greptile/config.json.

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/uniwind/src/core/native/store.ts`:
- Around line 111-115: Update the classNameTokens initialization in the
class-name parsing flow to always split classNames with the existing whitespace
regex and remove the conditional split(' ') fallback, preserving the
filter(Boolean) behavior so spaces, tabs, newlines, and other whitespace
separators produce individual class names.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 244c4130-4b74-41f7-b002-b12506555074

📥 Commits

Reviewing files that changed from the base of the PR and between 3f971f1 and a0ee2d9.

📒 Files selected for processing (2)

• packages/uniwind/src/core/native/store.ts
• packages/uniwind/tests/native/styles-parsing/multiline.test.tsx