Positioner: reduce the size when bundled

[skinread]

Currently the Positioner component, relying on popper.js, is adding significantly to the bundled size of Overdrive.

Expirment result

popper.js	floating-ui
46.41KB / 18.04KB gzip	47.27KB / 12.58KB gzip	Size
17.35% / 22.36%	17.61% / 14.04%	Percent

MFE analysis

[skinread]

Based on first-pass analysis, migrating from popper.js to floating-ui does not significantly impact bundle size. Further exploration needed.

[maraisr]

Ive been thinking a lot about this issue, and even took a stab at implementing it. There is a CSS spec called anchor-position though still technically in draft, is already implemented by stable Chrome, and work is underway in Firefox and Safari.

So we may have a future very soon, where popper/floating-ui can be replaced with pure CSS.

My attempted branch, has this working—with an async fallback that only then pulls in popper.

Example

// file: lib/components/Positioner/Positioner.css.ts

import { style } from '@vanilla-extract/css';

export const root = style({
	zIndex: 1050,
	transform: 'translateZ(0)',
	willChange: 'transform',
	positionAnchor: '--positionerAnchor',

	selectors: {
		'&[data-placement="top"]': {
			bottom: 'anchor(top)',
			justifySelf: 'anchor-center',
		},
		'&[data-placement="top-start"]': {
			bottom: 'anchor(top)',
			right: 'anchor(left)',
		},
		'&[data-placement="top-end"]': {
			bottom: 'anchor(top)',
			left: 'anchor(right)',
		},
		'&[data-placement="bottom"]': {
			top: 'anchor(bottom)',
			justifySelf: 'anchor-center',
		},
		'&[data-placement="bottom-start"]': {
			top: 'anchor(bottom)',
			left: 'anchor(left)',
		},
		'&[data-placement="bottom-end"]': {
			top: 'anchor(bottom)',
			left: 'anchor(right)',
		},
		'&[data-placement="left"]': {
			right: 'anchor(left)',
			alignSelf: 'anchor-center',
		},
		'&[data-placement="right"]': {
			left: 'anchor(right)',
			alignSelf: 'anchor-center',
		},
	}
});

With the obvious change in:

// file: lib/components/Positioner/Positioner.tsx

<Portal>
	<Box
		{...boxProps}
		ref={referenceRef}
		position="fixed"
		className={styles.root}
		aria-hidden={!isOpen}
		data-placement={placement}
		odComponent="positioner"
	>
		{isOpen ? children : null}
	</Box>
</Portal>

---

There is a nice incremental change, so that popper—although still in the bundle—can be codesplit, and only import it if/once required.

Happy to help propose this change, if there is appetite.

[skinread]

Thanks for this example @maraisr! I was quietly waiting to see if anchor positioning was imminent to continue looking into this 😄
At least it seems to be in Safari 26 beta 🤞🏽