From 4dbecec25507ebb91ba535631848b8a3605eb6ec Mon Sep 17 00:00:00 2001 From: Mark Lawlor Date: Fri, 1 Aug 2025 23:15:39 +1000 Subject: [PATCH] fix: upgrade warning message to include removals --- src/runtime/native/__tests__/upgrading.test.tsx | 2 +- src/runtime/native/react/rules.ts | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/runtime/native/__tests__/upgrading.test.tsx b/src/runtime/native/__tests__/upgrading.test.tsx index 627dcf5..d16c382 100644 --- a/src/runtime/native/__tests__/upgrading.test.tsx +++ b/src/runtime/native/__tests__/upgrading.test.tsx @@ -70,7 +70,7 @@ test.only("will-change-container", () => { 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.", + "ReactNativeCss: className 'group' added or removed 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.", ], ]); }); diff --git a/src/runtime/native/react/rules.ts b/src/runtime/native/react/rules.ts index 63f5507..6694d51 100644 --- a/src/runtime/native/react/rules.ts +++ b/src/runtime/native/react/rules.ts @@ -167,19 +167,19 @@ export function updateRules( if (Boolean(variables) !== Boolean(state.variables)) { 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.`, + `ReactNativeCss: className '${source}' added or removed 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.`, ); } 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.`, + `ReactNativeCss: className '${source}' added or removed 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.`, ); } 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.`, + `ReactNativeCss: className '${source}' added or removed 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.`, ); } 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.`, + `ReactNativeCss: className '${source}' added or removed 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.`, ); } }