@stylexjs/babel-plugin 0.3.0 → 0.4.1

package/lib/index.js.flow

@@ -14,13 +14,16 @@ export type Options = StyleXOptions;
 /**
  * Entry point for the StyleX babel plugin.
  */
-declare export default function styleXTransform(): PluginObj<>;
+declare function styleXTransform(): PluginObj<>;
 
+declare function stylexPluginWithOptions(
+  options: Partial<StyleXOptions>,
+): [typeof styleXTransform, Partial<StyleXOptions>];
 /**
  *
  * @param rules An array of CSS rules that has been generated and collected from all JS files
  * in a project
- * @returns A string that represets the final CSS file.
+ * @returns A string that represents the final CSS file.
  *
  * This function take an Array of CSS rules, de-duplicates them, sorts them priority and generates
  * a final CSS file.
@@ -32,3 +35,16 @@ declare export default function styleXTransform(): PluginObj<>;
  * End-users can choose to not use this function and use their own logic instead.
  */
 export type Rule = [string, { ltr: string, rtl?: null | string }, number];
+declare function processStylexRules(
+  rules: Array<Rule>,
+  useLayers: boolean,
+): string;
+
+export type StyleXTransformObj = $ReadOnly<{
+  (): PluginObj<>,
+  withOptions: typeof stylexPluginWithOptions,
+  processStylexRules: typeof processStylexRules,
+  ...
+}>;
+
+declare export default StyleXTransformObj;

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

@@ -7,6 +7,7 @@
  *
  */
 
+import * as t from '@babel/types';
 import type { PluginPass } from '@babel/core';
 import type { NodePath } from '@babel/traverse';
 import type {
@@ -24,20 +25,48 @@ type ModuleResolution =
       rootDir: string;
       themeFileExtension?: string;
     };
