Handle Spans In Pin Outlines

[seanparsons]

Problem:
If a part of a grid item's CSS includes a span value like span 2, then the pin outlines end up in unusual places.

Cause:
When constructing the containing block which governs from where the outlines start and end, the grid column/row start/end properties are converted to simpler values using gridPositionToValue, which turns span 2 into 2.

Fix:
Using some existing code for turning the position values into CSS values, the containing block bounds now result in the CSS values that they started with if those exist.

Commit Details:

• Extracted out the printPin function.
• Implemented nullHandlingPrintPin as a thin wrapper around printPin.
• GridElementContainingBlock now uses nullHandlingPrintPin instead of gridPositionToValue to build the grid column/row start/end values.

Manual Tests:
I hereby swear that:

• I opened a hydrogen project and it loaded
• I could navigate to various routes in Play mode

[github-actions]

Try me

[relativeci]

#15183 Bundle Size — 58.09MiB (~+0.01%).

73b29db(current) vs d1d46c1 master#15182(baseline)

Warning

Bundle contains 70 duplicate packages – View duplicate packages

Bundle metrics   2 changes 1 regression

	Current #15183	Baseline #15182
Initial JS	41.07MiB(~+0.01%)	41.06MiB
Initial CSS	0B	0B
Cache Invalidation	18.15%	18.03%
Chunks	20	20
Assets	22	22
Modules	4170	4170
Duplicate Modules	213	213
Duplicate Code	27.29%	27.29%
Packages	477	477
Duplicate Packages	70	70

Bundle size by type   2 changes 1 regression 1 improvement

	Current #15183	Baseline #15182
JS	58.08MiB (~+0.01%)	58.08MiB
HTML	7.37KiB (-0.25%)	7.39KiB

Bundle analysis report Branch fix/handle-spans-in-pin-outlines Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}