fix(compiler): expand var()-valued border-inline shorthands to start/end

src/__tests__/compiler/logical-borders.test.ts

@@ -116,3 +116,36 @@ describe("logical border styles", () => {
     });
   });
 });
+
+describe("logical border shorthands via var() (unparsed path)", () => {
+  // A var() forces a shorthand onto the unparsed path, where propertyRename
+  // (longhands only) and the parseBorderInline* parsers (parsed path only) do
+  // not reach. These must still expand to the RTL-aware start/end props.
+  test("border-inline-color with var()", () => {
+    expect(
+      getRule("border-inline-color: hsl(var(--primary));").rule,
+    ).toStrictEqual([
+      {
+        s: [1, 1],
+        d: [
+          [[{}, "hsl", [{}, "var", "primary", 1]], "borderStartColor", 1],
+          [[{}, "hsl", [{}, "var", "primary", 1]], "borderEndColor", 1],
+        ],
+        dv: 1,
+      },
+    ]);
+  });
+
+  test("border-inline-width with var()", () => {
+    expect(getRule("border-inline-width: var(--w);").rule).toStrictEqual([
+      {
+        s: [1, 1],
+        d: [
+          [[{}, "var", "w", 1], "borderStartWidth", 1],
+          [[{}, "var", "w", 1], "borderEndWidth", 1],
+        ],
+        dv: 1,
+      },
+    ]);
+  });
+});

src/compiler/declarations.ts

@@ -80,6 +80,15 @@ const unsupportedInlineStyles = new Set([
   "border-inline-end-style",
 ]);
 
+// Logical-border SHORTHANDS have no RN equivalent either; when var()-valued
+// they reach the unparsed path (the parsed parseBorderInline* never run) and
+// propertyRename only maps the longhands. Expand each to its RTL-aware
+// start/end props, sharing the runtime value.
+const inlineShorthandExpansion: Record<string, string[]> = {
+  "border-inline-color": ["border-start-color", "border-end-color"],
+  "border-inline-width": ["border-start-width", "border-end-width"],
+};
+
 const unparsedRuntimeParsing = new Set([
   "animation",
   "border",
@@ -955,6 +964,21 @@ export function parseUnparsedDeclaration(
     property = rename;
   }
 
+  /**
+   * Logical-border shorthands (border-inline-color / -width) reach here when
+   * var()-valued. RN has no border-inline-*; expand to start/end sharing the
+   * value, mirroring parseBorderInline* on the parsed path.
+   */
+  const shorthandExpansion = inlineShorthandExpansion[property];
+  if (shorthandExpansion) {
+    const value = parseUnparsed(declaration.value.value, builder, property);
+    for (const target of shorthandExpansion) {
+      builder.descriptorProperty = target;
+      builder.addDescriptor(target, value);
+    }
+    return;
+  }
+
   /**
    * Unparsed shorthand properties need to be parsed at runtime
    */