feat: skip unsafe Unistyles dynamic styles

packages/react-native-boost/src/plugin/optimizers/text/__tests__/fixtures/unistyles-styles/code.js

@@ -0,0 +1,35 @@
+import { Text, StyleSheet as RNStyleSheet } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import * as Unistyles from 'react-native-unistyles';
+
+const styles = StyleSheet.create((theme) => ({
+  title: { color: theme.colors.text },
+  active: { fontWeight: '600' },
+}));
+
+const namespaceStyles = Unistyles.StyleSheet.create((theme) => ({
+  title: { color: theme.colors.text },
+}));
+
+const staticStyles = StyleSheet.create({
+  subtitle: { color: 'blue', fontSize: 16 },
+});
+
+const rnStyles = RNStyleSheet.create({
+  title: { color: 'red' },
+});
+
+const titleStyle = styles.title;
+const staticTitleStyle = staticStyles.subtitle;
+const textProps = { style: titleStyle };
+
+<>
+  <Text style={styles.title}>Title</Text>
+  <Text style={titleStyle}>Alias</Text>
+  <Text style={[styles.title, isActive && styles.active]}>Active</Text>
+  <Text {...textProps}>Spread</Text>
+  <Text style={namespaceStyles.title}>Namespace</Text>
+  <Text style={staticStyles.subtitle}>Static</Text>
+  <Text style={staticTitleStyle}>Static Alias</Text>
+  <Text style={rnStyles.title}>React Native style</Text>
+</>;

packages/react-native-boost/src/plugin/optimizers/text/__tests__/fixtures/unistyles-styles/output.js

@@ -0,0 +1,49 @@
+import { processTextStyle as _processTextStyle, NativeText as _NativeText } from 'react-native-boost/runtime';
+import { Text, StyleSheet as RNStyleSheet } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import * as Unistyles from 'react-native-unistyles';
+const styles = StyleSheet.create((theme) => ({
+  title: {
+    color: theme.colors.text,
+  },
+  active: {
+    fontWeight: '600',
+  },
+}));
+const namespaceStyles = Unistyles.StyleSheet.create((theme) => ({
+  title: {
+    color: theme.colors.text,
+  },
+}));
+const staticStyles = StyleSheet.create({
+  subtitle: {
+    color: 'blue',
+    fontSize: 16,
+  },
+});
+const rnStyles = RNStyleSheet.create({
+  title: {
+    color: 'red',
+  },
+});
+const titleStyle = styles.title;
+const staticTitleStyle = staticStyles.subtitle;
+const textProps = {
+  style: titleStyle,
+};
+<>
+  <Text style={styles.title}>Title</Text>
+  <Text style={titleStyle}>Alias</Text>
+  <Text style={[styles.title, isActive && styles.active]}>Active</Text>
+  <Text {...textProps}>Spread</Text>
+  <Text style={namespaceStyles.title}>Namespace</Text>
+  <_NativeText {..._processTextStyle(staticStyles.subtitle)} allowFontScaling={true} ellipsizeMode={'tail'}>
+    Static
+  </_NativeText>
+  <_NativeText {..._processTextStyle(staticTitleStyle)} allowFontScaling={true} ellipsizeMode={'tail'}>
+    Static Alias
+  </_NativeText>
+  <_NativeText {..._processTextStyle(rnStyles.title)} allowFontScaling={true} ellipsizeMode={'tail'}>
+    React Native style
+  </_NativeText>
+</>;

packages/react-native-boost/src/plugin/optimizers/text/index.ts

@@ -8,6 +8,7 @@ import {
   buildPropertiesFromAttributes,
   hasAccessibilityProperty,
   hasBlacklistedProperty,
+  getUnistylesStyleStatus,
   isForcedLine,
   isIgnoredLine,
   isValidJSXComponent,
@@ -44,6 +45,12 @@ export const textOptimizer: Optimizer = (path, logger) => {
 
   const parent = path.parent as t.JSXElement;
   const forced = isForcedLine(path);
+  const unistylesStyleStatus = getUnistylesStyleStatus(path);
+
+  if (unistylesStyleStatus === 'dynamic') {
+    logger.skipped({ component: 'Text', path, reason: 'contains dynamic Unistyles styles' });
+    return;
+  }
 
   const overridableChecks: BailoutCheck[] = [
     {

packages/react-native-boost/src/plugin/optimizers/view/__tests__/fixtures/unistyles-styles/code.js

@@ -0,0 +1,28 @@
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import * as Unistyles from 'react-native-unistyles';
+
+const styles = StyleSheet.create((theme) => ({
+  container: { backgroundColor: theme.colors.background },
+}));
+
+const namespaceStyles = Unistyles.StyleSheet.create((theme) => ({
+  container: { backgroundColor: theme.colors.background },
+}));
+
+const staticStyles = StyleSheet.create({
+  box: { backgroundColor: 'red', opacity: 1 },
+});
+
+const containerStyle = styles.container;
+const staticContainerStyle = staticStyles.box;
+const viewProps = { style: containerStyle };
+
+<>
+  <View style={styles.container} />
+  <View style={containerStyle} />
+  <View style={namespaceStyles.container} />
+  <View {...viewProps} />
+  <View style={staticStyles.box} />
+  <View style={staticContainerStyle} />
+</>;

packages/react-native-boost/src/plugin/optimizers/view/__tests__/fixtures/unistyles-styles/output.js

@@ -0,0 +1,33 @@
+import { NativeView as _NativeView } from 'react-native-boost/runtime';
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import * as Unistyles from 'react-native-unistyles';
+const styles = StyleSheet.create((theme) => ({
+  container: {
+    backgroundColor: theme.colors.background,
+  },
+}));
+const namespaceStyles = Unistyles.StyleSheet.create((theme) => ({
+  container: {
+    backgroundColor: theme.colors.background,
+  },
+}));
+const staticStyles = StyleSheet.create({
+  box: {
+    backgroundColor: 'red',
+    opacity: 1,
+  },
+});
+const containerStyle = styles.container;
+const staticContainerStyle = staticStyles.box;
+const viewProps = {
+  style: containerStyle,
+};
+<>
+  <View style={styles.container} />
+  <View style={containerStyle} />
+  <View style={namespaceStyles.container} />
+  <View {...viewProps} />
+  <_NativeView style={staticStyles.box} />
+  <_NativeView style={staticContainerStyle} />
+</>;

packages/react-native-boost/src/plugin/optimizers/view/index.ts

@@ -4,6 +4,7 @@ import PluginError from '../../utils/plugin-error';
 import { BailoutCheck, getFirstBailoutReason } from '../../utils/helpers';
 import {
   hasBlacklistedProperty,
+  getUnistylesStyleStatus,
   isForcedLine,
   isIgnoredLine,
   isValidJSXComponent,
@@ -29,9 +30,20 @@ export const viewBlacklistedProperties = new Set([
   'style', // TODO: process style at runtime
 ]);
 
+const viewBlacklistedPropertiesWithoutStyle = new Set(
+  [...viewBlacklistedProperties].filter((property) => property !== 'style')
+);
+
 export const viewOptimizer: Optimizer = (path, logger, options) => {
   if (!isValidJSXComponent(path, 'View')) return;
   if (!isReactNativeImport(path, 'View')) return;
+  const unistylesStyleStatus = getUnistylesStyleStatus(path);
+  const usesUnistylesStyle = unistylesStyleStatus === 'static';
+
+  if (unistylesStyleStatus === 'dynamic') {
+    logger.skipped({ component: 'View', path, reason: 'contains dynamic Unistyles styles' });
+    return;
+  }
 
   let ancestorClassification: ViewAncestorClassification | undefined;
   const getAncestorClassification = () => {
@@ -47,7 +59,11 @@ export const viewOptimizer: Optimizer = (path, logger, options) => {
   const overridableChecks: BailoutCheck[] = [
     {
       reason: 'contains blacklisted props',
-      shouldBail: () => hasBlacklistedProperty(path, viewBlacklistedProperties),
+      shouldBail: () =>
+        hasBlacklistedProperty(
+          path,
+          usesUnistylesStyle ? viewBlacklistedPropertiesWithoutStyle : viewBlacklistedProperties
+        ),
     },
     {
       reason: 'has Text ancestor',