@stylexjs/babel-plugin 0.13.0 → 0.14.0

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

@@ -33,3 +33,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

@@ -38,3 +38,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/genCSSRule.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+export declare function genCSSRule(
+  className: string,
+  decls: string,
+  pseudos: ReadonlyArray<string>,
+  atRules: ReadonlyArray<string>,
+): string;

package/lib/shared/utils/genCSSRule.js.flow

@@ -0,0 +1,15 @@
+/**
+ * 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
+ */
+
+declare export function genCSSRule(
+  className: string,
+  decls: string,
+  pseudos: $ReadOnlyArray<string>,
+  atRules: $ReadOnlyArray<string>,
+): string;

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-attrs.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 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';
+export declare function skipStylexAttrsChildren(
+  path: NodePath<t.CallExpression>,
+  state: StateManager,
+): void;
+declare function transformStylexAttrs(
+  path: NodePath<t.CallExpression>,
+  state: StateManager,
+): void;
+export default transformStylexAttrs;

package/lib/visitors/stylex-attrs.js.flow

@@ -0,0 +1,25 @@
+/**
+ * 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';
+declare export function skipStylexAttrsChildren(
+  path: NodePath<t.CallExpression>,
+  state: StateManager,
+): void;
+
+// If a `stylex()` call uses styles that are all locally defined,
+// This function is able to pre-compute that into a single string or
+// a single expression of strings and ternary expressions.
+declare export default function transformStylexAttrs(
+  path: NodePath<t.CallExpression>,
+  state: StateManager,
+): void;

package/lib/visitors/stylex-create/index.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 * as t from '@babel/types';
+import type { NodePath } from '@babel/traverse';
+import StateManager from '../../utils/state-manager';
+declare function transformStyleXCreate(
+  path: NodePath<t.CallExpression>,
+  state: StateManager,
+): void;
+export default transformStyleXCreate;

package/lib/visitors/stylex-create/index.js.flow

@@ -0,0 +1,24 @@
+/**
+ * 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 * as t from '../../../flow_modules/@babel/types';
+import type { NodePath } from '../../../flow_modules/@babel/traverse';
+import StateManager from '../../utils/state-manager';
+/// This function looks for `stylex.create` calls and transforms them.
+/// 1. It finds the first argument to `stylex.create` and validates it.
+/// 2. It pre-processes valid-dynamic parts of style object such as custom presets (spreads)
+/// 3. It evaluates the style object to get a JS object. This also handles local constants automatically.
+/// 4. It uses the `stylexCreate` from `@stylexjs/shared` to transform the JS
+///    object and to get a list of injected styles.
+/// 5. It converts the resulting Object back into an AST and replaces the call with it.
+/// 6. It also inserts `stylex.inject` calls above the current statement as needed.
+declare export default function transformStyleXCreate(
+  path: NodePath<t.CallExpression>,
+  state: StateManager,
+): void;

package/lib/visitors/stylex-create/parse-stylex-create-arg.d.ts

@@ -0,0 +1,37 @@
+/**
+ * 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';
+import { type FunctionConfig } from '../../utils/evaluate-path';
+type TInlineStyles = {
+  [$$Key$$: string]: {
+    readonly path: ReadonlyArray<string>;
+    readonly originalExpression: t.Expression;
+    readonly expression: t.Expression | t.PatternLike;
+  };
+};
+type DynamicFns = {
+  [$$Key$$: string]: readonly [
+    params: Array<t.Identifier>,
+    inlineStyles: Readonly<TInlineStyles>,
+  ];
+};
+export declare function evaluateStyleXCreateArg(
+  path: NodePath,
+  traversalState: StateManager,
+  functions: FunctionConfig,
+): Readonly<{
+  confident: boolean;
+  value: any;
+  deopt?: null | NodePath;
+  reason?: string;
+  fns?: DynamicFns;
+}>;

package/lib/visitors/stylex-create/parse-stylex-create-arg.js.flow

@@ -0,0 +1,41 @@
+/**
+ * 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
+ */
+
+/* eslint-disable no-unused-vars */
+import type { NodePath } from '../../../flow_modules/@babel/traverse';
+import * as t from '../../../flow_modules/@babel/types';
+import StateManager from '../../utils/state-manager';
+import { type FunctionConfig } from '../../utils/evaluate-path';
+type TInlineStyles = {
+  [string]: {
+    +path: $ReadOnlyArray<string>,
+    +originalExpression: t.Expression,
+    +expression: t.Expression | t.PatternLike,
+  },
+};
+
+type DynamicFns = {
+  [string]: [
+    +params: Array<t.Identifier>,
+    +inlineStyles: $ReadOnly<TInlineStyles>,
+  ],
+};
+
+// This
+declare export function evaluateStyleXCreateArg(
+  path: NodePath<>,
+  traversalState: StateManager,
+  functions: FunctionConfig,
+): $ReadOnly<{
+  confident: boolean,
+  value: any,
+  deopt?: null | NodePath<>,
+  reason?: string,
+  fns?: DynamicFns,
+}>;

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.0",
+  "version": "0.14.0",
   "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.0",
+    "@stylexjs/stylex": "0.14.0",
     "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.0"
+    "scripts": "0.14.0"
   },
   "files": [
     "flow_modules/*",