@stylexjs/babel-plugin 0.13.1 → 0.14.1

package/lib/shared/common-types.d.ts

@@ -46,6 +46,7 @@ export type StyleXOptions = Readonly<{
   enableDebugDataProp?: null | undefined | boolean;
   enableDevClassNames?: null | undefined | boolean;
   enableFontSizePxToRem?: null | undefined | boolean;
+  enableLogicalStylesPolyfill?: null | undefined | boolean;
   enableMinifiedKeys?: null | undefined | boolean;
   styleResolution:
     | 'application-order'

package/lib/shared/common-types.js.flow

@@ -52,6 +52,7 @@ export type StyleXOptions = $ReadOnly<{
   enableDebugDataProp?: ?boolean,
   enableDevClassNames?: ?boolean,
   enableFontSizePxToRem?: ?boolean,
+  enableLogicalStylesPolyfill?: ?boolean,
   enableMinifiedKeys?: ?boolean,
   styleResolution:
     | 'application-order' // The last style applied wins.

package/lib/shared/messages.d.ts

@@ -15,6 +15,7 @@ export declare const nonStaticValue: (fn: string) => string;
 export declare const nonStyleObject: (fn: string) => string;
 export declare const nonExportNamedDeclaration: (fn: string) => string;
 export declare const unboundCallValue: (fn: string) => string;
+export declare const cannotGenerateHash: (fn: string) => string;
 export declare const DUPLICATE_CONDITIONAL: 'The same pseudo selector or at-rule cannot be used more than once.';
 export declare const ESCAPED_STYLEX_VALUE: 'Escaping a create() value is not allowed.';
 export declare const ILLEGAL_NESTED_PSEUDO: "Pseudo objects can't be nested more than one level deep.";
@@ -33,3 +34,4 @@ export declare const ONLY_NAMED_PARAMETERS_IN_DYNAMIC_STYLE_FUNCTIONS: 'Only nam
 export declare const ONLY_TOP_LEVEL: 'create() is only allowed at the root of a program.';
 export declare const UNKNOWN_PROP_KEY: 'Unknown property key';
 export declare 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)';
+export declare const VIEW_TRANSITION_CLASS_INVALID_PROPERTY: 'Invalid property in `viewTransitionClass()` call. It may only contain group, imagePair, old, and new properties';

package/lib/shared/messages.js.flow

@@ -18,6 +18,7 @@ declare export const nonStaticValue: (fn: string) => string;
 declare export const nonStyleObject: (fn: string) => string;
 declare export const nonExportNamedDeclaration: (fn: string) => string;
 declare export const unboundCallValue: (fn: string) => string;
+declare export const cannotGenerateHash: (fn: string) => string;
 
 declare export const DUPLICATE_CONDITIONAL: 'The same pseudo selector or at-rule cannot be used more than once.';
 declare export const ESCAPED_STYLEX_VALUE: 'Escaping a create() value is not allowed.';
@@ -38,3 +39,5 @@ declare export const ONLY_TOP_LEVEL: 'create() is only allowed at the root of a
 declare export const UNKNOWN_PROP_KEY: 'Unknown property key';
 
 declare export 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)';
+
+declare export const VIEW_TRANSITION_CLASS_INVALID_PROPERTY: 'Invalid property in `viewTransitionClass()` call. It may only contain group, imagePair, old, and new properties';

package/lib/shared/physical-rtl/generate-ltr.d.ts

@@ -7,7 +7,9 @@
  *
  */
 
+import type { StyleXOptions } from '../common-types';
 declare function generateLTR(
   pair: Readonly<[string, string]>,
+  options: StyleXOptions,
 ): Readonly<[string, string]>;
 export default generateLTR;

package/lib/shared/physical-rtl/generate-ltr.js.flow

@@ -7,6 +7,8 @@
  * @flow strict
  */
 
+import type { StyleXOptions } from '../common-types';
 declare export default function generateLTR(
   pair: $ReadOnly<[string, string]>,
+  options: StyleXOptions,
 ): $ReadOnly<[string, string]>;

package/lib/shared/physical-rtl/generate-rtl.d.ts

@@ -7,7 +7,9 @@
  *
  */
 
+import type { StyleXOptions } from '../common-types';
 declare function generateRTL(
   $$PARAM_0$$: Readonly<[string, string]>,
+  options: StyleXOptions,
 ): null | undefined | Readonly<[string, string]>;
 export default generateRTL;

