Define stylex.positionTry and stylex.viewTransitionClass APIs

[nmn]

CSS now has a @position-try at rule which is used as values. This is similar to stylex.keyframes and needs a similar API.

Similarly, there is now view-transition-class which need global rules similar to:

::view-transition-group(<pt-name-and-class-selector>)
::view-transition-image-pair(<pt-name-and-class-selector>)
::view-transition-old(<pt-name-and-class-selector>)
::view-transition-new(<pt-name-and-class-selector>)

This should probably be supported with an API that looks like this:

const transitionClass = stylex.viewTransitionClass({
  group?: {},
  imagePair?: {},
  old?: {},
  new?: {},
});

(Open to changing this API based on feedback.)

Discussed in #860

^{Originally posted by jonnitto January 15, 2025}
I want to add some at rules like this in the CSS file:

@position-try --left {
  inset: auto;
  top: anchor(bottom);
  right: anchor(right);
}

How can I achieve this? I didn't found anything in the documentation, neither here or in the issues…

[necolas]

FYI React is adding a ViewTransition API facebook/react#31975

[nmn]

@necolas I saw that! From what I understand that handles the view-transition-name part of the equation, but adding custom styles for view transitions is not part of that API. This is to make that part simpler.

View Transitions (Level 1) standard did not have support for view-transition-class which made writing styles for it tedious and repetitive. Thankfully both Safari and Chrome have already shipped View Transitions (Level 2) which includes support for view-transition-class that lets us share the same styles for many different elements and it starts to make sense as an API for StyleX.

This API does discourage the use of styles that target a specific view-transition-name which is required to be unique in the DOM. I think this is OK, because it's similar to an ID selector in the view-transition domain.