Skip to content

feat: add directional gap utilities - #11

Merged
mgcrea merged 1 commit into
mgcrea:mainfrom
e-simpson:codex/directional-gap
Aug 26, 2026
Merged

feat: add directional gap utilities#11
mgcrea merged 1 commit into
mgcrea:mainfrom
e-simpson:codex/directional-gap

Conversation

@e-simpson

Copy link
Copy Markdown
Contributor

Summary

This PR adds Tailwind-compatible directional gap utilities for React Native flex and grid layouts.

Changes

Core Implementation

  • Update: src/parser/spacing.ts
    • gap-x-{value} maps to React Native columnGap
    • gap-y-{value} maps to React Native rowGap
    • Reuses the existing spacing scale, including fractional and px values
    • Supports arbitrary pixel values
    • Supports custom values from theme.extend.spacing
    • Preserves existing gap-{value} behavior

Testing

  • Update: src/parser/spacing.test.ts
  • All 77 focused spacing tests pass
  • Covers preset, fractional, arbitrary, zero, px, and custom-theme directional gaps

Documentation

  • Update: docs/src/content/docs/reference/spacing.md
  • Added directional and arbitrary-value examples

Compile-Time Transformation

// Input
<View className="gap-x-2 gap-y-1.5" />

// Output
<View style={{ columnGap: 8, rowGap: 6 }} />

Validation

  • bun run vitest --run src/parser/spacing.test.ts (77 tests)
  • bun run check
  • bun run lint
  • bun run format:check
  • bun run build

@mgcrea
mgcrea marked this pull request as ready for review August 26, 2026 09:09
@mgcrea
mgcrea merged commit feafd9d into mgcrea:main Aug 26, 2026
2 checks passed
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.

2 participants