stylex icon indicating copy to clipboard operation
stylex copied to clipboard

[babel-plugin] Define API for `@position-try`

Open necolas opened this issue 8 months ago • 3 comments

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

necolas avatar Apr 16 '25 23:04 necolas

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.

nmn avatar Apr 21 '25 04:04 nmn

This isn't a priority for us. I was just creating a separate issue to move this out of another issue

necolas avatar Apr 21 '25 16:04 necolas

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:

  1. The styles are only one-level deep, unlike in keyframes where they're nested one level deeper under 0% etc.
  2. The generated return value of the function must be a string with a -- prefix as that is required for anchor positioning.

nmn avatar Apr 23 '25 23:04 nmn