Skip to content

Define stylex.positionTry and stylex.viewTransitionClass APIs #866

Open
@nmn

Description

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…

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions