@stylexjs/babel-plugin 0.13.1 → 0.14.0

package/lib/index.js

@@ -720,6 +720,7 @@ class StateManager {
   stylexDefineConstsImport = (() => new Set())();
   stylexCreateThemeImport = (() => new Set())();
   stylexTypesImport = (() => new Set())();
+  stylexViewTransitionClassImport = (() => new Set())();
   injectImportInserted = null;
   styleMap = (() => new Map())();
   styleVars = (() => new Map())();
@@ -739,13 +740,14 @@ class StateManager {
     const enableFontSizePxToRem = logAndDefault(boolean(), options.enableFontSizePxToRem ?? false, false, 'options.enableFontSizePxToRem');
     const enableInlinedConditionalMerge = logAndDefault(boolean(), options.enableInlinedConditionalMerge ?? true, true, 'options.enableInlinedConditionalMerge');
     const enableMinifiedKeys = logAndDefault(boolean(), options.enableMinifiedKeys ?? true, true, 'options.enableMinifiedKeys');
+    const enableLogicalStylesPolyfill = logAndDefault(boolean(), options.enableLogicalStylesPolyfill ?? false, false, 'options.enableLogicalStylesPolyfill');
     const test = logAndDefault(boolean(), options.test ?? false, false, 'options.test');
     const configRuntimeInjection = logAndDefault(checkRuntimeInjection, options.runtimeInjection ?? false, false, 'options.runtimeInjection');
     const runtimeInjection = configRuntimeInjection === true ? DEFAULT_INJECT_PATH : configRuntimeInjection === false ? undefined : configRuntimeInjection;
     const classNamePrefix = logAndDefault(string(), options.classNamePrefix ?? 'x', 'x', 'options.classNamePrefix');
     const configuredImportSources = logAndDefault(checkImportSources, options.importSources ?? [], [], 'options.importSources');
     const importSources = [name, 'stylex', ...configuredImportSources];
-    const styleResolution = logAndDefault(unionOf3(literal('application-order'), literal('property-specificity'), literal('legacy-expand-shorthands')), options.styleResolution ?? 'application-order', 'application-order', 'options.styleResolution');
+    const styleResolution = logAndDefault(unionOf3(literal('application-order'), literal('property-specificity'), literal('legacy-expand-shorthands')), options.styleResolution ?? 'property-specificity', 'property-specificity', 'options.styleResolution');
     const unstable_moduleResolution = logAndDefault(unionOf(nullish(), CheckModuleResolution), options.unstable_moduleResolution, null, 'options.unstable_moduleResolution');
     const treeshakeCompensation = logAndDefault(boolean(), options.treeshakeCompensation ?? false, false, 'options.treeshakeCompensation');
     const aliasesOption = logAndDefault(unionOf(nullish(), objectOf(unionOf(string(), array(string())))), options.aliases, null, 'options.aliases');
@@ -768,6 +770,7 @@ class StateManager {
       enableFontSizePxToRem,
       enableInlinedConditionalMerge,
       enableMinifiedKeys,
+      enableLogicalStylesPolyfill,
       importSources,
       rewriteAliases: typeof options.rewriteAliases === 'boolean' ? options.rewriteAliases : false,
       runtimeInjection,
@@ -1140,6 +1143,9 @@ function readImportDeclarations(path, state) {
             if (importedName === 'positionTry') {
               state.stylexPositionTryImport.add(localName);
             }
+            if (importedName === 'viewTransitionClass') {
+              state.stylexViewTransitionClassImport.add(localName);
+            }
             if (importedName === 'include') {
               state.stylexIncludeImport.add(localName);
             }
@@ -1194,6 +1200,9 @@ function readRequires(path, state) {
           if (prop.key.name === 'positionTry') {
             state.stylexPositionTryImport.add(value.name);
           }
+          if (prop.key.name === 'viewTransitionClass') {
+            state.stylexViewTransitionClassImport.add(value.name);
+          }
           if (prop.key.name === 'include') {
             state.stylexIncludeImport.add(value.name);
           }
@@ -1266,10 +1275,12 @@ const defaultOptions = {
   dev: false,
   debug: false,
   enableDebugClassNames: true,
+  enableDevClassNames: false,
   enableDebugDataProp: true,
-  enableFontSizePxToRem: true,
+  enableFontSizePxToRem: false,
+  enableLogicalStylesPolyfill: false,
   enableMinifiedKeys: true,
-  styleResolution: 'application-order',
+  styleResolution: 'property-specificity',
   test: false
 };
 
@@ -2068,35 +2079,35 @@ function splitValue(str) {
 
 const shorthands$1 = {
   border: rawValue => {
-    return [['borderTop', rawValue], ['borderEnd', rawValue], ['borderBottom', rawValue], ['borderStart', rawValue]];
+    return [['borderTop', rawValue], ['borderInlineEnd', rawValue], ['borderBottom', rawValue], ['borderInlineStart', rawValue]];
   },
   borderColor: rawValue => {
     const [top, right = top, bottom = top, left = right] = splitValue(rawValue);
-    return [['borderTopColor', top], ['borderEndColor', right], ['borderBottomColor', bottom], ['borderStartColor', left]];
+    return [['borderTopColor', top], ['borderInlineEndColor', right], ['borderBottomColor', bottom], ['borderInlineStartColor', left]];
   },
   borderHorizontal: rawValue => {
-    return [['borderStart', rawValue], ['borderEnd', rawValue]];
+    return [['borderInlineStart', rawValue], ['borderInlineEnd', rawValue]];
   },
   borderStyle: rawValue => {
     const [top, right = top, bottom = top, left = right] = splitValue(rawValue);
-    return [['borderTopStyle', top], ['borderEndStyle', right], ['borderBottomStyle', bottom], ['borderStartStyle', left]];
+    return [['borderTopStyle', top], ['borderInlineEndStyle', right], ['borderBottomStyle', bottom], ['borderInlineStartStyle', left]];
   },
   borderVertical: rawValue => {
     return [['borderTop', rawValue], ['borderBottom', rawValue]];
   },
   borderWidth: rawValue => {
     const [top, right = top, bottom = top, left = right] = splitValue(rawValue);
-    return [['borderTopWidth', top], ['borderEndWidth', right], ['borderBottomWidth', bottom], ['borderStartWidth', left]];
+    return [['borderTopWidth', top], ['borderInlineEndWidth', right], ['borderBottomWidth', bottom], ['borderInlineStartWidth', left]];
   },
-  borderHorizontalColor: rawValue => [['borderStartColor', rawValue], ['borderEndColor', rawValue]],
-  borderHorizontalStyle: rawValue => [['borderStartStyle', rawValue], ['borderEndStyle', rawValue]],
-  borderHorizontalWidth: rawValue => [['borderStartWidth', rawValue], ['borderEndWidth', rawValue]],
+  borderHorizontalColor: rawValue => [['borderInlineStartColor', rawValue], ['borderInlineEndColor', rawValue]],
+  borderHorizontalStyle: rawValue => [['borderInlineStartStyle', rawValue], ['borderInlineEndStyle', rawValue]],
+  borderHorizontalWidth: rawValue => [['borderInlineStartWidth', rawValue], ['borderInlineEndWidth', rawValue]],
   borderVerticalColor: rawValue => [['borderTopColor', rawValue], ['borderBottomColor', rawValue]],
   borderVerticalStyle: rawValue => [['borderTopStyle', rawValue], ['borderBottomStyle', rawValue]],
   borderVerticalWidth: rawValue => [['borderTopWidth', rawValue], ['borderBottomWidth', rawValue]],
   borderRadius: rawValue => {
     const [top, right = top, bottom = top, left = right] = splitValue(rawValue);
-    return [['borderTopStartRadius', top], ['borderTopEndRadius', right], ['borderBottomEndRadius', bottom], ['borderBottomStartRadius', left]];
+    return [['borderStartStartRadius', top], ['borderStartEndRadius', right], ['borderEndEndRadius', bottom], ['borderEndStartRadius', left]];
   },
   containIntrinsicSize: rawValue => {
     const parts = splitValue(rawValue);
@@ -2109,26 +2120,26 @@ const shorthands$1 = {
     }, []);
     return [['containIntrinsicWidth', width], ['containIntrinsicHeight', height]];
   },
-  inset: rawValue => [['top', rawValue], ['end', rawValue], ['bottom', rawValue], ['start', rawValue]],
+  inset: rawValue => [['top', rawValue], ['insetInlineEnd', rawValue], ['bottom', rawValue], ['insetInlineStart', rawValue]],
   insetInline: rawValue => [...shorthands$1.start(rawValue), ...shorthands$1.end(rawValue)],
   insetBlock: rawValue => [['top', rawValue], ['bottom', rawValue]],
-  start: rawValue => [['start', rawValue], ['left', null], ['right', null]],
-  end: rawValue => [['end', rawValue], ['left', null], ['right', null]],
-  left: rawValue => [['left', rawValue], ['start', null], ['end', null]],
-  right: rawValue => [['right', rawValue], ['start', null], ['end', null]],
+  start: rawValue => [['insetInlineStart', rawValue], ['left', null], ['right', null]],
+  end: rawValue => [['insetInlineEnd', rawValue], ['left', null], ['right', null]],
+  left: rawValue => [['left', rawValue], ['insetInlineStart', null], ['insetInlineEnd', null]],
+  right: rawValue => [['right', rawValue], ['insetInlineStart', null], ['insetInlineEnd', null]],
   gap: rawValue => {
     const [row, column = row] = splitValue(rawValue);
     return [['rowGap', row], ['columnGap', column]];
   },
   margin: rawValue => {
     const [top, right = top, bottom = top, left = right] = splitValue(rawValue);
-    return [['marginTop', top], ['marginEnd', right], ['marginBottom', bottom], ['marginStart', left]];
+    return [['marginTop', top], ['marginInlineEnd', right], ['marginBottom', bottom], ['marginInlineStart', left]];
   },
   marginHorizontal: rawValue => [...shorthands$1.marginStart(rawValue), ...shorthands$1.marginEnd(rawValue)],
-  marginStart: rawValue => [['marginStart', rawValue], ['marginLeft', null], ['marginRight', null]],
-  marginEnd: rawValue => [['marginEnd', rawValue], ['marginLeft', null], ['marginRight', null]],
-  marginLeft: rawValue => [['marginLeft', rawValue], ['marginStart', null], ['marginEnd', null]],
-  marginRight: rawValue => [['marginRight', rawValue], ['marginStart', null], ['marginEnd', null]],
+  marginStart: rawValue => [['marginInlineStart', rawValue], ['marginLeft', null], ['marginRight', null]],
+  marginEnd: rawValue => [['marginInlineEnd', rawValue], ['marginLeft', null], ['marginRight', null]],
+  marginLeft: rawValue => [['marginLeft', rawValue], ['marginInlineStart', null], ['marginInlineEnd', null]],
+  marginRight: rawValue => [['marginRight', rawValue], ['marginInlineStart', null], ['marginInlineEnd', null]],
   marginVertical: rawValue => {
     return [['marginTop', rawValue], ['marginBottom', rawValue]];
   },
@@ -2138,13 +2149,13 @@ const shorthands$1 = {
   },
   padding: rawValue => {
     const [top, right = top, bottom = top, left = right] = splitValue(rawValue);
-    return [['paddingTop', top], ['paddingEnd', right], ['paddingBottom', bottom], ['paddingStart', left]];
+    return [['paddingTop', top], ['paddingInlineEnd', right], ['paddingBottom', bottom], ['paddingInlineStart', left]];
   },
   paddingHorizontal: val => [...shorthands$1.paddingStart(val), ...shorthands$1.paddingEnd(val)],
-  paddingStart: val => [['paddingStart', val], ['paddingLeft', null], ['paddingRight', null]],
-  paddingEnd: val => [['paddingEnd', val], ['paddingLeft', null], ['paddingRight', null]],
+  paddingStart: val => [['paddingInlineStart', val], ['paddingLeft', null], ['paddingRight', null]],
+  paddingEnd: val => [['paddingInlineEnd', val], ['paddingLeft', null], ['paddingRight', null]],
   paddingLeft: val => [['paddingLeft', val], ['paddingStart', null], ['paddingEnd', null]],
-  paddingRight: val => [['paddingRight', val], ['paddingStart', null], ['paddingEnd', null]],
+  paddingRight: val => [['paddingRight', val], ['paddingInlineStart', null], ['paddingInlineEnd', null]],
   paddingVertical: val => [['paddingTop', val], ['paddingBottom', val]]
 };
 const aliases$1 = {
@@ -2158,6 +2169,8 @@ const aliases$1 = {
   minInlineSize: val => [['minWidth', val]],
   maxBlockSize: val => [['maxHeight', val]],
   maxInlineSize: val => [['maxWidth', val]],
+  borderStart: val => [['borderInlineStart', val]],
+  borderEnd: val => [['borderInlineEnd', val]],
   borderBlockWidth: shorthands$1.borderVerticalWidth,
   borderBlockStyle: shorthands$1.borderVerticalStyle,
   borderBlockColor: shorthands$1.borderVerticalColor,
@@ -2170,16 +2183,10 @@ const aliases$1 = {
   borderInlineWidth: shorthands$1.borderHorizontalWidth,
   borderInlineStyle: shorthands$1.borderHorizontalStyle,
   borderInlineColor: shorthands$1.borderHorizontalColor,
-  borderInlineStartWidth: val => [['borderStartWidth', val]],
-  borderInlineStartStyle: val => [['borderStartStyle', val]],
-  borderInlineStartColor: val => [['borderStartColor', val]],
-  borderInlineEndWidth: val => [['borderEndWidth', val]],
-  borderInlineEndStyle: val => [['borderEndStyle', val]],
-  borderInlineEndColor: val => [['borderEndColor', val]],
-  borderStartStartRadius: val => [['borderTopStartRadius', val]],
-  borderStartEndRadius: val => [['borderTopEndRadius', val]],
-  borderEndStartRadius: val => [['borderBottomStartRadius', val]],
-  borderEndEndRadius: val => [['borderBottomEndRadius', val]],
+  borderTopStartRadius: val => [['borderStartStartRadius', val]],
+  borderTopEndRadius: val => [['borderStartEndRadius', val]],
+  borderBottomStartRadius: val => [['borderEndStartRadius', val]],
+  borderBottomEndRadius: val => [['borderEndEndRadius', val]],
   gridGap: shorthands$1.gap,
   gridRowGap: value => [['rowGap', value]],
   gridColumnGap: value => [['columnGap', value]],
@@ -2187,16 +2194,12 @@ const aliases$1 = {
   marginBlockStart: val => [['marginTop', val]],
   marginBlockEnd: val => [['marginBottom', val]],
   marginInline: shorthands$1.marginHorizontal,
-  marginInlineStart: val => [['marginStart', val]],
-  marginInlineEnd: val => [['marginEnd', val]],
   overflowBlock: value => [['overflowY', value]],
   overflowInline: value => [['overflowX', value]],
   paddingBlock: shorthands$1.paddingVertical,
   paddingBlockStart: val => [['paddingTop', val]],
   paddingBlockEnd: val => [['paddingBottom', val]],
   paddingInline: shorthands$1.paddingHorizontal,
-  paddingInlineStart: val => [['paddingStart', val]],
-  paddingInlineEnd: val => [['paddingEnd', val]],
   scrollMarginBlockStart: value => [['scrollMarginTop', value]],
   scrollMarginBlockEnd: value => [['scrollMarginBottom', value]]
 };
@@ -2316,7 +2319,7 @@ function flatMapExpandedShorthands(objEntry, options) {
   if (key.startsWith('var(') && key.endsWith(')')) {
     key = key.slice(4, -1);
   }
-  const expansion = expansions[options.styleResolution ?? 'application-order'][key];
+  const expansion = expansions[options.styleResolution ?? 'property-specificity'][key];
   if (expansion) {
     if (Array.isArray(value)) {
       throw new Error('Cannot use fallbacks for shorthands. Use the expansion instead.');
@@ -2497,6 +2500,7 @@ const ONLY_NAMED_PARAMETERS_IN_DYNAMIC_STYLE_FUNCTIONS = 'Only named parameters
 const ONLY_TOP_LEVEL = 'create() is only allowed at the root of a program.';
 const UNKNOWN_PROP_KEY = 'Unknown property key';
 const POSITION_TRY_INVALID_PROPERTY = 'Invalid property in `positionTry()` call. It may only contain, positionAnchor, positionArea, inset properties (top, left, insetInline etc.), margin properties, size properties (height, inlineSize, etc.), and self-alignment properties (alignSelf, justifySelf, placeSelf)';
+const VIEW_TRANSITION_CLASS_INVALID_PROPERTY = 'Invalid property in `viewTransitionClass()` call. It may only contain group, imagePair, old, and new properties';
 
 var m = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -2518,6 +2522,7 @@ var m = /*#__PURE__*/Object.freeze({
   ONLY_TOP_LEVEL: ONLY_TOP_LEVEL,
   POSITION_TRY_INVALID_PROPERTY: POSITION_TRY_INVALID_PROPERTY,
   UNKNOWN_PROP_KEY: UNKNOWN_PROP_KEY,
+  VIEW_TRANSITION_CLASS_INVALID_PROPERTY: VIEW_TRANSITION_CLASS_INVALID_PROPERTY,
   illegalArgumentLength: illegalArgumentLength,
   nonExportNamedDeclaration: nonExportNamedDeclaration,
   nonStaticValue: nonStaticValue,
@@ -2606,100 +2611,202 @@ const lengthUnits = new Set(['backgroundPositionX', 'backgroundPositionY', 'bloc
 
 const logicalToPhysical$1 = {
   start: 'left',
-  end: 'right'
+  end: 'right',
+  'inline-start': 'left',
+  'inline-end': 'right'
+};
+const legacyValuesPolyfill$1 = {
+  float: _ref => {
+    let [key, val] = _ref;
+    return [key, logicalToPhysical$1[val] ?? val];
+  },
+  clear: _ref2 => {
+    let [key, val] = _ref2;
+    return [key, logicalToPhysical$1[val] ?? val];
+  }
+};
+const inlinePropertyToLTR = {
+  'margin-inline-start': _ref3 => {
+    let [_key, val] = _ref3;
+    return ['margin-left', val];
+  },
+  'margin-inline-end': _ref4 => {
+    let [_key, val] = _ref4;
+    return ['margin-right', val];
+  },
+  'padding-inline-start': _ref5 => {
+    let [_key, val] = _ref5;
+    return ['padding-left', val];
+  },
+  'padding-inline-end': _ref6 => {
+    let [_key, val] = _ref6;
+    return ['padding-right', val];
+  },
+  'border-inline-start': _ref7 => {
+    let [_key, val] = _ref7;
+    return ['border-left', val];
+  },
+  'border-inline-end': _ref8 => {
+    let [_key, val] = _ref8;
+    return ['border-right', val];
+  },
+  'border-inline-start-width': _ref9 => {
+    let [_key, val] = _ref9;
+    return ['border-left-width', val];
+  },
+  'border-inline-end-width': _ref0 => {
+    let [_key, val] = _ref0;
+    return ['border-right-width', val];
+  },
+  'border-inline-start-color': _ref1 => {
+    let [_key, val] = _ref1;
+    return ['border-left-color', val];
+  },
+  'border-inline-end-color': _ref10 => {
+    let [_key, val] = _ref10;
+    return ['border-right-color', val];
+  },
+  'border-inline-start-style': _ref11 => {
+    let [_key, val] = _ref11;
+    return ['border-left-style', val];
+  },
+  'border-inline-end-style': _ref12 => {
+    let [_key, val] = _ref12;
+    return ['border-right-style', val];
+  },
+  'border-start-start-radius': _ref13 => {
+    let [_key, val] = _ref13;
+    return ['border-top-left-radius', val];
+  },
+  'border-end-start-radius': _ref14 => {
+    let [_key, val] = _ref14;
+    return ['border-bottom-left-radius', val];
+  },
+  'border-start-end-radius': _ref15 => {
+    let [_key, val] = _ref15;
+    return ['border-top-right-radius', val];
+  },
+  'border-end-end-radius': _ref16 => {
+    let [_key, val] = _ref16;
+    return ['border-bottom-right-radius', val];
+  },
+  'inset-inline-start': _ref17 => {
+    let [_key, val] = _ref17;
+    return ['left', val];
+  },
+  'inset-inline-end': _ref18 => {
+    let [_key, val] = _ref18;
+    return ['right', val];
+  }
 };
 const propertyToLTR = {
-  'margin-start': _ref => {
-    let [_key, val] = _ref;
+  'margin-start': _ref19 => {
+    let [_key, val] = _ref19;
     return ['margin-left', val];
   },
-  'margin-end': _ref2 => {
-    let [_key, val] = _ref2;
+  'margin-end': _ref20 => {
+    let [_key, val] = _ref20;
     return ['margin-right', val];
   },
-  'padding-start': _ref3 => {
-    let [_key, val] = _ref3;
+  'padding-start': _ref21 => {
+    let [_key, val] = _ref21;
     return ['padding-left', val];
   },
-  'padding-end': _ref4 => {
-    let [_key, val] = _ref4;
+  'padding-end': _ref22 => {
+    let [_key, val] = _ref22;
     return ['padding-right', val];
   },
-  'border-start': _ref5 => {
-    let [_key, val] = _ref5;
+  'border-start': _ref23 => {
+    let [_key, val] = _ref23;
     return ['border-left', val];
   },
-  'border-end': _ref6 => {
-    let [_key, val] = _ref6;
+  'border-end': _ref24 => {
+    let [_key, val] = _ref24;
     return ['border-right', val];
   },
-  'border-start-width': _ref7 => {
-    let [_key, val] = _ref7;
+  'border-start-width': _ref25 => {
+    let [_key, val] = _ref25;
     return ['border-left-width', val];
   },
-  'border-end-width': _ref8 => {
-    let [_key, val] = _ref8;
+  'border-end-width': _ref26 => {
+    let [_key, val] = _ref26;
     return ['border-right-width', val];
   },
-  'border-start-color': _ref9 => {
-    let [_key, val] = _ref9;
+  'border-start-color': _ref27 => {
+    let [_key, val] = _ref27;
     return ['border-left-color', val];
   },
-  'border-end-color': _ref0 => {
-    let [_key, val] = _ref0;
+  'border-end-color': _ref28 => {
+    let [_key, val] = _ref28;
     return ['border-right-color', val];
   },
-  'border-start-style': _ref1 => {
-    let [_key, val] = _ref1;
+  'border-start-style': _ref29 => {
+    let [_key, val] = _ref29;
     return ['border-left-style', val];
   },
-  'border-end-style': _ref10 => {
-    let [_key, val] = _ref10;
+  'border-end-style': _ref30 => {
+    let [_key, val] = _ref30;
     return ['border-right-style', val];
   },
-  'border-top-start-radius': _ref11 => {
-    let [_key, val] = _ref11;
+  'border-top-start-radius': _ref31 => {
+    let [_key, val] = _ref31;
     return ['border-top-left-radius', val];
   },
-  'border-bottom-start-radius': _ref12 => {
-    let [_key, val] = _ref12;
+  'border-bottom-start-radius': _ref32 => {
+    let [_key, val] = _ref32;
     return ['border-bottom-left-radius', val];
   },
-  'border-top-end-radius': _ref13 => {
-    let [_key, val] = _ref13;
+  'border-top-end-radius': _ref33 => {
+    let [_key, val] = _ref33;
     return ['border-top-right-radius', val];
   },
-  'border-bottom-end-radius': _ref14 => {
-    let [_key, val] = _ref14;
+  'border-bottom-end-radius': _ref34 => {
+    let [_key, val] = _ref34;
     return ['border-bottom-right-radius', val];
   },
-  float: _ref15 => {
-    let [key, val] = _ref15;
+  float: _ref35 => {
+    let [key, val] = _ref35;
     return [key, logicalToPhysical$1[val] ?? val];
   },
-  clear: _ref16 => {
-    let [key, val] = _ref16;
+  clear: _ref36 => {
+    let [key, val] = _ref36;
     return [key, logicalToPhysical$1[val] ?? val];
   },
-  start: _ref17 => {
-    let [_key, val] = _ref17;
+  start: _ref37 => {
+    let [_key, val] = _ref37;
     return ['left', val];
   },
-  end: _ref18 => {
-    let [_key, val] = _ref18;
+  end: _ref38 => {
+    let [_key, val] = _ref38;
     return ['right', val];
   },
-  'background-position': _ref19 => {
-    let [key, val] = _ref19;
-    return [key, val.split(' ').map(word => word === 'start' ? 'left' : word === 'end' ? 'right' : word).join(' ')];
+  'background-position': _ref39 => {
+    let [key, val] = _ref39;
+    return [key, val.split(' ').map(word => word === 'start' || word === 'insetInlineStart' ? 'left' : word === 'end' || word === 'insetInlineEnd' ? 'right' : word).join(' ')];
   }
 };
 function generateLTR(pair) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultOptions;
+  const {
+    enableLogicalStylesPolyfill,
+    styleResolution
+  } = options;
   const [key] = pair;
-  if (propertyToLTR[key]) {
-    return propertyToLTR[key](pair);
+  if (styleResolution === 'legacy-expand-shorthands') {
+    if (!enableLogicalStylesPolyfill) {
+      if (legacyValuesPolyfill$1[key]) {
+        return legacyValuesPolyfill$1[key](pair);
+      }
+      return pair;
+    }
+    if (inlinePropertyToLTR[key]) {
+      return inlinePropertyToLTR[key](pair);
+    }
   }
-  return pair;
+  if (!propertyToLTR[key]) {
+    return pair;
+  }
+  return propertyToLTR[key](pair);
 }
 
 const cursorFlip = {
@@ -2758,118 +2865,220 @@ function flipShadow(value) {
 }
 const logicalToPhysical = {
   start: 'right',
-  end: 'left'
+  end: 'left',
+  'inline-start': 'right',
+  'inline-end': 'left'
+};
+const legacyValuesPolyfill = {
+  float: _ref => {
+    let [key, val] = _ref;
+    return [key, logicalToPhysical[val] ?? val];
+  },
+  clear: _ref2 => {
+    let [key, val] = _ref2;
+    return [key, logicalToPhysical[val] ?? val];
+  }
+};
+const inlinePropertyToRTL = {
+  'margin-inline-start': _ref3 => {
+    let [_key, val] = _ref3;
+    return ['margin-right', val];
+  },
+  'margin-inline-end': _ref4 => {
+    let [_key, val] = _ref4;
+    return ['margin-left', val];
+  },
+  'padding-inline-start': _ref5 => {
+    let [_key, val] = _ref5;
+    return ['padding-right', val];
+  },
+  'padding-inline-end': _ref6 => {
+    let [_key, val] = _ref6;
+    return ['padding-left', val];
+  },
+  'border-inline-start': _ref7 => {
+    let [_key, val] = _ref7;
+    return ['border-right', val];
+  },
+  'border-inline-end': _ref8 => {
+    let [_key, val] = _ref8;
+    return ['border-left', val];
+  },
+  'border-inline-start-width': _ref9 => {
+    let [_key, val] = _ref9;
+    return ['border-right-width', val];
+  },
+  'border-inline-end-width': _ref0 => {
+    let [_key, val] = _ref0;
+    return ['border-left-width', val];
+  },
+  'border-inline-start-color': _ref1 => {
+    let [_key, val] = _ref1;
+    return ['border-right-color', val];
+  },
+  'border-inline-end-color': _ref10 => {
+    let [_key, val] = _ref10;
+    return ['border-left-color', val];
+  },
+  'border-inline-start-style': _ref11 => {
+    let [_key, val] = _ref11;
+    return ['border-right-style', val];
+  },
+  'border-inline-end-style': _ref12 => {
+    let [_key, val] = _ref12;
+    return ['border-left-style', val];
+  },
+  'border-start-start-radius': _ref13 => {
+    let [_key, val] = _ref13;
+    return ['border-top-right-radius', val];
+  },
+  'border-end-start-radius': _ref14 => {
+    let [_key, val] = _ref14;
+    return ['border-bottom-right-radius', val];
+  },
+  'border-start-end-radius': _ref15 => {
+    let [_key, val] = _ref15;
+    return ['border-top-left-radius', val];
+  },
+  'border-end-end-radius': _ref16 => {
+    let [_key, val] = _ref16;
+    return ['border-bottom-left-radius', val];
+  },
+  'inset-inline-start': _ref17 => {
+    let [_key, val] = _ref17;
+    return ['right', val];
+  },
+  'inset-inline-end': _ref18 => {
+    let [_key, val] = _ref18;
+    return ['left', val];
+  }
 };
 const propertyToRTL = {
-  'margin-start': _ref => {
-    let [_key, val] = _ref;
+  'margin-start': _ref19 => {
+    let [_key, val] = _ref19;
     return ['margin-right', val];
   },
-  'margin-end': _ref2 => {
-    let [_key, val] = _ref2;
+  'margin-end': _ref20 => {
+    let [_key, val] = _ref20;
     return ['margin-left', val];
   },
-  'padding-start': _ref3 => {
-    let [_key, val] = _ref3;
+  'padding-start': _ref21 => {
+    let [_key, val] = _ref21;
     return ['padding-right', val];
   },
-  'padding-end': _ref4 => {
-    let [_key, val] = _ref4;
+  'padding-end': _ref22 => {
+    let [_key, val] = _ref22;
     return ['padding-left', val];
   },
-  'border-start': _ref5 => {
-    let [_key, val] = _ref5;
+  'border-start': _ref23 => {
+    let [_key, val] = _ref23;
     return ['border-right', val];
   },
-  'border-end': _ref6 => {
-    let [_key, val] = _ref6;
+  'border-end': _ref24 => {
+    let [_key, val] = _ref24;
     return ['border-left', val];
   },
-  'border-start-width': _ref7 => {
-    let [_key, val] = _ref7;
+  'border-start-width': _ref25 => {
+    let [_key, val] = _ref25;
     return ['border-right-width', val];
   },
-  'border-end-width': _ref8 => {
-    let [_key, val] = _ref8;
+  'border-end-width': _ref26 => {
+    let [_key, val] = _ref26;
     return ['border-left-width', val];
   },
-  'border-start-color': _ref9 => {
-    let [_key, val] = _ref9;
+  'border-start-color': _ref27 => {
+    let [_key, val] = _ref27;
     return ['border-right-color', val];
   },
-  'border-end-color': _ref0 => {
-    let [_key, val] = _ref0;
+  'border-end-color': _ref28 => {
+    let [_key, val] = _ref28;
     return ['border-left-color', val];
   },
-  'border-start-style': _ref1 => {
-    let [_key, val] = _ref1;
+  'border-start-style': _ref29 => {
+    let [_key, val] = _ref29;
     return ['border-right-style', val];
   },
-  'border-end-style': _ref10 => {
-    let [_key, val] = _ref10;
+  'border-end-style': _ref30 => {
+    let [_key, val] = _ref30;
     return ['border-left-style', val];
   },
-  'border-top-start-radius': _ref11 => {
-    let [_key, val] = _ref11;
+  'border-top-start-radius': _ref31 => {
+    let [_key, val] = _ref31;
     return ['border-top-right-radius', val];
   },
-  'border-bottom-start-radius': _ref12 => {
-    let [_key, val] = _ref12;
+  'border-bottom-start-radius': _ref32 => {
+    let [_key, val] = _ref32;
     return ['border-bottom-right-radius', val];
   },
-  'border-top-end-radius': _ref13 => {
-    let [_key, val] = _ref13;
+  'border-top-end-radius': _ref33 => {
+    let [_key, val] = _ref33;
     return ['border-top-left-radius', val];
   },
-  'border-bottom-end-radius': _ref14 => {
-    let [_key, val] = _ref14;
+  'border-bottom-end-radius': _ref34 => {
+    let [_key, val] = _ref34;
     return ['border-bottom-left-radius', val];
   },
-  float: _ref15 => {
-    let [key, val] = _ref15;
+  float: _ref35 => {
+    let [key, val] = _ref35;
     return logicalToPhysical[val] != null ? [key, logicalToPhysical[val]] : null;
   },
-  clear: _ref16 => {
-    let [key, val] = _ref16;
+  clear: _ref36 => {
+    let [key, val] = _ref36;
     return logicalToPhysical[val] != null ? [key, logicalToPhysical[val]] : null;
   },
-  start: _ref17 => {
-    let [_key, val] = _ref17;
+  start: _ref37 => {
+    let [_key, val] = _ref37;
     return ['right', val];
   },
-  end: _ref18 => {
-    let [_key, val] = _ref18;
+  end: _ref38 => {
+    let [_key, val] = _ref38;
     return ['left', val];
   },
-  'background-position': _ref19 => {
-    let [key, val] = _ref19;
+  'background-position': _ref39 => {
+    let [key, val] = _ref39;
     const words = val.split(' ');
     if (!words.includes('start') && !words.includes('end')) {
       return null;
     }
-    return [key, words.map(word => word === 'start' ? 'right' : word === 'end' ? 'left' : word).join(' ')];
+    return [key, words.map(word => word === 'start' || word === 'insetInlineStart' ? 'right' : word === 'end' || word === 'insetInlineEnd' ? 'left' : word).join(' ')];
   },
-  cursor: _ref20 => {
-    let [key, val] = _ref20;
+  cursor: _ref40 => {
+    let [key, val] = _ref40;
     return cursorFlip[val] != null ? [key, cursorFlip[val]] : null;
   },
-  'box-shadow': _ref21 => {
-    let [key, val] = _ref21;
+  'box-shadow': _ref41 => {
+    let [key, val] = _ref41;
     const rtlVal = flipShadow(val);
     return rtlVal ? [key, rtlVal] : null;
   },
-  'text-shadow': _ref22 => {
-    let [key, val] = _ref22;
+  'text-shadow': _ref42 => {
+    let [key, val] = _ref42;
     const rtlVal = flipShadow(val);
     return rtlVal ? [key, rtlVal] : null;
   }
 };
-function generateRTL(_ref23) {
-  let [key, value] = _ref23;
-  if (propertyToRTL[key]) {
-    return propertyToRTL[key]([key, value]);
+function generateRTL(_ref43) {
+  let [key, value] = _ref43;
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultOptions;
+  const {
+    enableLogicalStylesPolyfill,
+    styleResolution
+  } = options;
+  if (styleResolution === 'legacy-expand-shorthands') {
+    if (!enableLogicalStylesPolyfill) {
+      if (legacyValuesPolyfill[key]) {
+        return legacyValuesPolyfill[key]([key, value]);
+      }
+      return null;
+    }
+    if (inlinePropertyToRTL[key]) {
+      return inlinePropertyToRTL[key]([key, value]);
+    }
   }
-  return null;
+  if (!propertyToRTL[key]) {
+    return null;
+  }
+  return propertyToRTL[key]([key, value]);
 }
 
 const longHandPhysical = new Set();
@@ -3389,17 +3598,17 @@ function getPriority(key) {
     const prop = key.startsWith(':') && key.includes('(') ? key.slice(0, key.indexOf('(')) : key;
     return PSEUDO_CLASS_PRIORITIES[prop] ?? 40;
   }
-  if (longHandPhysical.has(key)) {
-    return 4000;
-  }
-  if (longHandLogical.has(key)) {
-    return 3000;
+  if (shorthandsOfShorthands.has(key)) {
+    return 1000;
   }
   if (shorthandsOfLonghands.has(key)) {
     return 2000;
   }
-  if (shorthandsOfShorthands.has(key)) {
-    return 1000;
+  if (longHandLogical.has(key)) {
+    return 3000;
+  }
+  if (longHandPhysical.has(key)) {
+    return 4000;
   }
   return 3000;
 }
@@ -3415,10 +3624,11 @@ function buildNestedCSSRule(className, decls, pseudos, atRules, constRules) {
   return combinedAtRules.reduce((acc, combinedAtRules) => `${combinedAtRules}{${acc}}`, `${selectorForAtRules}{${decls}}`);
 }
 function generateCSSRule(className, key, value, pseudos, atRules, constRules) {
+  let options = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : defaultOptions;
   const pairs = Array.isArray(value) ? value.map(eachValue => [key, eachValue]) : [[key, value]];
-  const ltrPairs = pairs.map(generateLTR);
+  const ltrPairs = pairs.map(pair => generateLTR(pair, options));
   const ltrDecls = ltrPairs.map(pair => pair.join(':')).join(';');
-  const rtlDecls = pairs.map(generateRTL).filter(Boolean).map(pair => pair.join(':')).join(';');
+  const rtlDecls = pairs.map(pair => generateRTL(pair, options)).filter(Boolean).map(pair => pair.join(':')).join(';');
   const ltrRule = buildNestedCSSRule(className, ltrDecls, pseudos, atRules, constRules);
   const rtlRule = !rtlDecls ? null : buildNestedCSSRule(className, rtlDecls, pseudos, atRules, constRules);
   const priority = getPriority(key) + pseudos.map(getPriority).reduce((a, b) => a + b, 0) + atRules.map(getPriority).reduce((a, b) => a + b, 0) + constRules.map(getPriority).reduce((a, b) => a + b, 0);
@@ -3546,7 +3756,7 @@ function convertStyleToClassName(objEntry, pseudos, atRules, constRules) {
   const valueAsString = Array.isArray(value) ? value.join(', ') : value;
   const stringToHash = dashedKey + valueAsString + modifierHashString;
   const className = debug && enableDebugClassNames ? `${key}-${classNamePrefix}${hash('<>' + stringToHash)}` : classNamePrefix + hash('<>' + stringToHash);
-  const cssRules = generateCSSRule(className, dashedKey, value, pseudos, atRules, constRules);
+  const cssRules = generateCSSRule(className, dashedKey, value, pseudos, atRules, constRules, options);
   return [key, className, cssRules];
 }
 function variableFallbacks(values) {
@@ -4031,7 +4241,7 @@ function collectVarsByAtRule(key, _ref) {
     return;
   }
   if (Array.isArray(value)) {
-    throw new Error('Array is not supported in stylex.defineVars');
+    throw new Error('Array is not supported in defineVars');
   }
   if (typeof value === 'object') {
     if (value.default === undefined) {
@@ -4050,7 +4260,7 @@ function wrapWithAtRules(ltr, atRule) {
 }
 function priorityForAtRule(atRule) {
   if (atRule === 'default') {
-    return 0;
+    return 1;
   }
   return atRule.split(SPLIT_TOKEN).length;
 }
@@ -4062,7 +4272,7 @@ function getDefaultValue(value) {
     return null;
   }
   if (Array.isArray(value)) {
-    throw new Error('Array is not supported in stylex.defineVars');
+    throw new Error('Array is not supported in defineVars');
   }
   if (typeof value === 'object') {
     if (value.default === undefined) {
@@ -4070,7 +4280,7 @@ function getDefaultValue(value) {
     }
     return getDefaultValue(value.default);
   }
-  throw new Error('Invalid value in stylex.defineVars');
+  throw new Error('Invalid value in defineVars');
 }
 
 function styleXDefineVars(variables, options) {
@@ -4190,7 +4400,7 @@ function styleXDefineConsts(constants, options) {
 
 function styleXCreateTheme(themeVars, variables, options) {
   if (typeof themeVars.__themeName__ !== 'string') {
-    throw new Error('Can only override variables theme created with stylex.defineVars().');
+    throw new Error('Can only override variables theme created with defineVars().');
   }
   const {
     classNamePrefix
@@ -4231,8 +4441,8 @@ function styleXCreateTheme(themeVars, variables, options) {
   }
   const themeClass = `${overrideClassName} ${themeVars.__themeName__}`;
   return [{
-    $$css: true,
-    [themeVars.__themeName__]: themeClass
+    [themeVars.__themeName__]: themeClass,
+    $$css: true
   }, stylesToInject];
 }
 
@@ -4252,7 +4462,7 @@ function styleXKeyframes(frames) {
   return [animationName, {
     ltr,
     rtl,
-    priority: 1
+    priority: 0
   }];
 }
 function expandFrameShorthands(frame, options) {
@@ -4282,7 +4492,7 @@ function styleXPositionTry(styles) {
   const {
     classNamePrefix = 'x'
   } = options;
-  const expandedObject = Pipe.create(styles).pipe(styles => preprocessProperties(styles, options)).pipe(x => objMapKeys(x, dashify)).pipe(x => objMap(x, (value, key) => transformValue(key, value, options))).done();
+  const expandedObject = Pipe.create(styles).pipe(styles => preprocessProperties$1(styles, options)).pipe(x => objMapKeys(x, dashify)).pipe(x => objMap(x, (value, key) => transformValue(key, value, options))).done();
   const ltrStyles = objMap(expandedObject, (value, key) => generateLTR([key, value]));
   const rtlStyles = objMap(expandedObject, (value, key) => generateRTL([key, value]) ?? value);
   const ltrString = constructPositionTryObj(ltrStyles);
@@ -4293,10 +4503,10 @@ function styleXPositionTry(styles) {
   return [positionTryName, {
     ltr,
     rtl,
-    priority: 1
+    priority: 0
   }];
 }
-function preprocessProperties(styles, options) {
+function preprocessProperties$1(styles, options) {
   return objFromEntries(objEntries(styles).flatMap(pair => flatMapExpandedShorthands(pair, options).map(_ref => {
     let [key, value] = _ref;
     if (typeof value === 'string' || typeof value === 'number') {
@@ -4557,8 +4767,8 @@ function evaluateThemeRef(fileName, exportName, state) {
       debug,
       enableDebugClassNames
     } = state.traversalState.options;
-    const varSafeKey = (key[0] >= '0' && key[0] <= '9' ? `_${key}` : key).replace(/[^a-zA-Z0-9]/g, '_');
-    const varName = debug && enableDebugClassNames ? varSafeKey + '-' + state.traversalState.options.classNamePrefix + utils.hash(strToHash) : state.traversalState.options.classNamePrefix + utils.hash(strToHash);
+    const varSafeKey = key === '__themeName__' ? '' : (key[0] >= '0' && key[0] <= '9' ? `_${key}` : key).replace(/[^a-zA-Z0-9]/g, '_') + '-';
+    const varName = debug && enableDebugClassNames ? varSafeKey + state.traversalState.options.classNamePrefix + utils.hash(strToHash) : state.traversalState.options.classNamePrefix + utils.hash(strToHash);
     if (key === '__themeName__') {
       return varName;
     }
@@ -5625,7 +5835,7 @@ function transformStyleXCreateTheme(callExpressionPath, state) {
       throw callExpressionPath.buildCodeFrameError(messages.nonStyleObject('createTheme'), SyntaxError);
     }
     if (typeof variables.__themeName__ !== 'string' || variables.__themeName__ === '') {
-      throw callExpressionPath.buildCodeFrameError('Can only override variables theme created with stylex.defineVars().', SyntaxError);
+      throw callExpressionPath.buildCodeFrameError('Can only override variables theme created with defineVars().', SyntaxError);
     }
     let [overridesObj, injectedStyles] = createTheme(variables, overrides, state.options);
     if (state.isTest) {
@@ -5743,7 +5953,7 @@ function transformStyleXDefineVars(callExpressionPath, state) {
     }
     const fileName = state.fileNameForHashing;
     if (fileName == null) {
-      throw new Error('No filename found for generating theme name.');
+      throw new Error('No filename found for generating defineVars key name.');
     }
     const exportName = varId.name;
     const [variablesObj, injectedStylesSansKeyframes] = defineVars(value, {
@@ -5806,7 +6016,7 @@ function transformStyleXDefineConsts(callExpressionPath, state) {
     }
     const fileName = state.fileNameForHashing;
     if (fileName == null) {
-      throw new Error('No filename found for generating theme name.');
+      throw new Error('No filename found for generating defineConsts key name.');
     }
     const exportName = varId.name;
     const themeName = utils.genFileBasedIdentifier({
@@ -5966,7 +6176,7 @@ function transformStyleXPositionTry(path, state) {
     }
     const plainObject = value;
     assertValidPositionTry(firstArgPath, plainObject);
-    assertValidProperties(firstArgPath, plainObject);
+    assertValidProperties$1(firstArgPath, plainObject);
     const [positionTryName, {
       ltr,
       priority,
@@ -5985,7 +6195,7 @@ function assertValidPositionTry(path, obj) {
   }
 }
 const VALID_POSITION_TRY_PROPERTIES = ['anchorName', 'positionAnchor', 'positionArea', 'top', 'right', 'bottom', 'left', 'inset', 'insetBlock', 'insetBlockEnd', 'insetBlockStart', 'insetInline', 'insetInlineEnd', 'insetInlineStart', 'margin', 'marginBlock', 'marginBlockEnd', 'marginBlockStart', 'marginInline', 'marginInlineEnd', 'marginInlineStart', 'marginTop', 'marginBottom', 'marginLeft', 'marginRight', 'width', 'height', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight', 'blockSize', 'inlineSize', 'minBlockSize', 'minInlineSize', 'maxBlockSize', 'maxInlineSize', 'alignSelf', 'justifySelf', 'placeSelf'];
-function assertValidProperties(path, obj) {
+function assertValidProperties$1(path, obj) {
   const keys = Object.keys(obj);
   if (keys.some(key => !VALID_POSITION_TRY_PROPERTIES.includes(key))) {
     throw path.buildCodeFrameError(POSITION_TRY_INVALID_PROPERTY, SyntaxError);
@@ -6451,6 +6661,147 @@ function isCalleeMemberExpression(path, state) {
   return node != null && node.callee != null && node.callee.type === 'MemberExpression' && node.callee.object.type === 'Identifier' && node.callee.property.type === 'Identifier' && node.callee.property.name === 'props' && state.stylexImport.has(node.callee.object.name);
 }
 
+function styleXViewTransitionClass(styles) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultOptions;
+  const {
+    classNamePrefix = 'x'
+  } = options;
+  const preprocessedObject = objMap(styles, style => Pipe.create(style).pipe(style => preprocessProperties(style, options)).pipe(x => objMapKeys(x, dashify)).pipe(x => objMap(x, (value, key) => transformValue(key, value, options))).done());
+  const expandedObject = objMapKeys(preprocessedObject, k => `::view-transition-${dashify(k)}`);
+  const styleStrings = objMap(expandedObject, constructViewTransitionClassStyleStr);
+  const viewTransitionClassName = classNamePrefix + hash(constructViewTransitionClassStyleStr(styleStrings));
+  const style = constructFinalViewTransitionCSSStr(styleStrings, viewTransitionClassName);
+  return [viewTransitionClassName, {
+    ltr: style,
+    rtl: null,
+    priority: 1
+  }];
+}
+function preprocessProperties(styles, options) {
+  return objFromEntries(objEntries(styles).flatMap(pair => flatMapExpandedShorthands(pair, options).map(_ref => {
+    let [key, value] = _ref;
+    if (typeof value === 'string' || typeof value === 'number') {
+      return [key, value];
+    }
+    return null;
+  }).filter(Boolean)).filter(_ref2 => {
+    let [_key, value] = _ref2;
+    return value != null;
+  }));
+}
+function constructViewTransitionClassStyleStr(style) {
+  return objEntries(style).map(_ref3 => {
+    let [k, v] = _ref3;
+    return `${k}:${v};`;
+  }).join('');
+}
+function constructFinalViewTransitionCSSStr(styles, className) {
+  return objEntries(styles).map(_ref4 => {
+    let [k, v] = _ref4;
+    return `${k}(*.${className}){${v}}`;
+  }).join('');
+}
+
+function transformStyleXViewTransitionClass(path, state) {
+  const initPath = path.get('init');
+  if (!initPath.isCallExpression()) {
+    return;
+  }
+  const callExpressionPath = initPath;
+  const idPath = path.get('id');
+  if (!idPath.isIdentifier()) {
+    return;
+  }
+  const nodeInit = callExpressionPath.node;
+  if (nodeInit.callee.type === 'Identifier' && state.stylexViewTransitionClassImport.has(nodeInit.callee.name) || nodeInit.callee.type === 'MemberExpression' && nodeInit.callee.object.type === 'Identifier' && nodeInit.callee.property.name === 'viewTransitionClass' && nodeInit.callee.property.type === 'Identifier' && state.stylexImport.has(nodeInit.callee.object.name)) {
+    const init = path.get('init');
+    if (init == null || !init.isCallExpression()) {
+      throw path.buildCodeFrameError(nonStaticValue('viewTransitionClass'), SyntaxError);
+    }
+    if (nodeInit.arguments.length !== 1) {
+      throw path.buildCodeFrameError(illegalArgumentLength('viewTransitionClass', 1), SyntaxError);
+    }
+    const args = init.get('arguments');
+    const firstArgPath = args[0];
+    const otherInjectedCSSRules = {};
+    const keyframes$1 = animation => {
+      const [animationName, injectedStyle] = keyframes(animation, state.options);
+      otherInjectedCSSRules[animationName] = injectedStyle;
+      return animationName;
+    };
+    const identifiers = {};
+    const memberExpressions = {};
+    state.stylexFirstThatWorksImport.forEach(name => {
+      identifiers[name] = {
+        fn: firstThatWorks
+      };
+    });
+    state.stylexKeyframesImport.forEach(name => {
+      identifiers[name] = {
+        fn: keyframes$1
+      };
+    });
+    state.stylexImport.forEach(name => {
+      if (memberExpressions[name] == null) {
+        memberExpressions[name] = {};
+      }
+      memberExpressions[name].firstThatWorks = {
+        fn: firstThatWorks
+      };
+      memberExpressions[name].keyframes = {
+        fn: keyframes$1
+      };
+    });
+    const {
+      confident,
+      value
+    } = evaluate(firstArgPath, state, {
+      identifiers,
+      memberExpressions
+    });
+    if (!confident) {
+      throw callExpressionPath.buildCodeFrameError(nonStaticValue('viewTransitionClass'), SyntaxError);
+    }
+    const plainObject = value;
+    assertValidViewTransitionClass(firstArgPath, plainObject);
+    assertValidProperties(firstArgPath, plainObject);
+    const [viewTransitionClassName, {
+      ltr,
+      priority,
+      rtl
+    }] = styleXViewTransitionClass(plainObject, state.options);
+    init.replaceWith(t__namespace.stringLiteral(viewTransitionClassName));
+    const injectedStyles = {
+      ...otherInjectedCSSRules,
+      [viewTransitionClassName]: {
+        priority,
+        ltr,
+        rtl
+      }
+    };
+    const listOfStyles = Object.entries(injectedStyles).map(_ref => {
+      let [key, {
+        priority,
+        ...rest
+      }] = _ref;
+      return [key, rest, priority];
+    });
+    state.registerStyles(listOfStyles, path);
+  }
+}
+function assertValidViewTransitionClass(path, obj) {
+  if (typeof obj !== 'object' || Array.isArray(obj) || obj == null) {
+    throw path.buildCodeFrameError(nonStyleObject('viewTransitionClass'), SyntaxError);
+  }
+}
+const VALID_VIEW_TRANSITION_CLASS_PROPERTIES = ['group', 'imagePair', 'old', 'new'];
+function assertValidProperties(path, obj) {
+  const keys = Object.keys(obj);
+  if (keys.some(key => !VALID_VIEW_TRANSITION_CLASS_PROPERTIES.includes(key))) {
+    throw path.buildCodeFrameError(VIEW_TRANSITION_CLASS_INVALID_PROPERTY, SyntaxError);
+  }
+}
+
 const NAME = 'stylex';
 function styleXTransform() {
   let state;
@@ -6614,6 +6965,7 @@ function styleXTransform() {
           const parentPath = path.parentPath;
           if (parentPath.isVariableDeclarator()) {
             transformStyleXKeyframes(parentPath, state);
+            transformStyleXViewTransitionClass(parentPath, state);
             transformStyleXPositionTry(parentPath, state);
           }
         }
@@ -6727,14 +7079,15 @@ function processStylexRules(rules) {
   }, []);
   const header = useLayers ? '\n@layer ' + grouped.map((_, index) => `priority${index + 1}`).join(', ') + ';\n' : '';
   const collectedCSS = grouped.map((group, index) => {
+    const pri = group[0][2];
     const collectedCSS = Array.from(new Map(group.map(_ref8 => {
       let [a, b] = _ref8;
       return [a, b];
-    })).values()).flatMap(_ref9 => {
-      let {
+    })).values()).flatMap(rule => {
+      const {
         ltr,
         rtl
-      } = _ref9;
+      } = rule;
       let ltrRule = ltr,
         rtlRule = rtl;
       if (!useLayers) {
@@ -6743,7 +7096,7 @@ function processStylexRules(rules) {
       }
       return rtlRule ? [addAncestorSelector(ltrRule, "html:not([dir='rtl'])"), addAncestorSelector(rtlRule, "html[dir='rtl']")] : [ltrRule];
     }).join('\n');
-    return useLayers ? `@layer priority${index + 1}{\n${collectedCSS}\n}` : collectedCSS;
+    return useLayers && pri > 0 ? `@layer priority${index + 1}{\n${collectedCSS}\n}` : collectedCSS;
   }).join('\n');
   return header + collectedCSS;
 }