@stylexjs/babel-plugin 0.12.0 → 0.13.0

package/lib/shared/utils/property-priorities.js.flow

@@ -0,0 +1,78 @@
+/**
+ * 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
+ */
+
+// type PseudoClassPriorities = {
+//   ':is': 40,
+//   ':where': 40,
+//   ':not': 40,
+//   ':has': 45,
+//   ':dir': 50,
+//   ':lang': 51,
+//   ':first-child': 52,
+//   ':first-of-type': 53,
+//   ':last-child': 54,
+//   ':last-of-type': 55,
+//   ':only-child': 56,
+//   ':only-of-type': 57,
+//   ':nth-child': 60,
+//   ':nth-last-child': 61,
+//   ':nth-of-type': 62,
+//   ':nth-last-of-type': 63, // 'nth-last-of-type' is the same priority as 'nth-of-type
+//   ':empty': 70,
+//   ':link': 80,
+//   ':any-link': 81,
+//   ':local-link': 82,
+//   ':target-within': 83,
+//   ':target': 84,
+//   ':visited': 85,
+//   ':enabled': 91,
+//   ':disabled': 92,
+//   ':required': 93,
+//   ':optional': 94,
+//   ':read-only': 95,
+//   ':read-write': 96,
+//   ':placeholder-shown': 97,
+//   ':in-range': 98,
+//   ':out-of-range': 99,
+//   ':default': 100,
+//   ':checked': 101,
+//   ':indeterminate': 101,
+//   ':blank': 102,
+//   ':valid': 103,
+//   ':invalid': 104,
+//   ':user-invalid': 105,
+//   ':autofill': 110,
+//   ':picture-in-picture': 120,
+//   ':modal': 121,
+//   ':fullscreen': 122,
+//   ':paused': 123,
+//   ':playing': 124,
+//   ':current': 125,
+//   ':past': 126,
+//   ':future': 127,
+//   ':hover': 130,
+//   ':focusWithin': 140,
+//   ':focus': 150,
+//   ':focusVisible': 160,
+//   ':active': 170,
+// };
+
+declare export const PSEUDO_CLASS_PRIORITIES: $ReadOnly<{ [string]: number }>;
+
+type AtRulePriorities = {
+  '@supports': 30,
+  '@media': 200,
+  '@container': 300,
+};
+
+declare export const AT_RULE_PRIORITIES: $ReadOnly<AtRulePriorities>;
+
+declare export const PSEUDO_ELEMENT_PRIORITY: number;
+
+declare export default function getPriority(key: string): number;

package/lib/shared/utils/rule-utils.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 const sortPseudos: (
+  pseudos: ReadonlyArray<string>,
+) => ReadonlyArray<string>;
+export declare const sortAtRules: (
+  atRules: ReadonlyArray<string>,
+) => ReadonlyArray<string>;

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

@@ -0,0 +1,16 @@
+/**
+ * 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 const sortPseudos: (
+  pseudos: $ReadOnlyArray<string>,
+) => $ReadOnlyArray<string>;
+
+declare export const sortAtRules: (
+  atRules: $ReadOnlyArray<string>,
+) => $ReadOnlyArray<string>;

package/lib/shared/utils/split-css-value.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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 { TStyleValue } from '../common-types';
+declare function splitValue(
+  str: TStyleValue,
+): ReadonlyArray<number | string | null>;
+export default splitValue;

package/lib/shared/utils/split-css-value.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
+ */
+
+import type { TStyleValue } from '../common-types';
+
+// Using split(' ') Isn't enough because of values like calc.
+declare export default function splitValue(
+  str: TStyleValue,
+): $ReadOnlyArray<number | string | null>;

package/lib/shared/utils/transform-value.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 { StyleXOptions } from '../common-types';
+/**
+ * Convert a CSS value in JS to the final CSS string value
+ */
+declare function transformValue(
+  key: string,
+  rawValue: string | number,
+  options: StyleXOptions,
+): string;
+export default transformValue;
+export declare function getNumberSuffix(key: string): string;
+export declare const timeUnits: Set<string>;
+export declare const lengthUnits: Set<string>;

package/lib/shared/utils/transform-value.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 { StyleXOptions } from '../common-types';
+
+/**
+ * Convert a CSS value in JS to the final CSS string value
+ */
+declare export default function transformValue(
+  key: string,
+  rawValue: string | number,
+  options: StyleXOptions,
+): string;
+
+declare export function getNumberSuffix(key: string): string;
+
+declare export const timeUnits: Set<string>;
+
+declare export const lengthUnits: Set<string>;

package/lib/shared/validate.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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 { TRawValue } from './common-types';
+declare function validateEntry($$PARAM_0$$: [string, TRawValue]): void;
+export default validateEntry;

package/lib/shared/validate.js.flow

@@ -0,0 +1,12 @@
+/**
+ * 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 { TRawValue } from './common-types';
+
+declare export default function validateEntry([string, TRawValue]): void;

package/lib/utils/add-sourcemap-data.d.ts

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

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

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

package/lib/utils/dev-classname.d.ts

@@ -7,7 +7,7 @@
  *
  */
 
-import type { CompiledNamespaces } from '@stylexjs/shared';
+import type { CompiledNamespaces } from '../shared';
 import StateManager from './state-manager';
 export declare function namespaceToDevClassName(
   namespace: string,

package/lib/utils/dev-classname.js.flow

@@ -7,7 +7,8 @@
  * @flow strict
  */
 
-import type { CompiledNamespaces } from '@stylexjs/shared';
+import type { CompiledNamespaces } from '../shared';
+
 import StateManager from './state-manager';
 
 // TODO: We will need to maintain the full path to the file eventually

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

@@ -7,6 +7,20 @@
  *
  */
 
+/**
+ * This is a extended version of the path evaluation code from Babel.
+ *
+ * The original can be found at:
+ * https://github.com/babel/babel/blob/main/packages/babel-traverse/src/path/evaluation.ts
+ *
+ * The following extensions were made:
+ * - It can accept a mapping from variable names to functions
+ *   which when encountered will be evaluated instead of deopting.
+ *   - The functions can be configured to accept the raw path instead of
+ *     static values to handle dynamic values.
+ * - It can handle object spreads when the spread value itself is statically evaluated.
+ */
+
 import type { NodePath } from '@babel/traverse';
 import * as t from '@babel/types';
 import StateManager from './state-manager';

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

@@ -7,7 +7,22 @@
  * @flow strict
  */
 
+/**
+ * This is a extended version of the path evaluation code from Babel.
+ *
+ * The original can be found at:
+ * https://github.com/babel/babel/blob/main/packages/babel-traverse/src/path/evaluation.ts
+ *
+ * The following extensions were made:
+ * - It can accept a mapping from variable names to functions
+ *   which when encountered will be evaluated instead of deopting.
+ *   - The functions can be configured to accept the raw path instead of
+ *     static values to handle dynamic values.
+ * - It can handle object spreads when the spread value itself is statically evaluated.
+ */
+
 import type { NodePath } from '../../flow_modules/@babel/traverse';
+
 import * as t from '../../flow_modules/@babel/types';
 import StateManager from './state-manager';
 export type FunctionConfig = {

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

@@ -7,7 +7,7 @@
  *
  */
 
-import type { FlatCompiledStyles } from '../../../shared/src/common-types';
+import type { FlatCompiledStyles } from '../shared/common-types';
 import * as t from '@babel/types';
 type NestedStringObject = Readonly<{
   [key: string]: string | number | null | boolean | NestedStringObject;

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

@@ -7,7 +7,7 @@
  * @flow strict
  */
 
-import type { FlatCompiledStyles } from '../../../shared/src/common-types';
+import type { FlatCompiledStyles } from '../shared/common-types';
 
 import * as t from '../../flow_modules/@babel/types';
 

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

@@ -7,14 +7,14 @@
  *
  */
 
-import * as t from '@babel/types';
 import type { PluginPass } from '@babel/core';
 import type { NodePath } from '@babel/traverse';
 import type {
   CompiledNamespaces,
   StyleXOptions as RuntimeOptions,
-} from '@stylexjs/shared';
+} from '../shared';
 import type { ImportOptions } from '@babel/helper-module-imports';
+import * as t from '@babel/types';
 type ImportAdditionOptions = Omit<
   Partial<ImportOptions>,
   'ensureLiveReference' | 'ensureNoContext'
@@ -45,8 +45,8 @@ export type StyleXOptions = Readonly<
       enableDebugClassNames?: boolean;
       enableDebugDataProp?: boolean;
       enableDevClassNames?: boolean;
+      enableInlinedConditionalMerge: boolean;
       enableMinifiedKeys?: boolean;
-      genConditionalClasses: boolean;
       importSources: ReadonlyArray<
         string | Readonly<{ from: string; as: string }>
       >;
@@ -66,8 +66,8 @@ export type StyleXOptions = Readonly<
     enableDebugClassNames?: boolean;
     enableDebugDataProp?: boolean;
     enableDevClassNames?: boolean;
+    enableInlinedConditionalMerge: boolean;
     enableMinifiedKeys?: boolean;
-    genConditionalClasses: boolean;
     importSources: ReadonlyArray<
       string | Readonly<{ from: string; as: string }>
     >;
@@ -114,7 +114,9 @@ declare class StateManager {
   readonly stylexIncludeImport: Set<string>;
   readonly stylexFirstThatWorksImport: Set<string>;
   readonly stylexKeyframesImport: Set<string>;
+  readonly stylexPositionTryImport: Set<string>;
   readonly stylexDefineVarsImport: Set<string>;
+  readonly stylexDefineConstsImport: Set<string>;
   readonly stylexCreateThemeImport: Set<string>;
   readonly stylexTypesImport: Set<string>;
   injectImportInserted: null | undefined | t.Identifier;
@@ -160,10 +162,36 @@ declare class StateManager {
   ): null | readonly [packageName: string, packageDir: string];
   getCanonicalFilePath(filePath: string): string;
   importPathResolver(importPath: string): ImportPathResolution;
-  addStyle(style: [string, { ltr: string; rtl?: string | null }, number]): void;
+  addStyle(
+    style: [
+      string,
+      (
+        | { ltr: string; rtl?: string | null }
+        | {
+            constKey: string;
+            constVal: string | number;
+            rtl?: string | null;
+            ltr: string;
+          }
+      ),
+      number,
+    ],
+  ): void;
   registerStyles(
     styles: ReadonlyArray<
-      [string, { ltr: string; rtl?: string | null }, number]
+      [
+        string,
+        (
+          | { ltr: string; rtl?: string | null }
+          | {
+              constKey: string;
+              constVal: string | number;
+              rtl?: string | null;
+              ltr: string;
+            }
+        ),
+        number,
+      ]
     >,
     path?: null | undefined | NodePath,
   ): void;

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

@@ -7,14 +7,15 @@
  * @flow strict
  */
 
-import * as t from '../../flow_modules/@babel/types';
 import type { PluginPass } from '../../flow_modules/@babel/core';
 import type { NodePath } from '../../flow_modules/@babel/traverse';
 import type {
   CompiledNamespaces,
   StyleXOptions as RuntimeOptions,
-} from '@stylexjs/shared';
+} from '../shared';
 import type { ImportOptions } from '../../flow_modules/@babel/helper-module-imports';
+
+import * as t from '../../flow_modules/@babel/types';
 type ImportAdditionOptions = Omit<
   Partial<ImportOptions>,
   'ensureLiveReference' | 'ensureNoContext',
@@ -46,8 +47,8 @@ export type StyleXOptions = $ReadOnly<{
   enableDebugClassNames?: boolean,
   enableDebugDataProp?: boolean,
   enableDevClassNames?: boolean,
+  enableInlinedConditionalMerge: boolean,
   enableMinifiedKeys?: boolean,
-  genConditionalClasses: boolean,
   importSources: $ReadOnlyArray<
     string | $ReadOnly<{ from: string, as: string }>,
   >,
@@ -76,7 +77,9 @@ declare export default class StateManager {
   +stylexIncludeImport: Set<string>;
   +stylexFirstThatWorksImport: Set<string>;
   +stylexKeyframesImport: Set<string>;
+  +stylexPositionTryImport: Set<string>;
   +stylexDefineVarsImport: Set<string>;
+  +stylexDefineConstsImport: Set<string>;
   +stylexCreateThemeImport: Set<string>;
   +stylexTypesImport: Set<string>;
   injectImportInserted: ?t.Identifier;
@@ -117,10 +120,36 @@ declare export default class StateManager {
   ): null | [+packageName: string, +packageDir: string];
   getCanonicalFilePath(filePath: string): string;
   importPathResolver(importPath: string): ImportPathResolution;
-  addStyle(style: [string, { ltr: string, rtl?: string | null }, number]): void;
+  addStyle(
+    style: [
+      string,
+      (
+        | { ltr: string, rtl?: string | null }
+        | {
+            constKey: string,
+            constVal: string | number,
+            rtl?: string | null,
+            ltr: string,
+          }
+      ),
+      number,
+    ],
+  ): void;
   registerStyles(
     styles: $ReadOnlyArray<
-      [string, { ltr: string, rtl?: string | null }, number],
+      [
+        string,
+        (
+          | { ltr: string, rtl?: string | null }
+          | {
+              constKey: string,
+              constVal: string | number,
+              rtl?: string | null,
+              ltr: string,
+            }
+        ),
+        number,
+      ],
     >,
     path?: ?NodePath<>,
   ): void;

package/lib/visitors/imports.d.ts

@@ -7,8 +7,8 @@
  *
  */
 
-import * as t from '@babel/types';
 import type { NodePath } from '@babel/traverse';
+import * as t from '@babel/types';
 import StateManager from '../utils/state-manager';
 export declare function readImportDeclarations(
   path: NodePath<t.ImportDeclaration>,

package/lib/visitors/imports.js.flow

@@ -7,8 +7,9 @@
  * @flow strict
  */
 
-import * as t from '../../flow_modules/@babel/types';
 import type { NodePath } from '../../flow_modules/@babel/traverse';
+
+import * as t from '../../flow_modules/@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/{stylex-create/parse-stylex-create-arg.d.ts → parse-stylex-create-arg.d.ts}

@@ -8,9 +8,9 @@
  */
 
 import type { NodePath } from '@babel/traverse';
+import type { FunctionConfig } from '../utils/evaluate-path';
 import * as t from '@babel/types';
-import StateManager from '../../utils/state-manager';
-import { type FunctionConfig } from '../../utils/evaluate-path';
+import StateManager from '../utils/state-manager';
 type TInlineStyles = {
   [$$Key$$: string]: {
     readonly path: ReadonlyArray<string>;

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

@@ -8,10 +8,11 @@
  */
 
 /* 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';
+import type { NodePath } from '../../flow_modules/@babel/traverse';
+import type { FunctionConfig } from '../utils/evaluate-path';
+
+import * as t from '../../flow_modules/@babel/types';
+import StateManager from '../utils/state-manager';
 type TInlineStyles = {
   [string]: {
     +path: $ReadOnlyArray<string>,

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

@@ -7,8 +7,8 @@
  *
  */
 
-import * as t from '@babel/types';
 import type { NodePath } from '@babel/traverse';
+import * as t from '@babel/types';
 import StateManager from '../utils/state-manager';
 declare function transformStyleXCreateTheme(
   callExpressionPath: NodePath<t.CallExpression>,

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

@@ -7,8 +7,8 @@
  * @flow strict
  */
 
-import * as t from '../../flow_modules/@babel/types';
 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.createTheme` calls and transforms them.
 /// 1. It finds the first two arguments to `stylex.createTheme` and validates those.

package/lib/visitors/{stylex-create/index.d.ts → stylex-create.d.ts}

@@ -7,9 +7,9 @@
  *
  */
 
-import * as t from '@babel/types';
 import type { NodePath } from '@babel/traverse';
-import StateManager from '../../utils/state-manager';
+import * as t from '@babel/types';
+import StateManager from '../utils/state-manager';
 declare function transformStyleXCreate(
   path: NodePath<t.CallExpression>,
   state: StateManager,

package/lib/visitors/{stylex-create/index.js.flow → stylex-create.js.flow}

@@ -7,9 +7,9 @@
  * @flow strict
  */
 
-import * as t from '../../../flow_modules/@babel/types';
-import type { NodePath } from '../../../flow_modules/@babel/traverse';
-import StateManager from '../../utils/state-manager';
+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.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)

package/lib/visitors/stylex-define-consts.d.ts

@@ -7,22 +7,9 @@
  *
  */
 
-import * as t from '@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.defineConsts` calls and transforms them.
- *
- * 1. It finds the first argument to `stylex.defineConsts` and validates it.
- * 2. It evaluates the constants object to get a JS object.
- * 3. It uses `styleXDefineConsts` to transform the object into a structured format.
- * 4. It converts the resulting object back into an AST and replaces the function call with it.
- * 5. The transformed constants are stored in metadata and used during rule processing.
- * 6. During CSS rule generation, any references to `var(--keyhash)` (or `var(--keyhash, fallback)`)
- *    are replaced with their corresponding `constVal` from `defineConsts`.
- * 7. Unlike `stylex.defineVars`, `defineConsts` does not generate runtime CSS variables but instead
- *    directly inlines the resolved values into the final CSS output.
- */
 declare function transformStyleXDefineConsts(
   callExpressionPath: NodePath<t.CallExpression>,
   state: StateManager,

package/lib/visitors/stylex-define-consts.js.flow

@@ -7,23 +7,18 @@
  * @flow strict
  */
 
-import * as t from '../../flow_modules/@babel/types';
 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.defineConsts` calls and transforms them.
- *
- * 1. It finds the first argument to `stylex.defineConsts` and validates it.
- * 2. It evaluates the constants object to get a JS object.
- * 3. It uses `styleXDefineConsts` to transform the object into a structured format.
- * 4. It converts the resulting object back into an AST and replaces the function call with it.
- * 5. The transformed constants are stored in metadata and used during rule processing.
- * 6. During CSS rule generation, any references to `var(--keyhash)` (or `var(--keyhash, fallback)`)
- *    are replaced with their corresponding `constVal` from `defineConsts`.
- * 7. Unlike `stylex.defineVars`, `defineConsts` does not generate runtime CSS variables but instead
- *    directly inlines the resolved values into the final CSS output.
- */
+/// This function looks for `stylex.defineConsts` calls and transforms them.
+/// 1. It finds and validates the first argument to `stylex.defineConsts`.
+/// 2. It evaluates the style const object to a JS value, erroring on non-static or non-object values.
+/// 3. It generates a theme name from the filename and export name for hashing.
+/// 4. It invokes `stylexDefineConsts` to transform the JS object and collect injected styles.
+/// 5. It creates a map of key-value pairs of constants to be inlined.
+/// 6. It replaces the call with the transformed AST and registers the styles in state.
 declare export default function transformStyleXDefineConsts(
   callExpressionPath: NodePath<t.CallExpression>,
   state: StateManager,