Skip to content

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

Draft
YevheniiKotyrlo wants to merge 1 commit into
nativewind:fix-logical-border-propsfrom
YevheniiKotyrlo:fix/border-inline-var-shorthand
Draft

fix(compiler): expand var()-valued border-inline shorthands to start/end#393
YevheniiKotyrlo wants to merge 1 commit into
nativewind:fix-logical-border-propsfrom
YevheniiKotyrlo:fix/border-inline-var-shorthand

Conversation

@YevheniiKotyrlo

Copy link
Copy Markdown
Contributor

Completes #379

#379 maps the logical-border longhands to their RN start/end props via propertyRename (border-inline-start-colorborderStartColor, …). The shorthands border-inline-color / border-inline-width take a different path when they're var()-valued: the parsed parseBorderInline* never runs (the value is a runtime variable), so they fall through to parseUnparsedDeclaration — where propertyRename only covers the longhands. The shorthand is therefore never expanded to start/end and silently drops on native (RN has no border-inline-*).

Concretely: border-x / border-y composed from a runtime variable (border-inline-color: var(--x)) renders nothing, while the explicit-value form #379 already handles works.

Fix

Expand the two logical-border shorthands to their RTL-aware start/end props inside parseUnparsedDeclaration, sharing the single runtime value — exactly what parseBorderInline* does on the parsed path:

const inlineShorthandExpansion: Record<string, string[]> = {
  "border-inline-color": ["border-start-color", "border-end-color"],
  "border-inline-width": ["border-start-width", "border-end-width"],
};

// in parseUnparsedDeclaration, before the runtime-shorthand handling:
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;
}

border-inline-style stays out — RN has no borderStartStyle / borderEndStyle to map it to (it's already in the unsupported set).

Test plan

New cases in src/__tests__/compiler/logical-borders.test.ts: a var()-valued border-inline-color and border-inline-width each expand to both start and end descriptors sharing the resolved value. Verified against #379's built branch — this branch is stacked on fix-logical-border-props, so the diff here is only the completion (+24 logic / +33 tests).

yarn test, yarn typecheck, yarn eslint, and prettier --check pass; lefthook-clean.


Stacked on your fix-logical-border-props branch so this shows only the delta. Merge it into #379, cherry-pick the commit, or tell me to retarget — whatever's easiest for you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant