fix(repack): pass inlined asset scales to pickScale in ascending order

.changeset/inline-assets-scale-order.md

@@ -0,0 +1,5 @@
+---
+"@callstack/repack": patch
+---
+
+Pass scales of inlined assets to `AssetSourceResolver.pickScale` in ascending order. Previously, assets with fractional scales such as `@1.5x` resolved to the wrong variant, for example the `@1.5x` image on a device with a pixel ratio of 3.5.

packages/repack/src/loaders/assetsLoader/__tests__/inlineAssets.test.ts

@@ -0,0 +1,47 @@
+import vm from 'node:vm';
+import { inlineAssets } from '../inlineAssets.js';
+import type { Asset } from '../types.js';
+
+// Same logic as `pickScale` from `react-native/Libraries/Image/AssetUtils`,
+// which expects `scales` to be sorted in ascending order.
+function pickScale(scales: number[], deviceScale: number) {
+  for (const scale of scales) {
+    if (scale >= deviceScale) {
+      return scale;
+    }
+  }
+  return scales[scales.length - 1] || 1;
+}
+
+function evaluateInlinedAsset(code: string, pixelRatio: number) {
+  const module = { exports: {} as { scale?: number } };
+  const require = (request: string) =>
+    request === 'react-native'
+      ? { PixelRatio: { get: () => pixelRatio } }
+      : { pickScale };
+
+  vm.runInNewContext(code, { module, require });
+  return module.exports;
+}
+
+// out of order on purpose, `inlineAssets` must not rely on the caller sorting them
+const assets: Asset[] = [2, 0.75, 3, 1.5, 1].map((scale) => ({
+  data: Buffer.from(`star@${scale}x`),
+  dimensions: { width: 10, height: 10 },
+  filename: `star@${scale}x.png`,
+  scale,
+}));
+
+describe('inlineAssets', () => {
+  it.each([
+    [0.75, 0.75],
+    [1, 1],
+    [1.5, 1.5],
+    [2.625, 3],
+    [3.5, 3],
+  ])('picks the right scale for pixel ratio %s', (pixelRatio, expected) => {
+    const code = inlineAssets({ assets, resourcePath: 'star.png' });
+
+    expect(evaluateInlinedAsset(code, pixelRatio).scale).toBe(expected);
+  });
+});

packages/repack/src/loaders/assetsLoader/inlineAssets.ts

@@ -31,7 +31,12 @@ export function inlineAssets({
     {} as Record<string, URISource>
   );
 
-  const scales = JSON.stringify(Object.keys(sourceSet).map(Number));
+  // `pickScale` expects scales in ascending order. They are sorted here rather
+  // than read with `Object.keys`, which lists integer keys (1, 2, 3) before
+  // fractional ones (0.75, 1.5).
+  const scales = JSON.stringify(
+    assets.map(({ scale }) => scale).sort((a, b) => a - b)
+  );
 
   /**
    * To enable scale resolution in runtime we need to import PixelRatio & AssetSourceResolver

tests/integration/src/helpers.ts

@@ -109,7 +109,10 @@ export function getReactNativeVirtualModules(
           };
         }
         static pickScale(scales, pixelRatio) {
-          return scales[pixelRatio - 1];
+          for (var i = 0; i < scales.length; i++) {
+            if (scales[i] >= pixelRatio) return scales[i];
+          }
+          return scales[scales.length - 1] || 1;
         }
       };`,
   };

tests/integration/src/loaders/assets-loader.test.ts

@@ -345,7 +345,9 @@ describe('assetLoader', () => {
 
     it.each([
       { preferredScale: 1 },
+      { preferredScale: 1.5 },
       { preferredScale: 2 },
+      { preferredScale: 2.625 },
       { preferredScale: 3 },
     ])('with scales ($preferredScale)', async ({ preferredScale }) => {
       const { code, volume } = await compileBundle(