package/lib/shared/physical-rtl/generate-rtl.js.flow

@@ -7,6 +7,8 @@
  * @flow strict
  */
 
+import type { StyleXOptions } from '../common-types';
 declare export default function generateRTL(
   $ReadOnly<[string, string]>,
+  options: StyleXOptions,
 ): ?$ReadOnly<[string, string]>;

package/lib/shared/preprocess-rules/legacy-expand-shorthands.d.ts

@@ -117,6 +117,8 @@ declare const aliases: {
   minInlineSize: (val: TStyleValue) => TReturn;
   maxBlockSize: (val: TStyleValue) => TReturn;
   maxInlineSize: (val: TStyleValue) => TReturn;
+  borderStart: (val: TStyleValue) => TReturn;
+  borderEnd: (val: TStyleValue) => TReturn;
   borderBlockWidth: any;
   borderBlockStyle: any;
   borderBlockColor: any;
@@ -129,16 +131,10 @@ declare const aliases: {
   borderInlineWidth: any;
   borderInlineStyle: any;
   borderInlineColor: any;
-  borderInlineStartWidth: (val: TStyleValue) => TReturn;
-  borderInlineStartStyle: (val: TStyleValue) => TReturn;
-  borderInlineStartColor: (val: TStyleValue) => TReturn;
-  borderInlineEndWidth: (val: TStyleValue) => TReturn;
-  borderInlineEndStyle: (val: TStyleValue) => TReturn;
-  borderInlineEndColor: (val: TStyleValue) => TReturn;
-  borderStartStartRadius: (val: TStyleValue) => TReturn;
-  borderStartEndRadius: (val: TStyleValue) => TReturn;
-  borderEndStartRadius: (val: TStyleValue) => TReturn;
-  borderEndEndRadius: (val: TStyleValue) => TReturn;
+  borderTopStartRadius: (val: TStyleValue) => TReturn;
+  borderTopEndRadius: (val: TStyleValue) => TReturn;
+  borderBottomStartRadius: (val: TStyleValue) => TReturn;
+  borderBottomEndRadius: (val: TStyleValue) => TReturn;
   gridGap: any;
   gridRowGap: (value: TStyleValue) => TReturn;
   gridColumnGap: (value: TStyleValue) => TReturn;
@@ -146,16 +142,12 @@ declare const aliases: {
   marginBlockStart: (val: TStyleValue) => TReturn;
   marginBlockEnd: (val: TStyleValue) => TReturn;
   marginInline: any;
-  marginInlineStart: (val: TStyleValue) => TReturn;
-  marginInlineEnd: (val: TStyleValue) => TReturn;
   overflowBlock: (value: TStyleValue) => TReturn;
   overflowInline: (value: TStyleValue) => TReturn;
   paddingBlock: any;
   paddingBlockStart: (val: TStyleValue) => TReturn;
   paddingBlockEnd: (val: TStyleValue) => TReturn;
   paddingInline: any;
-  paddingInlineStart: (val: TStyleValue) => TReturn;
-  paddingInlineEnd: (val: TStyleValue) => TReturn;
   scrollMarginBlockStart: (value: TStyleValue) => TReturn;
   scrollMarginBlockEnd: (value: TStyleValue) => TReturn;
 };

package/lib/shared/preprocess-rules/legacy-expand-shorthands.js.flow

@@ -96,6 +96,8 @@ declare const aliases: {
   minInlineSize: (val: TStyleValue) => TReturn,
   maxBlockSize: (val: TStyleValue) => TReturn,
   maxInlineSize: (val: TStyleValue) => TReturn,
+  borderStart: (val: TStyleValue) => TReturn,
+  borderEnd: (val: TStyleValue) => TReturn,
   borderBlockWidth: $FlowFixMe,
   borderBlockStyle: $FlowFixMe,
   borderBlockColor: $FlowFixMe,
@@ -108,16 +110,10 @@ declare const aliases: {
   borderInlineWidth: $FlowFixMe,
   borderInlineStyle: $FlowFixMe,
   borderInlineColor: $FlowFixMe,
-  borderInlineStartWidth: (val: TStyleValue) => TReturn,
-  borderInlineStartStyle: (val: TStyleValue) => TReturn,
-  borderInlineStartColor: (val: TStyleValue) => TReturn,
-  borderInlineEndWidth: (val: TStyleValue) => TReturn,
-  borderInlineEndStyle: (val: TStyleValue) => TReturn,
-  borderInlineEndColor: (val: TStyleValue) => TReturn,
-  borderStartStartRadius: (val: TStyleValue) => TReturn,
-  borderStartEndRadius: (val: TStyleValue) => TReturn,
-  borderEndStartRadius: (val: TStyleValue) => TReturn,
-  borderEndEndRadius: (val: TStyleValue) => TReturn,
+  borderTopStartRadius: (val: TStyleValue) => TReturn,
+  borderTopEndRadius: (val: TStyleValue) => TReturn,
+  borderBottomStartRadius: (val: TStyleValue) => TReturn,
+  borderBottomEndRadius: (val: TStyleValue) => TReturn,
   gridGap: $FlowFixMe,
   gridRowGap: (value: TStyleValue) => TReturn,
   gridColumnGap: (value: TStyleValue) => TReturn,
@@ -125,16 +121,12 @@ declare const aliases: {
   marginBlockStart: (val: TStyleValue) => TReturn,
   marginBlockEnd: (val: TStyleValue) => TReturn,
   marginInline: $FlowFixMe,
-  marginInlineStart: (val: TStyleValue) => TReturn,
-  marginInlineEnd: (val: TStyleValue) => TReturn,
   overflowBlock: (value: TStyleValue) => TReturn,
   overflowInline: (value: TStyleValue) => TReturn,
   paddingBlock: $FlowFixMe,
   paddingBlockStart: (val: TStyleValue) => TReturn,
   paddingBlockEnd: (val: TStyleValue) => TReturn,
   paddingInline: $FlowFixMe,
-  paddingInlineStart: (val: TStyleValue) => TReturn,
-  paddingInlineEnd: (val: TStyleValue) => TReturn,
   scrollMarginBlockStart: (value: TStyleValue) => TReturn,
   scrollMarginBlockEnd: (value: TStyleValue) => TReturn,
 };

package/lib/shared/stylex-view-transition-class.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+
+import type { InjectableStyle, StyleXOptions } from './common-types';
+type StyleValue = { readonly [$$Key$$: string]: string | number };
+type StyleObj = {
+  group?: StyleValue;
+  imagePair?: StyleValue;
+  old?: StyleValue;
+  new?: StyleValue;
+};
+declare function styleXViewTransitionClass(
+  styles: StyleObj,
+  options: StyleXOptions,
+): [string, InjectableStyle];
+export default styleXViewTransitionClass;

package/lib/shared/stylex-view-transition-class.js.flow

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ */
+
+import type { InjectableStyle, StyleXOptions } from './common-types';
+
+type StyleValue = { +[string]: string | number };
+type StyleObj = {
+  group?: StyleValue,
+  imagePair?: StyleValue,
+  old?: StyleValue,
+  new?: StyleValue,
+};
+
+declare export default function styleXViewTransitionClass(
+  styles: StyleObj,
+  options: StyleXOptions,
+): [string, InjectableStyle];

package/lib/shared/utils/generate-css-rule.d.ts

@@ -7,7 +7,7 @@
  *
  */
 
-import type { InjectableStyle } from '../common-types';
+import type { InjectableStyle, StyleXOptions } from '../common-types';
 export declare function generateCSSRule(
   className: string,
   key: string,
@@ -15,4 +15,5 @@ export declare function generateCSSRule(
   pseudos: ReadonlyArray<string>,
   atRules: ReadonlyArray<string>,
   constRules: ReadonlyArray<string>,
+  options: StyleXOptions,
 ): InjectableStyle;

package/lib/shared/utils/generate-css-rule.js.flow

@@ -7,8 +7,7 @@
  * @flow strict
  */
 
-import type { InjectableStyle } from '../common-types';
-
+import type { InjectableStyle, StyleXOptions } from '../common-types';
 declare export function generateCSSRule(
   className: string,
   key: string,
@@ -16,4 +15,5 @@ declare export function generateCSSRule(
   pseudos: $ReadOnlyArray<string>,
   atRules: $ReadOnlyArray<string>,
   constRules: $ReadOnlyArray<string>,
+  options: StyleXOptions,
 ): InjectableStyle;

package/lib/utils/state-manager.d.ts

@@ -45,7 +45,8 @@ export type StyleXOptions = Readonly<
       enableDebugClassNames?: boolean;
       enableDebugDataProp?: boolean;
       enableDevClassNames?: boolean;
-      enableInlinedConditionalMerge: boolean;
+      enableInlinedConditionalMerge?: boolean;
+      enableLogicalStylesPolyfill?: boolean;
       enableMinifiedKeys?: boolean;
       importSources: ReadonlyArray<
         string | Readonly<{ from: string; as: string }>
@@ -66,7 +67,8 @@ export type StyleXOptions = Readonly<
     enableDebugClassNames?: boolean;
     enableDebugDataProp?: boolean;
     enableDevClassNames?: boolean;
-    enableInlinedConditionalMerge: boolean;
+    enableInlinedConditionalMerge?: boolean;
+    enableLogicalStylesPolyfill?: boolean;
     enableMinifiedKeys?: boolean;
     importSources: ReadonlyArray<
       string | Readonly<{ from: string; as: string }>
@@ -119,6 +121,7 @@ declare class StateManager {
   readonly stylexDefineConstsImport: Set<string>;
   readonly stylexCreateThemeImport: Set<string>;
   readonly stylexTypesImport: Set<string>;
+  readonly stylexViewTransitionClassImport: Set<string>;
   injectImportInserted: null | undefined | t.Identifier;
   readonly styleMap: Map<string, CompiledNamespaces>;
   readonly styleVars: Map<string, NodePath>;

package/lib/utils/state-manager.js.flow

@@ -47,7 +47,8 @@ export type StyleXOptions = $ReadOnly<{
   enableDebugClassNames?: boolean,
   enableDebugDataProp?: boolean,
   enableDevClassNames?: boolean,
-  enableInlinedConditionalMerge: boolean,
+  enableInlinedConditionalMerge?: boolean,
+  enableLogicalStylesPolyfill?: boolean,
   enableMinifiedKeys?: boolean,
   importSources: $ReadOnlyArray<
     string | $ReadOnly<{ from: string, as: string }>,
@@ -82,6 +83,7 @@ declare export default class StateManager {
   +stylexDefineConstsImport: Set<string>;
   +stylexCreateThemeImport: Set<string>;
   +stylexTypesImport: Set<string>;
+  +stylexViewTransitionClassImport: Set<string>;
   injectImportInserted: ?t.Identifier;
   +styleMap: Map<string, CompiledNamespaces>;
   +styleVars: Map<string, NodePath<>>;

package/lib/visitors/stylex-view-transition-class.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+
+import type { NodePath } from '@babel/traverse';
+import * as t from '@babel/types';
+import StateManager from '../utils/state-manager';
+declare function transformStyleXViewTransitionClass(
+  path: NodePath<t.VariableDeclarator>,
+  state: StateManager,
+): void;
+export default transformStyleXViewTransitionClass;

package/lib/visitors/stylex-view-transition-class.js.flow

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ */
+
+import type { NodePath } from '../../flow_modules/@babel/traverse';
+import * as t from '../../flow_modules/@babel/types';
+import StateManager from '../utils/state-manager';
+/// This function looks for `stylex.viewTransitionClass` calls within variable declarations and transforms them.
+/// 1. It finds the first argument to `stylex.viewTransitionClass` and validates it.
+/// 2. It evaluates the style object to get a JS object. This also handles local constants automatically.
+/// 3. The actual transform is done by `stylexViewTransitionClass` from `../shared`
+/// 4. The results are replaced, and generated CSS rules are injected as needed.
+
+declare export default function transformStyleXViewTransitionClass(
+  path: NodePath<t.VariableDeclarator>,
+  state: StateManager,
+): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/babel-plugin",
-  "version": "0.13.1",
+  "version": "0.14.1",
   "description": "StyleX babel plugin.",
   "main": "lib/index.js",
   "repository": {
@@ -21,7 +21,7 @@
     "@babel/traverse": "^7.26.8",
     "@babel/types": "^7.26.8",
     "@dual-bundle/import-meta-resolve": "^4.1.0",
-    "@stylexjs/stylex": "0.13.1",
+    "@stylexjs/stylex": "0.14.1",
     "postcss-value-parser": "^4.1.0"
   },
   "devDependencies": {
@@ -33,7 +33,7 @@
     "@rollup/plugin-replace": "^6.0.1",
     "babel-plugin-syntax-hermes-parser": "^0.26.0",
     "rollup": "^4.24.0",
-    "scripts": "0.13.1"
+    "scripts": "0.14.1"
   },
   "files": [
     "flow_modules/*",