[babel-plugin] Define API for `@position-try`
Describe the feature request
CSS now a @position-try at rule (with limited browser support today)
https://developer.mozilla.org/en-US/docs/Web/CSS/@position-try
Discussion: https://github.com/facebook/stylex/discussions/860
I've been tracking the spec. It has changed a couple of times and it used to be Chrome only. However the feature seems to have stabilized and Safari is adding support soon. Let me take a crack at API design for this.
This isn't a priority for us. I was just creating a separate issue to move this out of another issue
PROPOSAL: Should be fairly simple to create:
const fallback1 = stylex.positionTry({
positionAnchor: ...,
position-area: ...,
top: ...,
left: ...,
bottom: ...,
right: ...,
inset-block-start: ...,
inset-block-end: ...,
inset-inline-start: ...,
inset-inline-end: ...,
inset-block: ...,
inset-inline: ...,
inset: ...,
margin-top: ...,
margin-left: ...,
margin-bottom: ...,
margin-right: ...,
margin-block-start: ...,
margin-block-end: ...,
margin-inline-start: ...,
margin-inline-end: ...,
margin: ...,
margin-block: ...,
margin-inline: ...,
width: ...,
height: ...,
min-width: ...,
min-height: ...,
max-width: ...,
max-height: ...,
block-size: ...,
inline-size: ...,
min-block-size: ...,
min-inline-size: ...,
max-block-size: ...,
max-inline-size: ...,
align-self: ...,
justify-self: ...,
});
const fallback2 = stylex.positionTry({
...
});
const styles = stylex.create({
foo: {
position-try-fallbacks: fallback,
...
},
bar: {
position-try-fallbacks: [fallback, fallback2].join(', '),
...
},
});
This would work almost exactly like stylex.keyframes. There's only two subtle changes:
- The styles are only one-level deep, unlike in
keyframeswhere they're nested one level deeper under0%etc. - The generated return value of the function must be a string with a
--prefix as that is required for anchor positioning.