@stylexjs/babel-plugin 0.15.0 → 0.15.1

package/lib/index.js

@@ -4,8 +4,8 @@ var t = require('@babel/types');
 var path = require('path');
 var fs = require('fs');
 var url$1 = require('url');
-var require$$0 = require('assert');
 var importMetaResolve = require('@dual-bundle/import-meta-resolve');
+var require$$0 = require('assert');
 var core = require('@babel/core');
 var traverse = require('@babel/traverse');
 var stylex = require('@stylexjs/stylex');
@@ -655,6 +655,121 @@ function requireLib$2 () {
 
 var libExports$2 = requireLib$2();
 
+function hoistExpression(path, astExpression) {
+  const programStatementPath = getProgramStatement(path);
+  if (programStatementPath == null) {
+    return astExpression;
+  }
+  const hoistedIdent = path.scope.generateUidIdentifier();
+  programStatementPath.insertBefore(t__namespace.variableDeclaration('const', [t__namespace.variableDeclarator(hoistedIdent, astExpression)]));
+  return hoistedIdent;
+}
+function pathReplaceHoisted(path, astExpression) {
+  if (isProgramLevel(path)) {
+    path.replaceWith(astExpression);
+    return;
+  }
+  const programStatementPath = getProgramStatement(path);
+  if (programStatementPath == null) {
+    path.replaceWith(astExpression);
+    return;
+  }
+  const nameIdent = path.scope.generateUidIdentifier('styles');
+  programStatementPath.insertBefore(t__namespace.variableDeclaration('const', [t__namespace.variableDeclarator(nameIdent, astExpression)]));
+  path.replaceWith(nameIdent);
+}
+function getProgramPath(path) {
+  let programPath = path;
+  while (programPath != null && !programPath.isProgram()) {
+    if (programPath.parentPath) {
+      programPath = programPath.parentPath;
+    } else {
+      return null;
+    }
+  }
+  return programPath;
+}
+function addNamedImport(statementPath, as, from, options) {
+  const identifier = libExports$2.addNamed(statementPath, as, from, options);
+  const programPath = getProgramPath(statementPath);
+  if (programPath == null) {
+    return identifier;
+  }
+  const bodyPath = programPath.get('body');
+  let targetImportIndex = -1;
+  for (let i = 0; i < bodyPath.length; i++) {
+    const statement = bodyPath[i];
+    if (statement.isImportDeclaration()) {
+      targetImportIndex = i;
+      if (statement.node.specifiers.find(s => s.type === 'ImportSpecifier' && s.local.type === 'Identifier' && s.local.name === identifier.name)) {
+        break;
+      }
+    }
+  }
+  if (targetImportIndex === -1) {
+    return identifier;
+  }
+  const lastImport = bodyPath[targetImportIndex];
+  if (lastImport == null) {
+    return identifier;
+  }
+  const importName = statementPath.scope.generateUidIdentifier(as);
+  lastImport.insertAfter(t__namespace.variableDeclaration('var', [t__namespace.variableDeclarator(importName, identifier)]));
+  return importName;
+}
+function addDefaultImport(statementPath, from, options) {
+  const identifier = libExports$2.addDefault(statementPath, from, options);
+  const programPath = getProgramPath(statementPath);
+  if (programPath == null) {
+    return identifier;
+  }
+  const bodyPath = programPath.get('body');
+  let targetImportIndex = -1;
+  for (let i = 0; i < bodyPath.length; i++) {
+    const statement = bodyPath[i];
+    if (statement.isImportDeclaration()) {
+      targetImportIndex = i;
+      if (statement.node.specifiers.find(s => s.type === 'ImportDefaultSpecifier' && s.local.type === 'Identifier' && s.local.name === identifier.name)) {
+        break;
+      }
+    }
+  }
+  if (targetImportIndex === -1) {
+    return identifier;
+  }
+  const lastImport = bodyPath[targetImportIndex];
+  if (lastImport == null) {
+    return identifier;
+  }
+  const importName = statementPath.scope.generateUidIdentifier('inject');
+  lastImport.insertAfter(t__namespace.variableDeclaration('var', [t__namespace.variableDeclarator(importName, identifier)]));
+  return importName;
+}
+function isProgramLevel(path) {
+  let programPath = path;
+  if (programPath.isStatement() && programPath?.parentPath?.isProgram()) {
+    return true;
+  }
+  while (programPath.parentPath != null) {
+    const parentPath = programPath.parentPath;
+    if (programPath.isStatement() && !programPath.parentPath?.isProgram() && !programPath.parentPath?.isExportDeclaration()) {
+      return false;
+    }
+    if (programPath.isFunction()) {
+      return false;
+    }
+    programPath = parentPath;
+  }
+  return true;
+}
+function getProgramStatement(path) {
+  let programPath = path;
+  while (programPath.parentPath != null && !programPath.parentPath.isProgram() && programPath.parentPath != null) {
+    programPath = programPath.parentPath;
+  }
+  return programPath;
+}
+
 const CheckModuleResolution = unionOf3(object({
   type: literal('commonJS'),
   rootDir: unionOf(nullish(), string()),
@@ -790,62 +905,6 @@ class StateManager {
       from: runInj
     } : runInj || null;
   }
-  addNamedImport(statementPath, as, from, options) {
-    const identifier = libExports$2.addNamed(statementPath, as, from, options);
-    const programPath = getProgramPath(statementPath);
-    if (programPath == null) {
-      return identifier;
-    }
-    const bodyPath = programPath.get('body');
-    let targetImportIndex = -1;
-    for (let i = 0; i < bodyPath.length; i++) {
-      const statement = bodyPath[i];
-      if (statement.isImportDeclaration()) {
-        targetImportIndex = i;
-        if (statement.node.specifiers.find(s => s.type === 'ImportSpecifier' && s.local.type === 'Identifier' && s.local.name === identifier.name)) {
-          break;
-        }
-      }
-    }
-    if (targetImportIndex === -1) {
-      return identifier;
-    }
-    const lastImport = bodyPath[targetImportIndex];
-    if (lastImport == null) {
-      return identifier;
-    }
-    const importName = statementPath.scope.generateUidIdentifier(as);
-    lastImport.insertAfter(t__namespace.variableDeclaration('var', [t__namespace.variableDeclarator(importName, identifier)]));
-    return importName;
-  }
-  addDefaultImport(statementPath, from, options) {
-    const identifier = libExports$2.addDefault(statementPath, from, options);
-    const programPath = getProgramPath(statementPath);
-    if (programPath == null) {
-      return identifier;
-    }
-    const bodyPath = programPath.get('body');
-    let targetImportIndex = -1;
-    for (let i = 0; i < bodyPath.length; i++) {
-      const statement = bodyPath[i];
-      if (statement.isImportDeclaration()) {
-        targetImportIndex = i;
-        if (statement.node.specifiers.find(s => s.type === 'ImportDefaultSpecifier' && s.local.type === 'Identifier' && s.local.name === identifier.name)) {
-          break;
-        }
-      }
-    }
-    if (targetImportIndex === -1) {
-      return identifier;
-    }
-    const lastImport = bodyPath[targetImportIndex];
-    if (lastImport == null) {
-      return identifier;
-    }
-    const importName = statementPath.scope.generateUidIdentifier('inject');
-    lastImport.insertAfter(t__namespace.variableDeclaration('var', [t__namespace.variableDeclarator(importName, identifier)]));
-    return importName;
-  }
   get opts() {
     return {
       ...this.options
@@ -973,9 +1032,9 @@ class StateManager {
         from,
         as
       } = runtimeInjection;
-      injectName = as != null ? this.addNamedImport(statementPath, as, from, {
+      injectName = as != null ? addNamedImport(statementPath, as, from, {
         nameHint: 'inject'
-      }) : this.addDefaultImport(statementPath, from, {
+      }) : addDefaultImport(statementPath, from, {
         nameHint: 'inject'
       });
       this.injectImportInserted = injectName;
@@ -1048,24 +1107,6 @@ const addFileExtension = (importedFilePath, sourceFile) => {
   return importedFilePath + fileExtension;
 };
 const matchesFileSuffix = allowedSuffix => filename => ['', ...EXTENSIONS].some(extension => filename.endsWith(`${allowedSuffix}${extension}`));
-const getProgramPath = path => {
-  let programPath = path;
-  while (programPath != null && !programPath.isProgram()) {
-    if (programPath.parentPath) {
-      programPath = programPath.parentPath;
-    } else {
-      return null;
-    }
-  }
-  return programPath;
-};
-const getProgramStatement = path => {
-  let programPath = path;
-  while (programPath.parentPath != null && !programPath.parentPath.isProgram() && programPath.parentPath != null) {
-    programPath = programPath.parentPath;
-  }
-  return programPath;
-};
 function getRelativePath(from, to) {
   const relativePath = path.relative(path.parse(from).dir, to);
   return formatRelativePath(toPosixPath(relativePath));
@@ -7279,34 +7320,59 @@ function transformStyleXCreate(path, state) {
             }
             if (t__namespace.isObjectExpression(prop.value)) {
               const value = prop.value;
+              let cssTagValue = t__namespace.booleanLiteral(true);
+              const staticProps = [];
               const conditionalProps = [];
               value.properties.forEach(prop => {
                 if (!t__namespace.isObjectProperty(prop) || t__namespace.isPrivateName(prop.key)) {
                   return;
                 }
                 const objProp = prop;
-                const propKey = objProp.key.type === 'Identifier' && !objProp.computed ? objProp.key.name : objProp.key.type === 'StringLiteral' ? objProp.key.value : null;
-                if (propKey == null || propKey === '$$css') {
-                  conditionalProps.push(objProp);
+                const propKey = t__namespace.isIdentifier(objProp.key) && !objProp.computed ? objProp.key.name : t__namespace.isStringLiteral(objProp.key) ? objProp.key.value : null;
+                if (propKey == null) {
+                  staticProps.push(objProp);
+                  return;
+                }
+                if (propKey === '$$css') {
+                  cssTagValue = objProp.value;
                   return;
                 }
                 const classList = t__namespace.isStringLiteral(objProp.value) ? objProp.value.value.split(' ') : [];
+                let isStatic = true;
                 const exprList = [];
                 classList.forEach(cls => {
                   const expr = dynamicStyles.find(({
                     path
                   }) => origClassPaths[cls] === path)?.expression;
                   if (expr && !isSafeToSkipNullCheck(expr)) {
+                    isStatic = false;
                     exprList.push(t__namespace.conditionalExpression(t__namespace.binaryExpression('!=', expr, t__namespace.nullLiteral()), t__namespace.stringLiteral(cls), expr));
                   } else {
                     exprList.push(t__namespace.stringLiteral(cls));
                   }
                 });
                 const joined = exprList.length === 0 ? t__namespace.stringLiteral('') : exprList.reduce((acc, curr) => t__namespace.binaryExpression('+', acc, curr));
-                conditionalProps.push(t__namespace.objectProperty(objProp.key, joined));
+                if (isStatic) {
+                  staticProps.push(t__namespace.objectProperty(objProp.key, joined));
+                } else {
+                  conditionalProps.push(t__namespace.objectProperty(objProp.key, joined));
+                }
               });
-              const conditionalObj = t__namespace.objectExpression(conditionalProps);
-              prop.value = t__namespace.arrowFunctionExpression(params, t__namespace.arrayExpression([conditionalObj, t__namespace.objectExpression(Object.entries(inlineStyles).map(([key, val]) => t__namespace.objectProperty(t__namespace.stringLiteral(key), val.expression)))]));
+              let staticObj = null;
+              let conditionalObj = null;
+              if (staticProps.length > 0) {
+                staticProps.push(t__namespace.objectProperty(t__namespace.stringLiteral('$$css'), cssTagValue));
+                staticObj = t__namespace.objectExpression(staticProps);
+              }
+              if (conditionalProps.length > 0) {
+                conditionalProps.push(t__namespace.objectProperty(t__namespace.identifier('$$css'), cssTagValue));
+                conditionalObj = t__namespace.objectExpression(conditionalProps);
+              }
+              let finalFnValue = t__namespace.objectExpression(Object.entries(inlineStyles).map(([key, val]) => t__namespace.objectProperty(t__namespace.stringLiteral(key), val.expression)));
+              if (staticObj != null || conditionalObj != null) {
+                finalFnValue = t__namespace.arrayExpression([staticObj && hoistExpression(path, staticObj), conditionalObj, finalFnValue].filter(Boolean));
+              }
+              prop.value = t__namespace.arrowFunctionExpression(params, finalFnValue);
             }
           }
         }
@@ -7318,7 +7384,7 @@ function transformStyleXCreate(path, state) {
       ...rest
     }]) => [key, rest, priority]);
     state.registerStyles(listOfStyles, path);
-    path.replaceWith(resultAst);
+    pathReplaceHoisted(path, resultAst);
     if (Object.keys(injectedStyles).length === 0) {
       return;
     }
@@ -7329,10 +7395,6 @@ function validateStyleXCreate(path) {
   if (path.parentPath == null || path.parentPath.isExpressionStatement()) {
     throw path.buildCodeFrameError(messages.unboundCallValue('create'), SyntaxError);
   }
-  const nearestStatement = findNearestStatementAncestor(path);
-  if (!nearestStatement.parentPath.isProgram() && !nearestStatement.parentPath.isExportNamedDeclaration()) {
-    throw path.buildCodeFrameError(messages.ONLY_TOP_LEVEL, SyntaxError);
-  }
   if (path.node.arguments.length !== 1) {
     throw path.buildCodeFrameError(messages.illegalArgumentLength('create', 1), SyntaxError);
   }
@@ -7345,15 +7407,6 @@ function validateStyleXCreate(path) {
     throw path.buildCodeFrameError(messages.NO_OBJECT_SPREADS, SyntaxError);
   }
 }
-function findNearestStatementAncestor(path) {
-  if (path.isStatement()) {
-    return path;
-  }
-  if (path.parentPath == null) {
-    throw new Error('Unexpected Path found that is not part of the AST.');
-  }
-  return findNearestStatementAncestor(path.parentPath);
-}
 function legacyExpandShorthands(dynamicStyles) {
   const expandedKeysToKeyPaths = dynamicStyles.flatMap(({
     key

package/lib/utils/ast-helpers.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 { ImportOptions } from '@babel/helper-module-imports';
+import type { NodePath } from '@babel/traverse';
+type ImportAdditionOptions = Omit<
+  Partial<ImportOptions>,
+  'ensureLiveReference' | 'ensureNoContext'
+>;
+import * as t from '@babel/types';
+export declare function hoistExpression(
+  path: NodePath,
+  astExpression: t.Expression,
+): t.Expression;
+export declare function pathReplaceHoisted(
+  path: NodePath,
+  astExpression: t.Expression,
+): void;
+export declare function addNamedImport(
+  statementPath: NodePath,
+  as: string,
+  from: string,
+  options: ImportAdditionOptions,
+): t.Identifier;
+export declare function addDefaultImport(
+  statementPath: NodePath,
+  from: string,
+  options: ImportAdditionOptions,
+): t.Identifier;
+export declare function isProgramLevel(path: NodePath): boolean;
+export declare function getProgramStatement(path: NodePath): NodePath;

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

@@ -0,0 +1,44 @@
+/**
+ * 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 { ImportOptions } from '../../flow_modules/@babel/helper-module-imports';
+import type { NodePath } from '../../flow_modules/@babel/traverse';
+type ImportAdditionOptions = Omit<
+  Partial<ImportOptions>,
+  'ensureLiveReference' | 'ensureNoContext',
+>;
+
+import * as t from '../../flow_modules/@babel/types';
+
+declare export function hoistExpression(
+  path: NodePath<>,
+  astExpression: t.Expression,
+): t.Expression;
+
+declare export function pathReplaceHoisted(
+  path: NodePath<>,
+  astExpression: t.Expression,
+): void;
+
+declare export function addNamedImport(
+  statementPath: NodePath<>,
+  as: string,
+  from: string,
+  options: ImportAdditionOptions,
+): t.Identifier;
+
+declare export function addDefaultImport(
+  statementPath: NodePath<>,
+  from: string,
+  options: ImportAdditionOptions,
+): t.Identifier;
+
+declare export function isProgramLevel(path: NodePath<>): boolean;
+
+declare export function getProgramStatement(path: NodePath<>): NodePath<>;

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

@@ -13,12 +13,7 @@ import type {
   CompiledNamespaces,
   StyleXOptions as RuntimeOptions,
 } from '../shared';
-import type { ImportOptions } from '@babel/helper-module-imports';
 import * as t from '@babel/types';
-type ImportAdditionOptions = Omit<
-  Partial<ImportOptions>,
-  'ensureLiveReference' | 'ensureNoContext'
->;
 export type ImportPathResolution =
   | false
   | ['themeNameRef' | 'filePath', string];
@@ -145,17 +140,6 @@ declare class StateManager {
     | null
     | undefined
     | Readonly<{ from: string; as?: null | undefined | string }>;
-  addNamedImport(
-    statementPath: NodePath,
-    as: string,
-    from: string,
-    options: ImportAdditionOptions,
-  ): t.Identifier;
-  addDefaultImport(
-    statementPath: NodePath,
-    from: string,
-    options: ImportAdditionOptions,
-  ): t.Identifier;
   get opts(): StyleXStateOptions;
   get isDebug(): boolean;
   get isDev(): boolean;

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

@@ -13,14 +13,7 @@ import type {
   CompiledNamespaces,
   StyleXOptions as RuntimeOptions,
 } 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',
->;
-
 export type ImportPathResolution =
   | false
   | ['themeNameRef' | 'filePath', string];
@@ -100,17 +93,6 @@ declare export default class StateManager {
   get canReferenceTheme(): boolean;
   get metadata(): { [key: string]: any };
   get runtimeInjection(): ?$ReadOnly<{ from: string, as?: ?string }>;
-  addNamedImport(
-    statementPath: NodePath<>,
-    as: string,
-    from: string,
-    options: ImportAdditionOptions,
-  ): t.Identifier;
-  addDefaultImport(
-    statementPath: NodePath<>,
-    from: string,
-    options: ImportAdditionOptions,
-  ): t.Identifier;
   get opts(): StyleXStateOptions;
   get isDebug(): boolean;
   get isDev(): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/babel-plugin",
-  "version": "0.15.0",
+  "version": "0.15.1",
   "description": "StyleX babel plugin.",
   "main": "lib/index.js",
   "repository": {
@@ -21,9 +21,9 @@
     "@babel/traverse": "^7.26.8",
     "@babel/types": "^7.26.8",
     "@dual-bundle/import-meta-resolve": "^4.1.0",
-    "@stylexjs/stylex": "0.15.0",
+    "@stylexjs/stylex": "0.15.1",
     "postcss-value-parser": "^4.1.0",
-    "style-value-parser": "0.15.0"
+    "style-value-parser": "0.15.1"
   },
   "devDependencies": {
     "@rollup/plugin-alias": "^5.1.1",
@@ -34,7 +34,7 @@
     "@rollup/plugin-replace": "^6.0.1",
     "babel-plugin-syntax-hermes-parser": "^0.26.0",
     "rollup": "^4.24.0",
-    "scripts": "0.15.0"
+    "scripts": "0.15.1"
   },
   "files": [
     "flow_modules/*",