perf: sort scoped variable cache keys without localeCompare

packages/uniwind/src/components/ScopedVariables/utils.ts

@@ -30,8 +30,9 @@ export const buildScopedVariablesContext = (
         ...validateVariables(variables),
     } as UniwindContextCSSVariables
     delete mergedVariables.__uniwindVariablesCacheKey
+    // The key only needs a stable order. Code-unit order avoids localeCompare, which creates a collator per call on Android
     const variablesCacheKey = JSON.stringify(
-        Object.entries(mergedVariables).sort(([a], [b]) => a.localeCompare(b)),
+        Object.entries(mergedVariables).sort(([a], [b]) => a < b ? -1 : a > b ? 1 : 0),
     )
     mergedVariables.__uniwindVariablesCacheKey = variablesCacheKey
 

packages/uniwind/tests/native/components/scoped-variables.test.tsx

@@ -311,6 +311,38 @@ describe('ScopedVariables', () => {
             expect(ambiguous.mock.calls[0][0]).not.toEqual(plain.mock.calls[0][0])
         })
 
+        test('cache key ignores variable order without locale collation', () => {
+            const localeCompare = jest.spyOn(String.prototype, 'localeCompare')
+            const Probe = (props: { test: jest.Mock }) => {
+                props.test(useUniwindContext().variables?.__uniwindVariablesCacheKey)
+
+                return null
+            }
+
+            const first = jest.fn()
+            const second = jest.fn()
+
+            try {
+                renderUniwind(
+                    <React.Fragment>
+                        <ScopedVariables variables={{ '--gap': 8, '--color-primary': '#ff0000' }}>
+                            <Probe test={first} />
+                        </ScopedVariables>
+                        <ScopedVariables variables={{ '--color-primary': '#ff0000', '--gap': 8 }}>
+                            <Probe test={second} />
+                        </ScopedVariables>
+                    </React.Fragment>,
+                )
+
+                expect(first).toHaveBeenCalledWith('[["--color-primary","#ff0000"],["--gap",8]]')
+                expect(second).toHaveBeenCalledWith('[["--color-primary","#ff0000"],["--gap",8]]')
+                // Hermes on Android creates a collator for every localeCompare call
+                expect(localeCompare).not.toHaveBeenCalled()
+            } finally {
+                localeCompare.mockRestore()
+            }
+        })
+
         test('updating the variables prop does not serve stale cached styles', () => {
             const Wrapper = ({ color }: { color: string }) => (
                 <ScopedVariables variables={{ '--color-primary': color }}>