@stylexjs/babel-plugin 0.2.0-beta.16 → 0.2.0-beta.18

package/lib/index.js.flow

@@ -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.
+ *
+ * @flow strict
+ */
+
+import type { PluginObj } from '../flow_modules/@babel/core';
+/**
+ * Entry point for the StyleX babel plugin.
+ */
+declare export default function styleXTransform(): PluginObj<>;

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

@@ -0,0 +1,26 @@
+/**
+ * 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 { CompiledNamespaces } from '@stylexjs/shared';
+import StateManager from './state-manager';
+export declare function namespaceToDevClassName(
+  namespace: string,
+  varName: null | string,
+  filename: string,
+): string;
+export declare function injectDevClassNames(
+  obj: CompiledNamespaces,
+  varName: null | string,
+  state: StateManager,
+): CompiledNamespaces;
+export declare function convertToTestStyles(
+  obj: CompiledNamespaces,
+  varName: null | string,
+  state: StateManager,
+): CompiledNamespaces;

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

@@ -0,0 +1,31 @@
+/**
+ * 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 { CompiledNamespaces } from '@stylexjs/shared';
+import StateManager from './state-manager';
+
+// TODO: We will need to maintain the full path to the file eventually
+// Perhaps this can be an option that is passed in.
+declare export function namespaceToDevClassName(
+  namespace: string,
+  varName: null | string,
+  filename: string,
+): string;
+
+declare export function injectDevClassNames(
+  obj: CompiledNamespaces,
+  varName: null | string,
+  state: StateManager,
+): CompiledNamespaces;
+
+declare export function convertToTestStyles(
+  obj: CompiledNamespaces,
+  varName: null | string,
+  state: StateManager,
+): CompiledNamespaces;

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

@@ -0,0 +1,45 @@
+/**
+ * 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 StateManager from './state-manager';
+export type FunctionConfig = {
+  identifiers: {
+    [fnName: string]: { fn: (...args: any[]) => any; takesPath?: boolean };
+  };
+  memberExpressions: {
+    [key: string]: {
+      [memberName: string]: {
+        fn: (...args: any[]) => any;
+        takesPath?: boolean;
+      };
+    };
+  };
+};
+/**
+ * Walk the input `node` and statically evaluate it.
+ *
+ * Returns an object in the form `{ confident, value, deopt }`. `confident`
+ * indicates whether or not we had to drop out of evaluating the expression
+ * because of hitting an unknown node that we couldn't confidently find the
+ * value of, in which case `deopt` is the path of said node.
+ *
+ * Example:
+ *
+ *   evaluate(parse("5 + 5")) // { confident: true, value: 10 }
+ *   evaluate(parse("!true")) // { confident: true, value: false }
+ *   evaluate(parse("foo + foo")) // { confident: false, value: undefined, deopt: NodePath }
+ *
+ */
+
+export declare function evaluate(
+  path: NodePath,
+  traversalState: StateManager,
+  functions: FunctionConfig,
+): { confident: boolean; value: any; deopt?: null | NodePath };

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

@@ -0,0 +1,53 @@
+/**
+ * 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 StateManager from './state-manager';
+export type FunctionConfig = {
+  identifiers: {
+    [fnName: string]: {
+      fn: (...args: any[]) => any,
+      takesPath?: boolean,
+    },
+  },
+  memberExpressions: {
+    [key: string]: {
+      [memberName: string]: {
+        fn: (...args: any[]) => any,
+        takesPath?: boolean,
+      },
+    },
+  },
+};
+
+/**
+ * Walk the input `node` and statically evaluate it.
+ *
+ * Returns an object in the form `{ confident, value, deopt }`. `confident`
+ * indicates whether or not we had to drop out of evaluating the expression
+ * because of hitting an unknown node that we couldn't confidently find the
+ * value of, in which case `deopt` is the path of said node.
+ *
+ * Example:
+ *
+ *   evaluate(parse("5 + 5")) // { confident: true, value: 10 }
+ *   evaluate(parse("!true")) // { confident: true, value: false }
+ *   evaluate(parse("foo + foo")) // { confident: false, value: undefined, deopt: NodePath }
+ *
+ */
+
+declare export function evaluate(
+  path: NodePath<>,
+  traversalState: StateManager,
+  functions: FunctionConfig,
+): {
+  confident: boolean,
+  value: any,
+  deopt?: null | NodePath<>,
+};

package/lib/utils/helpers.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.
+ *
+ *
+ */
+
+export declare function removeNulls<T>(
+  arr: Array<null | undefined | T>,
+): Array<T>;

