feat: add will-change-* classes

Author: marklawlor

example/src/App.tsx

@@ -5,16 +5,8 @@ import "../global.css";
 export default function App() {
   return (
     <>
-      <View className="justify-center items-center flex-1 bg-linear-to-r from-cyan-500 to-blue-500">
-        <Text className="">Test Component</Text>
-      </View>
-      <View
-        className="justify-center items-center flex-1"
-        style={{
-          experimental_backgroundImage: "linear-gradient(to right, #f00, #0f0)",
-        }}
-      >
-        <Text className="">Test Component2</Text>
+      <View className="justify-center items-center h-full">
+        <Text className="shadow-red-500 shadow-2xl">Test Component</Text>
       </View>
     </>
   );

src/runtime/native/__tests__/upgrading.test.tsx

@@ -5,7 +5,17 @@ import { registerCSS, render, screen } from "react-native-css/jest";
 const parentID = "parent";
 const childID = "child";
 
-test("group", () => {
+const log = jest.fn();
+
+beforeAll(() => {
+  jest.spyOn(console, "log").mockImplementation(log);
+});
+
+beforeEach(() => {
+  log.mockClear();
+});
+
+test("adding a group", () => {
   registerCSS(
     `.group .my-class {
       color: red;
@@ -22,13 +32,45 @@ test("group", () => {
 
   expect(child.props.style).toStrictEqual(undefined);
 
-  expect(() => {
-    screen.rerender(
-      <View testID={parentID} className="group">
-        <Text testID={childID} className="my-class" />
-      </View>,
-    );
-  })
-    .toThrow(`ReactNativeCss: Cannot dynamically add a container context. 'group' was added after the initial render.
-Use modifier ('hover:container', 'active:container', etc) to ensure it present in the initial render`);
+  screen.rerender(
+    <View testID={parentID} className="group">
+      <Text testID={childID} className="my-class" />
+    </View>,
+  );
+
+  expect(log.mock.calls).toEqual([
+    [
+      "ReactNativeCss: className 'group' added a container after the initial render. This causes the components state to be reset and all children be re-mounted. This will cause unexpected behavior. Use the className 'will-change-container' to avoid this warning. If this was caused by sibling components being added/removed, use a 'key' prop so React can track the component correctly.",
+    ],
+  ]);
+});
+
+test.only("will-change-container", () => {
+  registerCSS(
+    `.group .my-class {
+      color: red;
+    }`,
+  );
+
+  render(
+    <View testID={parentID} className="will-change-container">
+      <Text testID={childID} className="my-class" />
+    </View>,
+  );
+
+  const child = screen.getByTestId(childID);
+
+  expect(child.props.style).toStrictEqual(undefined);
+
+  screen.rerender(
+    <View testID={parentID} className="group">
+      <Text testID={childID} className="my-class" />
+    </View>,
+  );
+
+  expect(log.mock.calls).toEqual([
+    [
+      "ReactNativeCss: className 'group' added a container after the initial render. This causes the components state to be reset and all children be re-mounted. This will cause unexpected behavior. Use the className 'will-change-container' to avoid this warning. If this was caused by sibling components being added/removed, use a 'key' prop so React can track the component correctly.",
+    ],
+  ]);
 });

src/runtime/native/injection.ts

@@ -99,3 +99,33 @@ function isDeepEqual(a: unknown, b: unknown): boolean {
 
   return true;
 }
+
+StyleCollection.styles("will-change-variable").set([
+  {
+    s: [0],
+    v: [],
+  },
+]);
+
+StyleCollection.styles("will-change-container").set([
+  {
+    s: [0],
+    c: [],
+  },
+]);
+
+StyleCollection.styles("will-change-animation").set([
+  {
+    s: [0],
+    a: true,
+  },
+]);
+
+StyleCollection.styles("will-change-pressable").set([
+  {
+    s: [0],
+    p: {
+      h: 1,
+    },
+  },
+]);

src/runtime/native/react/rules.ts

@@ -166,31 +166,20 @@ export function updateRules(
         let pressable = activeFamily.has(state.ruleEffect);
 
         if (Boolean(variables) !== Boolean(state.variables)) {
-          throw new Error(
-            `ReactNativeCss: Cannot dynamically add a variable context. '${source}' was added after the initial render.
-Use modifier ('hover:my-var', 'active:my-var', etc) to ensure it present in the initial render`,
+          console.log(
+            `ReactNativeCss: className '${source}' added a variable after the initial render. This causes the components state to be reset and all children be re-mounted. Use the className 'will-change-variable' to avoid this warning. If this was caused by sibling components being added/removed, use a 'key' prop so React can track the component correctly.`,
           );
-        }
-
-        if (Boolean(containers) !== Boolean(state.containers)) {
-          throw new Error(
-            `ReactNativeCss: Cannot dynamically add a container context. '${source}' was added after the initial render.
-Use modifier ('hover:container', 'active:container', etc) to ensure it present in the initial render`,
+        } else if (Boolean(containers) !== Boolean(state.containers)) {
+          console.log(
+            `ReactNativeCss: className '${source}' added a container after the initial render. This causes the components state to be reset and all children be re-mounted. This will cause unexpected behavior. Use the className 'will-change-container' to avoid this warning. If this was caused by sibling components being added/removed, use a 'key' prop so React can track the component correctly.`,
           );
-        }
-
-        if (animated !== state.animated) {
-          throw new Error(
-            `ReactNativeCss: Cannot dynamically change to an animated component. '${source}' was added after the initial render.
-Use 'animation-none' or a modifier ('hover:animation', 'active:animation', etc) to ensure it present in the initial render`,
+        } else if (animated !== state.animated) {
+          console.log(
+            `ReactNativeCss: className '${source}' added an animation after the initial render. This causes the components state to be reset and all children be re-mounted. This will cause unexpected behavior. Use the className 'will-change-animation' to avoid this warning. If this was caused by sibling components being added/removed, use a 'key' prop so React can track the component correctly.`,
           );
-        }
-
-        if (pressable !== state.pressable) {
-          throw new Error(
-            `ReactNativeCss: Cannot dynamically change to a Pressable. '${source}' was added after the initial render.
-The 'hover', 'active', and 'focus' modifiers on a View will convert it to a Pressable.
-Use a modifier) to ensure it present in the initial render`,
+        } else if (pressable !== state.pressable) {
+          console.log(
+            `ReactNativeCss: className '${source}' added a pressable state after the initial render. This causes the components state to be reset and all children be re-mounted. This will cause unexpected behavior. Use the className 'will-change-pressable' to avoid this warning. If this was caused by sibling components being added/removed, use a 'key' prop so React can track the component correctly.`,
           );
         }
       }