Skip to content

Conversation

@e-simpson
Copy link
Contributor

Summary

This PR adds support for outline utilities (outlineWidth, outlineStyle, outlineOffset, outlineColor) for React Native 0.73+ (New Architecture).

Changes

Core Implementation

  • New: src/parser/outline.ts - Dedicated parser for outline utilities
    • outline - Shorthand (width: 1, style: solid)
    • outline-{width} - Width utilities (0, 1, 2, 4, 8, + arbitrary)
    • outline-{style} - Style utilities (solid, dashed, dotted)
    • outline-offset-{value} - Offset utilities (scale + arbitrary)
    • outline-none - Reset utility
  • Update: src/parser/colors.ts - Added support for outline-{color} classes
  • Update: src/parser/index.ts - Registered parseOutline in parser chain
  • Update: src/index.ts - Exported parseOutline for advanced usage

Tests

  • New: src/parser/outline.test.ts

All 9 tests pass (tests width, style, offset, arbitrary values, and edge cases)

Documentation

  • New: docs/src/content/docs/reference/outlines.md - Dedicated documentation with compile-time examples
  • Update: docs/src/content/docs/reference/borders.md - Removed outline section, added link

Compile-Time Transformation Example

// Input (Tailwind classes)
<View className="outline outline-blue-500 outline-offset-2 outline-dotted" />

// Output (React Native style object)
<View style={{
  outlineWidth: 1,
  outlineStyle: 'solid',
  outlineColor: '#3B82F6',
  outlineOffset: 2
}} />

@e-simpson
Copy link
Contributor Author

Amazing library! Thanks for making it @mgcrea ! Here is a PR that adds support for outline features on New Arch. I opened an issue for that here

Best, Evan

@e-simpson e-simpson changed the title Implement outline features for new arch feat: Add outline support for new arch Jan 25, 2026
- Add outlines entry to sidebar navigation
- Fix formatting regression in borders.md example
- Remove duplicate outline documentation from borders.md
- Add link to dedicated outlines page
@mgcrea mgcrea merged commit 432a23c into mgcrea:main Jan 25, 2026
1 of 2 checks passed
@mgcrea
Copy link
Owner

mgcrea commented Jan 25, 2026

Thanks! Merged!

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