stylex.positionTry

Creates a @position-try rule used to define a custom position-try fallback option, which can be used to define positioning and alignment for anchor-positioned elements. One or more sets of position-try fallback options can be applied to the anchored element via the positionTryFallbacks property.

function positionTry(descriptors: { [key: string]: RawStyles }): string;

The only properties allowed in a positionTry call are positionAnchor, positionArea, inset properties (top, left, insetInline, etc.), margin properties, size properties (height, inlineSize, etc.), and self-alignment properties (alignSelf, justifySelf, placeSelf).

You must declare your position-try rules in the same file as where you use them. Duplicate declarations will be deduplicated in the generated CSS output.

Example use:

import * as stylex from '@stylexjs/stylex';

const fallback = stylex.positionTry({
  positionAnchor: '--anchor',
  top: '0',
  left: '0',
  width: '100px',
  height: '100px',
});

const styles = stylex.create({
  anchor: {
    positionTryFallbacks: fallback,
  },
});

To use positionTry return values in a separate file, you can use defineVars to hold position fallback values:

import * as stylex from '@stylexjs/stylex';

const topLeftCorner = stylex.positionTry({
  positionAnchor: '--anchor',
  top: '0',
  left: '0',
  width: '100px',
  height: '100px',
});

export const positionFallbacks = stylex.defineVars({
  topLeftCorner,
});

These variables can then be imported and used like any other variables created with defineVars.