Skip to content

feat: skip unsafe Unistyles dynamic styles#22

Open
NikhilRW wants to merge 1 commit into
kuatsu:mainfrom
NikhilRW:main
Open

feat: skip unsafe Unistyles dynamic styles#22
NikhilRW wants to merge 1 commit into
kuatsu:mainfrom
NikhilRW:main

Conversation

@NikhilRW
Copy link
Copy Markdown

@NikhilRW NikhilRW commented May 2, 2026

Adds Unistyles-aware safety checks to the React Native Boost Babel optimizer.

This change detects react-native-unistyles styles created with StyleSheet.create(...) and prevents unsafe optimization when those styles are dynamic. Dynamic Unistyles styles can depend on theme values, runtime state, function styles, variants, conditionals, or other runtime expressions, so replacing those components with Boost native components can break style updates.

The optimizer now:

  • Skips Text and View when they use dynamic Unistyles styles.
  • Allows optimization for provably static Unistyles object styles.
  • Keeps the normal Boost runtime path using NativeText and NativeView.
  • Does not add a Unistyles compatibility component replacement path.

Examples skipped:

StyleSheet.create((theme) => ({
  title: { color: theme.colors.text },
}));
StyleSheet.create({
  title: (active) => ({ color: active ? 'red' : 'blue' }),
});

Tests run:

pnpm exec oxlint --fix
pnpm --filter react-native-boost typecheck
pnpm --filter react-native-boost test -- --run src/plugin/optimizers/text/__tests__/index.test.ts src/plugin/optimizers/view/__tests__/index.test.ts

Copilot AI review requested due to automatic review settings May 2, 2026 19:40
@netlify
Copy link
Copy Markdown

netlify Bot commented May 2, 2026

Deploy Preview for react-native-boost ready!

Name Link
🔨 Latest commit 9a4db95
🔍 Latest deploy log https://app.netlify.com/projects/react-native-boost/deploys/69f6532711d0ab0008323c30
😎 Deploy Preview https://deploy-preview-22--react-native-boost.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR updates the react-native-boost Babel plugin to detect react-native-unistyles styles in JSX and avoid optimizing View/Text components when the Unistyles styles are dynamic (runtime-dependent), while still allowing optimization for provably static Unistyles styles. It also includes a small Android event payload adjustment in react-native-time-to-render.

Changes:

  • Add Unistyles style detection/classification (none/static/dynamic) in the plugin’s attribute utilities.
  • Skip View/Text optimizations when dynamic Unistyles styles are detected; allow View optimization when styles are static Unistyles.
  • Add optimizer fixture coverage for Unistyles style scenarios (static vs dynamic) for both View and Text.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
packages/react-native-time-to-render/android/src/main/java/com/timetorender/OnMarkerPaintedEvent.kt Adjusts event “target” field to use viewTag directly.
packages/react-native-boost/src/plugin/utils/common/attributes.ts Introduces Unistyles style detection logic and status classification helpers.
packages/react-native-boost/src/plugin/optimizers/view/index.ts Skips optimization on dynamic Unistyles styles; conditionally relaxes style blacklisting when Unistyles styles are static.
packages/react-native-boost/src/plugin/optimizers/view/tests/fixtures/unistyles-styles/code.js New fixture input for View optimizer covering Unistyles styles.
packages/react-native-boost/src/plugin/optimizers/view/tests/fixtures/unistyles-styles/output.js Expected output for View optimizer with Unistyles styles.
packages/react-native-boost/src/plugin/optimizers/text/index.ts Skips optimization on dynamic Unistyles styles for Text.
packages/react-native-boost/src/plugin/optimizers/text/tests/fixtures/unistyles-styles/code.js New fixture input for Text optimizer covering Unistyles styles.
packages/react-native-boost/src/plugin/optimizers/text/tests/fixtures/unistyles-styles/output.js Expected output for Text optimizer with Unistyles styles.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment on lines +216 to +225
if (t.isCallExpression(expression)) {
let status: UnistylesStyleStatus = t.isExpression(expression.callee)
? getExpressionUnistylesStyleStatus(path, expression.callee, seen)
: 'none';

for (const argument of expression.arguments) {
if (!t.isExpression(argument)) continue;
status = mergeUnistylesStyleStatus(status, getExpressionUnistylesStyleStatus(path, argument, seen));
if (status !== 'none') return 'dynamic';
}
Comment on lines +62 to +66
shouldBail: () =>
hasBlacklistedProperty(
path,
usesUnistylesStyle ? viewBlacklistedPropertiesWithoutStyle : viewBlacklistedProperties
),
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants