diff --git a/src/__tests__/compiler/logical-borders.test.ts b/src/__tests__/compiler/logical-borders.test.ts index 87db4f7..6b20c66 100644 --- a/src/__tests__/compiler/logical-borders.test.ts +++ b/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, + }, + ]); + }); +}); diff --git a/src/compiler/declarations.ts b/src/compiler/declarations.ts index 17beba0..2ea2ad9 100644 --- a/src/compiler/declarations.ts +++ b/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 = { + "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 */