-export type StyleXOptions = Omit<
-  RuntimeOptions,
-  keyof ({
-    importSources: Array<string>;
+export type StyleXOptions = Readonly<
+  Omit<
+    RuntimeOptions,
+    keyof ({
+      importSources: ReadonlyArray<
+        string | Readonly<{ from: string; as: string }>
+      >;
+      runtimeInjection:
+        | boolean
+        | (null | undefined | string)
+        | Readonly<{ from: string; as: string }>;
+      treeshakeCompensation?: boolean;
+      genConditionalClasses: boolean;
+      unstable_moduleResolution: void | ModuleResolution;
+    })
+  > & {
+    importSources: ReadonlyArray<
+      string | Readonly<{ from: string; as: string }>
+    >;
+    runtimeInjection:
+      | boolean
+      | (null | undefined | string)
+      | Readonly<{ from: string; as: string }>;
     treeshakeCompensation?: boolean;
     genConditionalClasses: boolean;
     unstable_moduleResolution: void | ModuleResolution;
-  })
-> & {
-  importSources: Array<string>;
-  treeshakeCompensation?: boolean;
-  genConditionalClasses: boolean;
-  unstable_moduleResolution: void | ModuleResolution;
-};
+  }
+>;
+type StyleXStateOptions = Readonly<
+  Omit<
+    StyleXOptions,
+    keyof ({
+      runtimeInjection:
+        | (null | undefined | string)
+        | Readonly<{ from: string; as: string }>;
+    })
+  > & {
+    runtimeInjection:
+      | (null | undefined | string)
+      | Readonly<{ from: string; as: string }>;
+  }
+>;
 declare class StateManager {
   readonly _state: PluginPass;
   readonly importPaths: Set<string>;
@@ -50,16 +79,22 @@ declare class StateManager {
   readonly stylexDefineVarsImport: Set<string>;
   readonly stylexCreateThemeImport: Set<string>;
   readonly stylexTypesImport: Set<string>;
+  injectImportInserted: null | undefined | t.Identifier;
   readonly styleMap: Map<string, CompiledNamespaces>;
   readonly styleVars: Map<string, NodePath>;
-  readonly styleVarsToKeep: Set<[string, null | string]>;
+  readonly styleVarsToKeep: Set<[string, true | string, true | Array<string>]>;
   inStyleXCreate: boolean;
   constructor(state: PluginPass);
-  get options(): StyleXOptions;
+  get options(): StyleXStateOptions;
   get importPathString(): string;
+  get importSources(): ReadonlyArray<string>;
+  importAs(source: string): null | string;
   get canReferenceTheme(): boolean;
   get metadata(): { [key: string]: any };
-  get runtimeInjection(): boolean;
+  get runtimeInjection():
+    | null
+    | undefined
+    | Readonly<{ from: string; as?: string }>;
   get isDev(): boolean;
   get isTest(): boolean;
   get filename(): string | void;
@@ -68,6 +103,8 @@ declare class StateManager {
   get fileNameForHashing(): null | string;
   importPathResolver(importPath: string): ImportPathResolution;
   addStyle(style: [string, { ltr: string; rtl?: string | null }, number]): void;
-  markComposedNamespace(memberExpression: [string, null | string]): void;
+  markComposedNamespace(
+    memberExpression: [string, true | string, true | Array<string>],
+  ): void;
 }
 export default StateManager;

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

@@ -7,6 +7,7 @@
  * @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 {
@@ -33,14 +34,23 @@ type ModuleResolution =
       themeFileExtension?: string,
     };
 
-export type StyleXOptions = {
+export type StyleXOptions = $ReadOnly<{
   ...RuntimeOptions,
-  importSources: Array<string>,
+  importSources: $ReadOnlyArray<
+    string | $ReadOnly<{ from: string, as: string }>,
+  >,
+  runtimeInjection: boolean | ?string | $ReadOnly<{ from: string, as: string }>,
   treeshakeCompensation?: boolean,
   genConditionalClasses: boolean,
   unstable_moduleResolution: void | ModuleResolution,
   ...
-};
+}>;
+
+type StyleXStateOptions = $ReadOnly<{
+  ...StyleXOptions,
+  runtimeInjection: ?string | $ReadOnly<{ from: string, as: string }>,
+  ...
+}>;
 
 declare export default class StateManager {
   +_state: PluginPass;
@@ -54,16 +64,19 @@ declare export default class StateManager {
   +stylexDefineVarsImport: Set<string>;
   +stylexCreateThemeImport: Set<string>;
   +stylexTypesImport: Set<string>;
+  injectImportInserted: ?t.Identifier;
   +styleMap: Map<string, CompiledNamespaces>;
   +styleVars: Map<string, NodePath<>>;
-  +styleVarsToKeep: Set<[string, null | string]>;
+  +styleVarsToKeep: Set<[string, true | string, true | Array<string>]>;
   inStyleXCreate: boolean;
   constructor(state: PluginPass): void;
-  get options(): StyleXOptions;
+  get options(): StyleXStateOptions;
   get importPathString(): string;
+  get importSources(): $ReadOnlyArray<string>;
+  importAs(source: string): null | string;
   get canReferenceTheme(): boolean;
   get metadata(): { [key: string]: any };
-  get runtimeInjection(): boolean;
+  get runtimeInjection(): ?$ReadOnly<{ from: string, as?: string }>;
   get isDev(): boolean;
   get isTest(): boolean;
   get filename(): string | void;
@@ -72,5 +85,7 @@ declare export default class StateManager {
   get fileNameForHashing(): null | string;
   importPathResolver(importPath: string): ImportPathResolution;
   addStyle(style: [string, { ltr: string, rtl?: string | null }, number]): void;
-  markComposedNamespace(memberExpression: [string, null | string]): void;
+  markComposedNamespace(
+    memberExpression: [string, true | string, true | Array<string>],
+  ): void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/babel-plugin",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "StyleX babel plugin.",
   "main": "lib/index.js",
   "repository": "https://github.com/facebook/stylex",
@@ -12,15 +12,12 @@
     "test": "jest"
   },
   "dependencies": {
-    "@stylexjs/shared": "0.3.0"
-  },
-  "peerDependencies": {
-    "@babel/core": "^7.19.6",
-    "@babel/traverse": "^7.0.0-0",
-    "@babel/types": "^7.15.6"
-  },
-  "devDependencies": {
-    "ts-node": "^10.8.1"
+    "@babel/helper-module-imports": "^7.22.15",
+    "@stylexjs/shared": "0.4.1",
+    "@stylexjs/stylex": "0.4.1",
+    "@babel/core": "^7.23.6",
+    "@babel/traverse": "^7.23.6",
+    "@babel/types": "^7.23.6"
   },
   "jest": {
     "verbose": true,

package/lib/visitors/stylex-override-vars.d.ts

@@ -1,17 +0,0 @@
-/**
- * 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 '../../flow_modules/@babel/types';
-import type { NodePath } from '../../flow_modules/@babel/traverse';
-import StateManager from '../utils/state-manager';
-declare function transformStyleXCreateTheme(
-  callExpressionPath: NodePath<t.CallExpression>,
-  state: StateManager,
-): void;
-export default transformStyleXCreateTheme;

package/lib/visitors/stylex-override-vars.js.flow

@@ -1,23 +0,0 @@
-/**
- * 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.createTheme` calls and transforms them.
-//. 1. It finds the first two arguments to `stylex.createTheme` and validates those.
-/// 2. This handles local constants automatically.
-/// 4. It uses the `stylexCreateTheme` 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 transformStyleXCreateTheme(
-  callExpressionPath: NodePath<t.CallExpression>,
-  state: StateManager,
-): void;