@stylexjs/babel-plugin 0.16.2 → 0.17.0

package/lib/index.js.flow

@@ -7,7 +7,7 @@
  * @flow strict
  */
 
-import type { PluginObj } from '../flow_modules/@babel/core';
+import type { PluginObj } from '@babel/core';
 import type { StyleXOptions } from './utils/state-manager';
 
 export type Options = StyleXOptions;
@@ -45,6 +45,7 @@ export type Rule = [
   },
   number,
 ];
+
 declare function processStylexRules(
   rules: Array<Rule>,
   config?:

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

@@ -33,10 +33,9 @@ export type CompiledStyles = Readonly<{
     | string
     | Readonly<{ [$$Key$$: string]: null | string }>;
 }>;
-export type FlatCompiledStyles = Readonly<{
-  [$$Key$$: string]: string | null;
-  $$css: true | string;
-}>;
+export type FlatCompiledStyles = Readonly<
+  { [$$Key$$: string]: string | null } & { $$css: true | string }
+>;
 export type StyleXOptions = Readonly<{
   classNamePrefix: string;
   debug: null | undefined | boolean;

package/lib/shared/index.d.ts

@@ -34,7 +34,7 @@ import {
   PSEUDO_CLASS_PRIORITIES as _PSEUDO_CLASS_PRIORITIES,
   AT_RULE_PRIORITIES as _AT_RULE_PRIORITIES,
   PSEUDO_ELEMENT_PRIORITY as _PSEUDO_ELEMENT_PRIORITY,
-} from './utils/property-priorities';
+} from '@stylexjs/shared';
 export * as types from './types';
 export * as when from './when/when';
 export declare const create: typeof styleXCreateSet;

package/lib/shared/index.js.flow

@@ -41,7 +41,7 @@ import {
   PSEUDO_CLASS_PRIORITIES as _PSEUDO_CLASS_PRIORITIES,
   AT_RULE_PRIORITIES as _AT_RULE_PRIORITIES,
   PSEUDO_ELEMENT_PRIORITY as _PSEUDO_ELEMENT_PRIORITY,
-} from './utils/property-priorities';
+} from '@stylexjs/shared';
 
 export * as types from './types';
 export * as when from './when/when';

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

@@ -8,6 +8,8 @@
  */
 
 import type { TStyleValue } from '../common-types';
+export declare const LOGICAL_FLOAT_START_VAR: '--stylex-logical-start';
+export declare const LOGICAL_FLOAT_END_VAR: '--stylex-logical-end';
 /**
  * Shorthand properties:
  * - [x] all - Should be banned
@@ -150,6 +152,8 @@ declare const aliases: {
   paddingInline: any;
   scrollMarginBlockStart: (value: TStyleValue) => TReturn;
   scrollMarginBlockEnd: (value: TStyleValue) => TReturn;
+  float: (value: TStyleValue) => TReturn;
+  clear: (value: TStyleValue) => TReturn;
 };
 declare const expansions: Omit<shorthands, keyof (aliases | {})> &
   Omit<aliases, keyof ({})> & {};

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

@@ -9,6 +9,9 @@
 
 import type { TStyleValue } from '../common-types';
 
+declare export const LOGICAL_FLOAT_START_VAR: '--stylex-logical-start';
+declare export const LOGICAL_FLOAT_END_VAR: '--stylex-logical-end';
+
 // TODO: to be added later.
 // const aliases = {
 //   marginInlineStart: (rawValue) => [['marginStart', rawValue]],
@@ -129,6 +132,8 @@ declare const aliases: {
   paddingInline: $FlowFixMe,
   scrollMarginBlockStart: (value: TStyleValue) => TReturn,
   scrollMarginBlockEnd: (value: TStyleValue) => TReturn,
+  float: (value: TStyleValue) => TReturn,
+  clear: (value: TStyleValue) => TReturn,
 };
 
 declare const expansions: { ...shorthands, ...aliases };

package/lib/shared/stylex-create-theme.d.ts

@@ -20,7 +20,7 @@ declare function styleXCreateTheme(
   },
   options?: StyleXOptions,
 ): [
-  { $$css: true; readonly [$$Key$$: string]: string },
+  { $$css: true } & { readonly [$$Key$$: string]: string },
   { [$$Key$$: string]: InjectableStyle },
 ];
 export default styleXCreateTheme;

package/lib/shared/stylex-define-vars.d.ts

@@ -10,17 +10,17 @@
 import type { InjectableStyle, StyleXOptions } from './common-types';
 import type { VarsConfig } from './stylex-vars-utils';
 type VarsKeysWithStringValues<Vars extends VarsConfig> = Readonly<{
-  [$$Key$$: keyof Vars]: string;
+  [$$Key$$ in keyof Vars]: string;
 }>;
 type VarsObject<Vars extends VarsConfig> = Readonly<
-  Omit<VarsKeysWithStringValues<Vars>, keyof ({ __varGroupHash__: string })> & {
+  Omit<VarsKeysWithStringValues<Vars>, keyof { __varGroupHash__: string }> & {
     __varGroupHash__: string;
   }
 >;
 declare function styleXDefineVars<Vars extends VarsConfig>(
   variables: Vars,
   options: Readonly<
-    Omit<Partial<StyleXOptions>, keyof ({ exportId: string })> & {
+    Omit<Partial<StyleXOptions>, keyof { exportId: string }> & {
       exportId: string;
     }
   >,

package/lib/shared/types/index.js.flow

@@ -65,7 +65,7 @@ export interface CSSType<+_T: string | number = string | number> {
 
 declare export const isCSSType: (
   value: mixed,
-) => value is CSSType<string | number>;
+) => implies value is CSSType<string | number>;
 
 type AngleValue = string;
 declare export class Angle<+T: AngleValue>
@@ -79,7 +79,7 @@ declare export class Angle<+T: AngleValue>
 }
 declare export const angle: <T: AngleValue = AngleValue>(
   value: ValueWithDefault,
-  // $FlowIgnore[method-unbinding]
+  // $FlowFixMe[method-unbinding]
 ) => Angle<T>;
 
 type ColorValue = string;
@@ -93,7 +93,7 @@ declare export class Color<+T: ColorValue>
 }
 declare export const color: <T: ColorValue = ColorValue>(
   value: ValueWithDefault,
-  // $FlowIgnore[method-unbinding]
+  // $FlowFixMe[method-unbinding]
 ) => Color<T>;
 
 type URLValue = string;
@@ -123,7 +123,7 @@ declare export class Image<+T: ImageValue>
 }
 declare export const image: <T: ImageValue = ImageValue>(
   value: ValueWithDefault,
-  // $FlowIgnore[method-unbinding]
+  // $FlowFixMe[method-unbinding]
 ) => Image<T>;
 
 type IntegerValue = number;
@@ -157,7 +157,7 @@ declare export class LengthPercentage<+_T: LengthPercentageValue>
 }
 declare export const lengthPercentage: <_T: LengthPercentageValue | number>(
   value: ValueWithDefault,
-  // $FlowIgnore[method-unbinding]
+  // $FlowFixMe[method-unbinding]
 ) => LengthPercentage<string>;
 
 type LengthValue = number | string;
@@ -174,7 +174,7 @@ declare export class Length<+_T: LengthValue>
 }
 declare export const length: <T: LengthValue = LengthValue>(
   value: NestedWithNumbers,
-  // $FlowIgnore[method-unbinding]
+  // $FlowFixMe[method-unbinding]
 ) => Length<T>;
 
 type PercentageValue = string | number;
@@ -191,7 +191,7 @@ declare export class Percentage<+_T: PercentageValue>
 }
 declare export const percentage: <T: PercentageValue = PercentageValue>(
   value: NestedWithNumbers,
-  // $FlowIgnore[method-unbinding]
+  // $FlowFixMe[method-unbinding]
 ) => Percentage<T>;
 
 type NumberValue = number;
@@ -206,7 +206,7 @@ declare export class Num<+T: NumberValue>
 }
 declare export const number: <T: NumberValue = NumberValue>(
   value: NestedWithNumbers,
-  // $FlowIgnore[method-unbinding]
+  // $FlowFixMe[method-unbinding]
 ) => Num<T>;
 
 type ResolutionValue = string | 0;
@@ -223,7 +223,7 @@ declare export class Resolution<+T: ResolutionValue>
 }
 declare export const resolution: <T: ResolutionValue = ResolutionValue>(
   value: ValueWithDefault,
-  // $FlowIgnore[method-unbinding]
+  // $FlowFixMe[method-unbinding]
 ) => Resolution<T>;
 
 type TimeValue = string | 0;
@@ -238,7 +238,7 @@ declare export class Time<+T: TimeValue>
 }
 declare export const time: <T: TimeValue = TimeValue>(
   value: ValueWithDefault,
-  // $FlowIgnore[method-unbinding]
+  // $FlowFixMe[method-unbinding]
 ) => Time<T>;
 
 type TransformFunctionValue = string;
@@ -257,7 +257,7 @@ declare export const transformFunction: <
   T: TransformFunctionValue = TransformFunctionValue,
 >(
   value: ValueWithDefault,
-  // $FlowIgnore[method-unbinding]
+  // $FlowFixMe[method-unbinding]
 ) => TransformFunction<T>;
 
 type TransformListValue = string;
@@ -276,5 +276,5 @@ declare export const transformList: <
   T: TransformListValue = TransformListValue,
 >(
   value: ValueWithDefault,
-  // $FlowIgnore[method-unbinding]
+  // $FlowFixMe[method-unbinding]
 ) => TransformList<T>;

package/lib/shared/utils/object-utils.js.flow

@@ -14,7 +14,7 @@ import type { CompiledStyles } from '../common-types';
 // eslint-disable-next-line no-unused-vars
 type AnyObject = { +[string]: mixed };
 
-declare export function isPlainObject(obj: mixed): obj is AnyObject;
+declare export function isPlainObject(obj: mixed): implies obj is AnyObject;
 
 declare export function flattenObject(obj: CompiledStyles): {
   +[string]: null | string,

package/lib/shared/when/when.d.ts

@@ -17,7 +17,7 @@ import type { StyleXOptions } from '../common-types';
  * @returns A :where() clause for the ancestor observer
  */
 export declare function ancestor(
-  pseudo: string,
+  pseudo: `:${string}`,
   options: string | StyleXOptions,
 ): string;
 /**
@@ -28,7 +28,7 @@ export declare function ancestor(
  * @returns A :has() clause for the descendant observer
  */
 export declare function descendant(
-  pseudo: string,
+  pseudo: `:${string}`,
   options: string | StyleXOptions,
 ): string;
 /**
@@ -39,7 +39,7 @@ export declare function descendant(
  * @returns A :where() clause for the previous sibling observer
  */
 export declare function siblingBefore(
-  pseudo: string,
+  pseudo: `:${string}`,
   options: string | StyleXOptions,
 ): string;
 /**
@@ -50,7 +50,7 @@ export declare function siblingBefore(
  * @returns A :has() clause for the next sibling observer
  */
 export declare function siblingAfter(
-  pseudo: string,
+  pseudo: `:${string}`,
   options: string | StyleXOptions,
 ): string;
 /**
@@ -61,6 +61,6 @@ export declare function siblingAfter(
  * @returns A :where() clause for the any sibling observer
  */
 export declare function anySibling(
-  pseudo: string,
+  pseudo: `:${string}`,
   options: string | StyleXOptions,
 ): string;

package/lib/shared/when/when.js.flow

@@ -18,7 +18,7 @@ import type { StyleXOptions } from '../common-types';
  * @returns A :where() clause for the ancestor observer
  */
 declare export function ancestor(
-  pseudo: string,
+  pseudo: StringPrefix<':'>,
   options: string | StyleXOptions,
 ): string;
 
@@ -30,7 +30,7 @@ declare export function ancestor(
  * @returns A :has() clause for the descendant observer
  */
 declare export function descendant(
-  pseudo: string,
+  pseudo: StringPrefix<':'>,
   options: string | StyleXOptions,
 ): string;
 
@@ -42,7 +42,7 @@ declare export function descendant(
  * @returns A :where() clause for the previous sibling observer
  */
 declare export function siblingBefore(
-  pseudo: string,
+  pseudo: StringPrefix<':'>,
   options: string | StyleXOptions,
 ): string;
 
@@ -54,7 +54,7 @@ declare export function siblingBefore(
  * @returns A :has() clause for the next sibling observer
  */
 declare export function siblingAfter(
-  pseudo: string,
+  pseudo: StringPrefix<':'>,
   options: string | StyleXOptions,
 ): string;
 
@@ -66,6 +66,6 @@ declare export function siblingAfter(
  * @returns A :where() clause for the any sibling observer
  */
 declare export function anySibling(
-  pseudo: string,
+  pseudo: StringPrefix<':'>,
   options: string | StyleXOptions,
 ): string;

package/lib/utils/add-sourcemap-data.js.flow

@@ -7,10 +7,10 @@
  * @flow strict
  */
 
-import type { NodePath } from '../../flow_modules/@babel/traverse';
+import type { NodePath } from '@babel/traverse';
 import type { CompiledNamespaces } from '../shared';
 
-import * as t from '../../flow_modules/@babel/types';
+import * as t from '@babel/types';
 import StateManager from './state-manager';
 
 /**

package/lib/utils/ast-helpers.js.flow

@@ -7,14 +7,14 @@
  * @flow strict
  */
 
-import type { ImportOptions } from '../../flow_modules/@babel/helper-module-imports';
-import type { NodePath } from '../../flow_modules/@babel/traverse';
+import type { ImportOptions } from '@babel/helper-module-imports';
+import type { NodePath } from '@babel/traverse';
 type ImportAdditionOptions = Omit<
   Partial<ImportOptions>,
   'ensureLiveReference' | 'ensureNoContext',
 >;
 
-import * as t from '../../flow_modules/@babel/types';
+import * as t from '@babel/types';
 
 declare export function hoistExpression(
   path: NodePath<>,

package/lib/utils/evaluate-path.d.ts

@@ -34,6 +34,7 @@ export type FunctionConfig = {
       };
     };
   };
+  disableImports?: boolean;
 };
 type Result =
   | { resolved: true; value: any }

package/lib/utils/evaluate-path.js.flow

@@ -21,9 +21,9 @@
  * - It can handle object spreads when the spread value itself is statically evaluated.
  */
 
-import type { NodePath } from '../../flow_modules/@babel/traverse';
+import type { NodePath } from '@babel/traverse';
 
-import * as t from '../../flow_modules/@babel/types';
+import * as t from '@babel/types';
 import StateManager from './state-manager';
 export type FunctionConfig = {
   identifiers: {
@@ -37,6 +37,7 @@ export type FunctionConfig = {
       },
     },
   },
+  disableImports?: boolean,
 };
 
 type Result =

package/lib/utils/js-to-ast.d.ts

@@ -7,7 +7,6 @@
  *
  */
 
-import type { FlatCompiledStyles } from '../shared/common-types';
 import * as t from '@babel/types';
 type NestedStringObject = Readonly<{
   [key: string]: string | number | null | boolean | NestedStringObject;
@@ -15,6 +14,3 @@ type NestedStringObject = Readonly<{
 export declare function convertObjectToAST(
   obj: NestedStringObject,
 ): t.ObjectExpression;
-export declare function removeObjectsWithSpreads(obj: {
-  readonly [$$Key$$: string]: FlatCompiledStyles;
-}): { readonly [$$Key$$: string]: FlatCompiledStyles };

package/lib/utils/js-to-ast.js.flow

@@ -7,9 +7,7 @@
  * @flow strict
  */
 
-import type { FlatCompiledStyles } from '../shared/common-types';
-
-import * as t from '../../flow_modules/@babel/types';
+import * as t from '@babel/types';
 
 type NestedStringObject = $ReadOnly<{
   [key: string]: string | number | null | boolean | NestedStringObject,
@@ -18,7 +16,3 @@ type NestedStringObject = $ReadOnly<{
 declare export function convertObjectToAST(
   obj: NestedStringObject,
 ): t.ObjectExpression;
-
-declare export function removeObjectsWithSpreads(obj: {
-  +[string]: FlatCompiledStyles,
-}): { +[string]: FlatCompiledStyles };

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

@@ -28,6 +28,19 @@ type ModuleResolution =
       type: 'experimental_crossFileParsing';
       rootDir?: string;
       themeFileExtension?: null | undefined | string;
+    }>
+  | Readonly<{
+      type: 'custom';
+      themeFileExtension?: null | undefined | string;
+      filePathResolver: (
+        importPath: string,
+        sourceFilePath: string,
+        aliases:
+          | null
+          | undefined
+          | Readonly<{ [$$Key$$: string]: ReadonlyArray<string> }>,
+      ) => string | void;
+      getCanonicalFilePath: (filePath: string) => string;
     }>;
 export type StyleXOptions = Readonly<
   Omit<
@@ -119,6 +132,7 @@ declare class StateManager {
   readonly stylexKeyframesImport: Set<string>;
   readonly stylexPositionTryImport: Set<string>;
   readonly stylexDefineVarsImport: Set<string>;
+  readonly stylexDefineMarkerImport: Set<string>;
   readonly stylexDefineConstsImport: Set<string>;
   readonly stylexCreateThemeImport: Set<string>;
   readonly stylexTypesImport: Set<string>;
@@ -158,36 +172,40 @@ declare class StateManager {
   getCanonicalFilePath(filePath: string): string;
   importPathResolver(importPath: string): ImportPathResolution;
   addStyle(
-    style: [
-      string,
-      (
-        | { ltr: string; rtl?: string | null }
-        | {
-            constKey: string;
-            constVal: string | number;
-            rtl?: string | null;
-            ltr: string;
-          }
-      ),
-      number,
-    ],
-  ): void;
-  registerStyles(
-    styles: ReadonlyArray<
+    style: Readonly<
       [
         string,
         (
-          | { ltr: string; rtl?: string | null }
-          | {
+          | Readonly<{ ltr: string; rtl?: string | null }>
+          | Readonly<{
               constKey: string;
               constVal: string | number;
               rtl?: string | null;
               ltr: string;
-            }
+            }>
         ),
         number,
       ]
     >,
+  ): void;
+  registerStyles(
+    styles: ReadonlyArray<
+      Readonly<
+        [
+          string,
+          (
+            | Readonly<{ ltr: string; rtl?: string | null }>
+            | Readonly<{
+                constKey: string;
+                constVal: string | number;
+                rtl?: string | null;
+                ltr: string;
+              }>
+          ),
+          number,
+        ]
+      >
+    >,
     path?: null | undefined | NodePath,
   ): void;
   markComposedNamespace(

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

@@ -7,13 +7,13 @@
  * @flow strict
  */
 
-import type { PluginPass } from '../../flow_modules/@babel/core';
-import type { NodePath } from '../../flow_modules/@babel/traverse';
+import type { PluginPass } from '@babel/core';
+import type { NodePath } from '@babel/traverse';
 import type {
   CompiledNamespaces,
   StyleXOptions as RuntimeOptions,
 } from '../shared';
-import * as t from '../../flow_modules/@babel/types';
+import * as t from '@babel/types';
 export type ImportPathResolution =
   | false
   | ['themeNameRef' | 'filePath', string];
@@ -32,6 +32,16 @@ type ModuleResolution =
       type: 'experimental_crossFileParsing',
       rootDir?: string,
       themeFileExtension?: ?string,
+    }>
+  | $ReadOnly<{
+      type: 'custom',
+      themeFileExtension?: ?string,
+      filePathResolver: (
+        importPath: string,
+        sourceFilePath: string,
+        aliases: ?$ReadOnly<{ [string]: $ReadOnlyArray<string> }>,
+      ) => string | void,
+      getCanonicalFilePath: (filePath: string) => string,
     }>;
 
 export type StyleXOptions = $ReadOnly<{
@@ -76,6 +86,7 @@ declare export default class StateManager {
   +stylexKeyframesImport: Set<string>;
   +stylexPositionTryImport: Set<string>;
   +stylexDefineVarsImport: Set<string>;
+  +stylexDefineMarkerImport: Set<string>;
   +stylexDefineConstsImport: Set<string>;
   +stylexCreateThemeImport: Set<string>;
   +stylexTypesImport: Set<string>;
@@ -110,36 +121,40 @@ declare export default class StateManager {
   getCanonicalFilePath(filePath: string): string;
   importPathResolver(importPath: string): ImportPathResolution;
   addStyle(
-    style: [
-      string,
-      (
-        | { ltr: string, rtl?: string | null }
-        | {
-            constKey: string,
-            constVal: string | number,
-            rtl?: string | null,
-            ltr: string,
-          }
-      ),
-      number,
-    ],
-  ): void;
-  registerStyles(
-    styles: $ReadOnlyArray<
+    style: $ReadOnly<
       [
         string,
         (
-          | { ltr: string, rtl?: string | null }
-          | {
+          | $ReadOnly<{ ltr: string, rtl?: string | null }>
+          | $ReadOnly<{
               constKey: string,
               constVal: string | number,
               rtl?: string | null,
               ltr: string,
-            }
+            }>
         ),
         number,
       ],
     >,
+  ): void;
+  registerStyles(
+    styles: $ReadOnlyArray<
+      $ReadOnly<
+        [
+          string,
+          (
+            | $ReadOnly<{ ltr: string, rtl?: string | null }>
+            | $ReadOnly<{
+                constKey: string,
+                constVal: string | number,
+                rtl?: string | null,
+                ltr: string,
+              }>
+          ),
+          number,
+        ],
+      >,
+    >,
     path?: ?NodePath<>,
   ): void;
   markComposedNamespace(

package/lib/utils/validate.d.ts

@@ -22,6 +22,7 @@ export declare const string: PrimitiveChecker<string>;
 export declare const nullish: PrimitiveChecker<null | void>;
 export declare const boolean: PrimitiveChecker<boolean>;
 export declare const number: PrimitiveChecker<number>;
+export declare const func: <T extends Function>(msg?: Msg) => Check<T>;
 export declare const literal: <T extends string | number | boolean>(
   $$PARAM_0$$: T,
   msg?: Msg,

package/lib/utils/validate.js.flow

@@ -21,6 +21,8 @@ declare export const boolean: PrimitiveChecker<boolean>;
 
 declare export const number: PrimitiveChecker<number>;
 
+declare export const func: <T: Function>(msg?: Msg) => Check<T>;
+
 declare export const literal: <T: string | number | boolean>(
   T,
   msg?: Msg,

package/lib/visitors/imports.js.flow

@@ -7,9 +7,9 @@
  * @flow strict
  */
 
-import type { NodePath } from '../../flow_modules/@babel/traverse';
+import type { NodePath } from '@babel/traverse';
 
-import * as t from '../../flow_modules/@babel/types';
+import * as t from '@babel/types';
 import StateManager from '../utils/state-manager';
 
 // Read imports of react and remember the name of the local variables for later

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

@@ -8,10 +8,10 @@
  */
 
 /* eslint-disable no-unused-vars */
-import type { NodePath } from '../../flow_modules/@babel/traverse';
+import type { NodePath } from '@babel/traverse';
 import type { FunctionConfig } from '../utils/evaluate-path';
 
-import * as t from '../../flow_modules/@babel/types';
+import * as t from '@babel/types';
 import StateManager from '../utils/state-manager';
 type TInlineStyles = {
   [string]: {

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

@@ -7,8 +7,8 @@
  * @flow strict
  */
 
-import type { NodePath } from '../../flow_modules/@babel/traverse';
-import * as t from '../../flow_modules/@babel/types';
+import type { NodePath } from '@babel/traverse';
+import * as t from '@babel/types';
 import StateManager from '../utils/state-manager';
 /// This function looks for `stylex.createTheme` calls and transforms them.
 /// 1. It finds the first two arguments to `stylex.createTheme` and validates those.