Define API for View Transition

[nmn]

Define an API to support the CSS pseudo-elements and @-rules that are part of the View Transition API.

::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>)

For example:

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

[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.