@stylexjs/babel-plugin 0.6.0 → 0.6.1

package/lib/index.js

@@ -3091,12 +3091,12 @@ function getDefaultValue(value) {
   throw new Error('Invalid value in stylex.defineVars');
 }
 
-var types$1 = {};
+var types$2 = {};
 
-Object.defineProperty(types$1, "__esModule", {
+Object.defineProperty(types$2, "__esModule", {
   value: true
 });
-types$1.url = types$1.transformList = types$1.transformFunction = types$1.time = types$1.resolution = types$1.percentage = types$1.number = types$1.lengthPercentage = types$1.length = types$1.isCSSType = types$1.integer = types$1.image = types$1.color = types$1.angle = types$1.Url = types$1.TransformList = types$1.TransformFunction = types$1.Time = types$1.Resolution = types$1.Percentage = types$1.Num = types$1.LengthPercentage = types$1.Length = types$1.Integer = types$1.Image = types$1.Color = types$1.Angle = void 0;
+types$2.url = types$2.transformList = types$2.transformFunction = types$2.time = types$2.resolution = types$2.percentage = types$2.number = types$2.lengthPercentage = types$2.length = types$2.isCSSType = types$2.integer = types$2.image = types$2.color = types$2.angle = types$2.Url = types$2.TransformList = types$2.TransformFunction = types$2.Time = types$2.Resolution = types$2.Percentage = types$2.Num = types$2.LengthPercentage = types$2.Length = types$2.Integer = types$2.Image = types$2.Color = types$2.Angle = void 0;
 class BaseCSSType {
   constructor(value) {
     this.value = value;
@@ -3105,7 +3105,7 @@ class BaseCSSType {
 const isCSSType = value => {
   return value instanceof BaseCSSType && value.value != null && typeof value.syntax === 'string';
 };
-types$1.isCSSType = isCSSType;
+types$2.isCSSType = isCSSType;
 class Angle extends BaseCSSType {
   syntax = '<angle>';
   static syntax = '<angle>';
@@ -3113,24 +3113,24 @@ class Angle extends BaseCSSType {
     return new Angle(value);
   }
 }
-types$1.Angle = Angle;
-types$1.angle = Angle.create;
+types$2.Angle = Angle;
+types$2.angle = Angle.create;
 class Color extends BaseCSSType {
   syntax = '<color>';
   static create(value) {
     return new Color(value);
   }
 }
-types$1.Color = Color;
-types$1.color = Color.create;
+types$2.Color = Color;
+types$2.color = Color.create;
 class Url extends BaseCSSType {
   syntax = '<url>';
   static create(value) {
     return new Url(value);
   }
 }
-types$1.Url = Url;
-types$1.url = Url.create;
+types$2.Url = Url;
+types$2.url = Url.create;
 class Image extends Url {
   syntax = '<image>';
   constructor(value) {
@@ -3141,16 +3141,16 @@ class Image extends Url {
     return new Image(value);
   }
 }
-types$1.Image = Image;
-types$1.image = Image.create;
+types$2.Image = Image;
+types$2.image = Image.create;
 class Integer extends BaseCSSType {
   syntax = '<integer>';
   static create(value) {
     return new Integer(convertNumberToStringUsing(String)(value));
   }
 }
-types$1.Integer = Integer;
-types$1.integer = Integer.create;
+types$2.Integer = Integer;
+types$2.integer = Integer.create;
 class LengthPercentage extends BaseCSSType {
   syntax = '<length-percentage>';
   static createLength(value) {
@@ -3160,64 +3160,64 @@ class LengthPercentage extends BaseCSSType {
     return new LengthPercentage(convertNumberToPercentage(value));
   }
 }
-types$1.LengthPercentage = LengthPercentage;
-types$1.lengthPercentage = LengthPercentage.createLength;
+types$2.LengthPercentage = LengthPercentage;
+types$2.lengthPercentage = LengthPercentage.createLength;
 class Length extends LengthPercentage {
   syntax = '<length>';
   static create(value) {
     return new Length(convertNumberToLength(value));
   }
 }
-types$1.Length = Length;
-types$1.length = Length.create;
+types$2.Length = Length;
+types$2.length = Length.create;
 class Percentage extends LengthPercentage {
   syntax = '<percentage>';
   static create(value) {
     return new Percentage(convertNumberToPercentage(value));
   }
 }
-types$1.Percentage = Percentage;
-types$1.percentage = Percentage.create;
+types$2.Percentage = Percentage;
+types$2.percentage = Percentage.create;
 class Num extends BaseCSSType {
   syntax = '<number>';
   static create(value) {
     return new Num(convertNumberToBareString(value));
   }
 }
-types$1.Num = Num;
-types$1.number = Num.create;
+types$2.Num = Num;
+types$2.number = Num.create;
 class Resolution extends BaseCSSType {
   syntax = '<resolution>';
   static create(value) {
     return new Resolution(value);
   }
 }
-types$1.Resolution = Resolution;
-types$1.resolution = Resolution.create;
+types$2.Resolution = Resolution;
+types$2.resolution = Resolution.create;
 class Time extends BaseCSSType {
   syntax = '<time>';
   static create(value) {
     return new Time(value);
   }
 }
-types$1.Time = Time;
-types$1.time = Time.create;
+types$2.Time = Time;
+types$2.time = Time.create;
 class TransformFunction extends BaseCSSType {
   syntax = '<transform-function>';
   static create(value) {
     return new TransformFunction(value);
   }
 }
-types$1.TransformFunction = TransformFunction;
-types$1.transformFunction = TransformFunction.create;
+types$2.TransformFunction = TransformFunction;
+types$2.transformFunction = TransformFunction.create;
 class TransformList extends BaseCSSType {
   syntax = '<transform-list>';
   static create(value) {
     return new TransformList(value);
   }
 }
-types$1.TransformList = TransformList;
-types$1.transformList = TransformList.create;
+types$2.TransformList = TransformList;
+types$2.transformList = TransformList.create;
 const convertNumberToStringUsing = (transformNumber, defaultStr) => value => {
   if (typeof value === 'number') {
     return transformNumber(value);
@@ -3247,7 +3247,7 @@ var _hash$3 = _interopRequireDefault$3(hash$1);
 var _objectUtils$1 = objectUtils;
 var _defaultOptions$2 = defaultOptions;
 var _stylexVarsUtils$1 = stylexVarsUtils;
-var _types$2 = types$1;
+var _types$2 = types$2;
 function _interopRequireDefault$3(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function styleXDefineVars(variables, options) {
   const {
@@ -3338,7 +3338,7 @@ Object.defineProperty(stylexCreateTheme$1, "__esModule", {
 stylexCreateTheme$1.default = styleXCreateTheme;
 var _hash$2 = _interopRequireDefault$2(hash$1);
 var _stylexVarsUtils = stylexVarsUtils;
-var _types$1 = types$1;
+var _types$1 = types$2;
 var _defaultOptions$1 = defaultOptions;
 function _interopRequireDefault$2(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function styleXCreateTheme(themeVars, variables, options) {
@@ -3484,7 +3484,7 @@ var messages_1;
 Object.defineProperty(lib, "__esModule", {
   value: true
 });
-var utils_1 = lib.utils = lib.types = messages_1 = lib.messages = keyframes_1 = lib.keyframes = include_1 = lib.include = firstThatWorks_1 = lib.firstThatWorks = defineVars_1 = lib.defineVars = createTheme_1 = lib.createTheme = create_1 = lib.create = lib.PSEUDO_ELEMENT_PRIORITY = lib.PSEUDO_CLASS_PRIORITIES = IncludedStyles_1 = lib.IncludedStyles = lib.AT_RULE_PRIORITIES = void 0;
+var utils_1 = lib.utils = types$1 = lib.types = messages_1 = lib.messages = keyframes_1 = lib.keyframes = include_1 = lib.include = firstThatWorks_1 = lib.firstThatWorks = defineVars_1 = lib.defineVars = createTheme_1 = lib.createTheme = create_1 = lib.create = lib.PSEUDO_ELEMENT_PRIORITY = lib.PSEUDO_CLASS_PRIORITIES = IncludedStyles_1 = lib.IncludedStyles = lib.AT_RULE_PRIORITIES = void 0;
 var _stylexCreate = _interopRequireDefault(stylexCreate$1);
 var _stylexDefineVars = _interopRequireDefault(stylexDefineVars$1);
 var _stylexCreateTheme = _interopRequireDefault(stylexCreateTheme$1);
@@ -3494,8 +3494,8 @@ var _stylexFirstThatWorks = _interopRequireDefault(stylexFirstThatWorks$1);
 var _hash = _interopRequireDefault(hash$1);
 var _fileBasedIdentifier = _interopRequireDefault(fileBasedIdentifier);
 var m = _interopRequireWildcard(messages$4);
-var _types = _interopRequireWildcard(types$1);
-lib.types = _types;
+var _types = _interopRequireWildcard(types$2);
+var types$1 = lib.types = _types;
 var _propertyPriorities = propertyPriorities;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -4016,14 +4016,16 @@ function _evaluate(path, state) {
         const val = object.node.value;
         func = val[property.node.name];
       }
-      const parsedObj = evaluate(object, state.traversalState, state.functions);
-      if (parsedObj.confident && isIdentifier(property)) {
-        func = parsedObj.value[property.node.name];
-        context = parsedObj.value;
-      }
-      if (parsedObj.confident && isStringLiteral(property)) {
-        func = parsedObj.value[property.node.value];
-        context = parsedObj.value;
+      if (func == null) {
+        const parsedObj = evaluate(object, state.traversalState, state.functions);
+        if (parsedObj.confident && isIdentifier(property)) {
+          func = parsedObj.value[property.node.name];
+          context = parsedObj.value;
+        }
+        if (parsedObj.confident && isStringLiteral(property)) {
+          func = parsedObj.value[property.node.value];
+          context = parsedObj.value;
+        }
       }
     }
     if (func) {
@@ -4430,6 +4432,9 @@ function transformStyleXDefineVars(callExpressionPath, state) {
         fn: keyframes
       };
     });
+    state.stylexTypesImport.forEach(name => {
+      identifiers[name] = types$1;
+    });
     state.stylexImport.forEach(name => {
       if (memberExpressions[name] === undefined) {
         memberExpressions[name] = {};
@@ -4437,6 +4442,10 @@ function transformStyleXDefineVars(callExpressionPath, state) {
       memberExpressions[name].keyframes = {
         fn: keyframes
       };
+      identifiers[name] = {
+        ...(identifiers[name] ?? {}),
+        types: types$1
+      };
     });
     const {
       confident,
@@ -4518,10 +4527,41 @@ function transformStyleXCreateTheme(callExpressionPath, state) {
     if (!confident1) {
       throw new Error(messages_1.NON_STATIC_VALUE);
     }
+    const injectedKeyframes = {};
+    function keyframes(animation) {
+      const [animationName, injectedStyle] = keyframes_1(animation, state.options);
+      injectedKeyframes[animationName] = injectedStyle;
+      return animationName;
+    }
+    const identifiers = {};
+    const memberExpressions = {};
+    state.stylexKeyframesImport.forEach(name => {
+      identifiers[name] = {
+        fn: keyframes
+      };
+    });
+    state.stylexTypesImport.forEach(name => {
+      identifiers[name] = types$1;
+    });
+    state.stylexImport.forEach(name => {
+      if (memberExpressions[name] === undefined) {
+        memberExpressions[name] = {};
+      }
+      memberExpressions[name].keyframes = {
+        fn: keyframes
+      };
+      identifiers[name] = {
+        ...(identifiers[name] ?? {}),
+        types: types$1
+      };
+    });
     const {
       confident: confident2,
       value: overrides
-    } = evaluate(secondArg, state);
+    } = evaluate(secondArg, state, {
+      identifiers,
+      memberExpressions
+    });
     if (!confident2) {
       throw new Error(messages_1.NON_STATIC_VALUE);
     }
@@ -4550,7 +4590,10 @@ function transformStyleXCreateTheme(callExpressionPath, state) {
       };
     }
     callExpressionPath.replaceWith(convertObjectToAST(overridesObj));
-    const listOfStyles = Object.entries(injectedStyles).map(_ref => {
+    const listOfStyles = Object.entries({
+      ...injectedKeyframes,
+      ...injectedStyles
+    }).map(_ref => {
       let [key, {
         priority,
         ...rest

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

@@ -10,9 +10,7 @@
 import type { NodePath } from '@babel/traverse';
 import StateManager from './state-manager';
 export type FunctionConfig = {
-  identifiers: {
-    [fnName: string]: { fn: (...args: any[]) => any; takesPath?: boolean };
-  };
+  identifiers: { [fnName: string]: any };
   memberExpressions: {
     [key: string]: {
       [memberName: string]: {

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

@@ -11,15 +11,12 @@ 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,
-    },
+    [fnName: string]: $FlowFixMe,
   },
   memberExpressions: {
     [key: string]: {
       [memberName: string]: {
-        fn: (...args: any[]) => any,
+        fn: (...args: $FlowFixMe[]) => $FlowFixMe,
         takesPath?: boolean,
       },
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/babel-plugin",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "StyleX babel plugin.",
   "main": "lib/index.js",
   "repository": "https://github.com/facebook/stylex",
@@ -14,8 +14,8 @@
   },
   "dependencies": {
     "@babel/helper-module-imports": "^7.22.15",
-    "@stylexjs/shared": "0.6.0",
-    "@stylexjs/stylex": "0.6.0",
+    "@stylexjs/shared": "0.6.1",
+    "@stylexjs/stylex": "0.6.1",
     "@babel/core": "^7.23.6",
     "@babel/traverse": "^7.23.6",
     "@babel/types": "^7.23.6"