Fix !important modifier having no effect on native

[jezsung]

Problem

The Tailwind !important modifier (e.g., text-red-500!) has no effect
on native platforms. Classes without the modifier always win regardless
of the ! flag.

Root cause

In addMetaToStylesTemplate.ts, toCamelCase is passed as a value
instead of being called as a function when mapping importantProperties:

// Before (broken) — passes the function reference itself
importantProperties: importantProperties
    ?.map(property => property.startsWith('--') ? property : toCamelCase)

This means the importantProperties array ends up containing the
toCamelCase function reference instead of the camelCased property name
string (e.g., "color").

At runtime, the store checks:

previousBest.importantProperties.includes(property)

This compares a string like "color" against an array containing a
function reference, so it never matches and the !important guard
silently fails.

Fix

// After (fixed) — calls the function with the property
importantProperties: importantProperties
    ?.map(property => property.startsWith('--') ? property : toCamelCase(property))

Summary by CodeRabbit

• Bug Fixes

  • Corrected style property name conversion to ensure proper serialization and consistent styling behavior.

• Tests

  • Added a specificity test suite to verify style conflict resolution, including handling of important rules and deterministic tie-breaking.

[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: f84f2de1-c080-45d4-8e1d-89cb665ccdb4

📥 Commits

Reviewing files that changed from the base of the PR and between d59d929 and 145a13e.

📒 Files selected for processing (1)

• packages/uniwind/tests/native/styles-parsing/specificity.test.tsx

---

📝 Walkthrough

Walkthrough

Invokes toCamelCase(property) when mapping style property names during metadata serialization, and adds a Jest "Specificity" test that asserts resolved color outcomes for combinations of normal and !important classes.

Changes

Style metadata and parsing tests

Layer / File(s)	Summary
toCamelCase invocation in property mapping packages/uniwind/src/metro/addMetaToStylesTemplate.ts	The map transformation now correctly invokes toCamelCase(property) instead of referencing toCamelCase without arguments, ensuring non---* property names are converted to camelCase during style metadata serialization.
Specificity test suite packages/uniwind/tests/native/styles-parsing/specificity.test.tsx	Adds a Specificity Jest test that renders several View cases and asserts resolved color values for combinations of normal and !important classes, including ordering when both are !important.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

I’m a rabbit in the code so spry,
I watched a function sigh and try,
"Call me, please," the property cried,
toCamelCase answered—now names glide. 🐇✨

🚥 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 directly and concisely summarizes the main change: fixing the !important modifier's ineffectiveness on native platforms.
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.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint skipped: no ESLint configuration detected in root package.json. To enable, add eslint to devDependencies.

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

• Generate code and open pull requests
• Plan features and break down work
• Investigate incidents and troubleshoot customer tickets together
• Automate recurring tasks and respond to alerts with triggers
• Summarize progress and report instantly

Built for teams:

• Shared memory across your entire org—no repeating context
• Per-thread sandboxes to safely plan and execute work
• Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

---

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

[Brentlok]

Hey, thanks for the PR. We've totally missed that 🙈

Could you create simple unit test for important properties?

[jezsung]

When multiple ! important modifiers are set to conflicting classes, the former wins currently. Is this expected or should this be fixed to prioritize the latter?

For example, the text-blue-500! gets applied over text-red-500! in the following:

text-blue-500! text-red-500!

[Brentlok]

Is this expected or should this be fixed to prioritize the latter?

It is fine how it is working now, we don't really focus on such niche cases

[github-actions]

🚀 This pull request is included in v1.6.5. See Release v1.6.5 for release notes.