package/lib/utils/helpers.js.flow

@@ -0,0 +1,10 @@
+/**
+ * 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 removeNulls<T>(arr: Array<?T>): Array<T>;

package/lib/utils/js-to-ast.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 { IncludedStyles } from '@stylexjs/shared';
+type NestedStringObject = Readonly<{
+  [key: string]: string | null | boolean | NestedStringObject | IncludedStyles;
+}>;
+export declare function convertObjectToAST(
+  obj: NestedStringObject,
+): t.ObjectExpression;

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

@@ -0,0 +1,19 @@
+/**
+ * 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 { IncludedStyles } from '@stylexjs/shared';
+
+type NestedStringObject = $ReadOnly<{
+  [key: string]: string | null | boolean | NestedStringObject | IncludedStyles,
+}>;
+
+declare export function convertObjectToAST(
+  obj: NestedStringObject,
+): t.ObjectExpression;

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

@@ -0,0 +1,66 @@
+/**
+ * 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 { PluginPass } from '@babel/core';
+import type { NodePath } from '@babel/traverse';
+import type {
+  CompiledNamespaces,
+  StyleXOptions as RuntimeOptions,
+} from '@stylexjs/shared';
+export type ImportPathResolution =
+  | false
+  | ['themeNameRef' | 'filePath', string];
+type ModuleResolution =
+  | { type: 'commonJS'; rootDir: string; themeFileExtension?: string }
+  | { type: 'haste'; themeFileExtension?: string }
+  | {
+      type: 'experimental_crossFileParsing';
+      rootDir: string;
+      themeFileExtension?: string;
+    };
+type StyleXOptions = Omit<
+  RuntimeOptions,
+  keyof ({
+    importSources: Array<string>;
+    genConditionalClasses: boolean;
+    unstable_moduleResolution: void | ModuleResolution;
+  })
+> & {
+  importSources: Array<string>;
+  genConditionalClasses: boolean;
+  unstable_moduleResolution: void | ModuleResolution;
+};
+declare class StateManager {
+  readonly _state: PluginPass;
+  readonly stylexImport: Set<string>;
+  readonly stylexCreateImport: Set<string>;
+  readonly stylexIncludeImport: Set<string>;
+  readonly stylexFirstThatWorksImport: Set<string>;
+  readonly stylexKeyframesImport: Set<string>;
+  readonly stylexCreateVarsImport: Set<string>;
+  readonly stylexOverrideVarsImport: Set<string>;
+  readonly styleMap: Map<string, CompiledNamespaces>;
+  readonly styleVars: Map<string, NodePath>;
+  readonly styleVarsToKeep: Set<[string, null | string]>;
+  inStyleXCreate: boolean;
+  constructor(state: PluginPass);
+  get options(): StyleXOptions;
+  get canReferenceTheme(): boolean;
+  get metadata(): { [key: string]: any };
+  get stylexSheetName(): string | void;
+  get isDev(): boolean;
+  get isTest(): boolean;
+  get filename(): string | void;
+  get cssVars(): any;
+  get fileNameForHashing(): null | string;
+  importPathResolver(importPath: string): ImportPathResolution;
+  addStyle(style: [string, { ltr: string; rtl?: string | null }, number]): void;
+  markComposedNamespace(memberExpression: [string, null | string]): void;
+}
+export default StateManager;

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

@@ -0,0 +1,70 @@
+/**
+ * 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 { PluginPass } from '../../flow_modules/@babel/core';
+import type { NodePath } from '../../flow_modules/@babel/traverse';
+import type {
+  CompiledNamespaces,
+  StyleXOptions as RuntimeOptions,
+} from '@stylexjs/shared';
+export type ImportPathResolution =
+  | false
+  | ['themeNameRef' | 'filePath', string];
+
+type ModuleResolution =
+  | {
+      type: 'commonJS',
+      rootDir: string,
+      themeFileExtension?: string,
+    }
+  | {
+      type: 'haste',
+      themeFileExtension?: string,
+    }
+  | {
+      type: 'experimental_crossFileParsing',
+      rootDir: string,
+      themeFileExtension?: string,
+    };
+
+type StyleXOptions = {
+  ...RuntimeOptions,
+  importSources: Array<string>,
+  genConditionalClasses: boolean,
+  unstable_moduleResolution: void | ModuleResolution,
+  ...
+};
+
+declare export default class StateManager {
+  +_state: PluginPass;
+  +stylexImport: Set<string>;
+  +stylexCreateImport: Set<string>;
+  +stylexIncludeImport: Set<string>;
+  +stylexFirstThatWorksImport: Set<string>;
+  +stylexKeyframesImport: Set<string>;
+  +stylexCreateVarsImport: Set<string>;
+  +stylexOverrideVarsImport: Set<string>;
+  +styleMap: Map<string, CompiledNamespaces>;
+  +styleVars: Map<string, NodePath<>>;
+  +styleVarsToKeep: Set<[string, null | string]>;
+  inStyleXCreate: boolean;
+  constructor(state: PluginPass): void;
+  get options(): StyleXOptions;
+  get canReferenceTheme(): boolean;
+  get metadata(): { [key: string]: any };
+  get stylexSheetName(): string | void;
+  get isDev(): boolean;
+  get isTest(): boolean;
+  get filename(): string | void;
+  get cssVars(): any;
+  get fileNameForHashing(): null | string;
+  importPathResolver(importPath: string): ImportPathResolution;
+  addStyle(style: [string, { ltr: string, rtl?: string | null }, number]): void;
+  markComposedNamespace(memberExpression: [string, null | string]): void;
+}

package/lib/visitors/imports.d.ts

@@ -0,0 +1,20 @@
+/**
+ * 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';
+export declare function readImportDeclarations(
+  path: NodePath<t.ImportDeclaration>,
+  state: StateManager,
+): void;
+export declare function readRequires(
+  path: NodePath<t.VariableDeclarator>,
+  state: StateManager,
+): void;

package/lib/visitors/imports.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';
+
+// Read imports of react and remember the name of the local varsiables for later
+declare export function readImportDeclarations(
+  path: NodePath<t.ImportDeclaration>,
+  state: StateManager,
+): void;
+
+// Read require calls and remember the names of the variables for later
+declare export function readRequires(
+  path: NodePath<t.VariableDeclarator>,
+  state: StateManager,
+): void;

package/lib/visitors/stylex-create-vars.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 transformStyleXCreateVars(
+  callExpressionPath: NodePath<t.CallExpression>,
+  state: StateManager,
+): void;
+export default transformStyleXCreateVars;

package/lib/visitors/stylex-create-vars.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 * 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.createVars` calls and transforms them.
+//. 1. It finds the first argument to `stylex.createVars` and validates it.
+/// 2. It envalues the style object to get a JS object. This also handles local constants automatically.
+/// 4. It uses the `stylexCreateVars` 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 transformStyleXCreateVars(
+  callExpressionPath: NodePath<t.CallExpression>,
+  state: StateManager,
+): void;

package/lib/visitors/stylex-create.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.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 envalues 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-keyframes.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 transformStyleXKeyframes(
+  path: NodePath<t.VariableDeclarator>,
+  state: StateManager,
+): void;
+export default transformStyleXKeyframes;

package/lib/visitors/stylex-keyframes.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 * 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.keyframes` calls and transforms them.
+//. 1. It finds the first argument to `stylex.keyframes` and validates it.
+/// 2. It envalues the style object to get a JS object. This also handles local constants automatically.
+/// 4. It uses the `stylexKeyframes` 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 transformStyleXKeyframes(
+  path: NodePath<t.VariableDeclarator>,
+  state: StateManager,
+): void;

package/lib/visitors/stylex-merge.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 skipStylexMergeChildren(
+  path: NodePath<t.CallExpression>,
+  state: StateManager,
+): void;
+declare function transformStyleXMerge(
+  path: NodePath<t.CallExpression>,
+  state: StateManager,
+): void;
+export default transformStyleXMerge;

package/lib/visitors/stylex-merge.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 skipStylexMergeChildren(
+  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 transformStyleXMerge(
+  path: NodePath<t.CallExpression>,
+  state: StateManager,
+): void;

package/lib/visitors/stylex-override-vars.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 transformStyleXOverrideVars(
+  callExpressionPath: NodePath<t.CallExpression>,
+  state: StateManager,
+): void;
+export default transformStyleXOverrideVars;

package/lib/visitors/stylex-override-vars.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 * 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.unstable_overrideVars` calls and transforms them.
+//. 1. It finds the first two arguments to `stylex.unstable_overrideVars` and validates those.
+/// 2. This handles local constants automatically.
+/// 4. It uses the `stylexOverrideVars` 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 transformStyleXOverrideVars(
+  callExpressionPath: NodePath<t.CallExpression>,
+  state: StateManager,
+): void;