@stylexjs/babel-plugin 0.6.0 → 0.7.0

package/lib/index.js

@@ -1128,8 +1128,8 @@ Object.defineProperty(splitCssValue, "__esModule", {
   value: true
 });
 splitCssValue.default = splitValue;
-var _postcssValueParser$5 = _interopRequireDefault$g(require$$0);
-function _interopRequireDefault$g(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _postcssValueParser$6 = _interopRequireDefault$h(require$$0);
+function _interopRequireDefault$h(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function printNode(node) {
   switch (node.type) {
     case 'word':
@@ -1148,7 +1148,7 @@ function splitValue(str) {
   if (Array.isArray(str)) {
     return str;
   }
-  const parsed = (0, _postcssValueParser$5.default)(str.trim());
+  const parsed = (0, _postcssValueParser$6.default)(str.trim());
   const nodes = parsed.nodes.filter(node => node.type !== 'space' && node.type !== 'div').map(printNode);
   if (nodes.length > 1 && nodes[nodes.length - 1].toLowerCase() === '!important') {
     return nodes.slice(0, nodes.length - 1).map(node => node + ' !important');
@@ -1160,8 +1160,8 @@ Object.defineProperty(legacyExpandShorthands, "__esModule", {
   value: true
 });
 legacyExpandShorthands.default = void 0;
-var _splitCssValue = _interopRequireDefault$f(splitCssValue);
-function _interopRequireDefault$f(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _splitCssValue = _interopRequireDefault$g(splitCssValue);
+function _interopRequireDefault$g(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const shorthands$1 = {
   border: rawValue => {
     return [['borderTop', rawValue], ['borderEnd', rawValue], ['borderBottom', rawValue], ['borderStart', rawValue]];
@@ -1404,10 +1404,10 @@ Object.defineProperty(preprocessRules, "__esModule", {
 });
 preprocessRules.default = flatMapExpandedShorthands;
 preprocessRules.getExpandedKeys = getExpandedKeys;
-var _applicationOrder = _interopRequireDefault$e(applicationOrder);
-var _legacyExpandShorthands = _interopRequireDefault$e(legacyExpandShorthands);
-var _propertySpecificity = _interopRequireDefault$e(propertySpecificity);
-function _interopRequireDefault$e(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _applicationOrder = _interopRequireDefault$f(applicationOrder);
+var _legacyExpandShorthands = _interopRequireDefault$f(legacyExpandShorthands);
+var _propertySpecificity = _interopRequireDefault$f(propertySpecificity);
+function _interopRequireDefault$f(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const expansions = {
   'application-order': _applicationOrder.default,
   'property-specificity': _propertySpecificity.default,
@@ -1493,8 +1493,8 @@ Object.defineProperty(fontSizePxToRem, "__esModule", {
   value: true
 });
 fontSizePxToRem.default = convertFontSizeToRem;
-var _postcssValueParser$4 = _interopRequireDefault$d(require$$0);
-function _interopRequireDefault$d(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _postcssValueParser$5 = _interopRequireDefault$e(require$$0);
+function _interopRequireDefault$e(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const ROOT_FONT_SIZE = 16;
 function convertFontSizeToRem(ast, key) {
   if (key !== 'fontSize') {
@@ -1504,7 +1504,7 @@ function convertFontSizeToRem(ast, key) {
     if (node.type !== 'word') {
       return;
     }
-    const dimension = _postcssValueParser$4.default.unit(node.value);
+    const dimension = _postcssValueParser$5.default.unit(node.value);
     if (dimension && dimension.unit === 'px') {
       node.value = `${parseFloat(dimension.number) / ROOT_FONT_SIZE}rem`;
     }
@@ -1518,8 +1518,8 @@ Object.defineProperty(leadingZero, "__esModule", {
   value: true
 });
 leadingZero.default = normalizeLeadingZero;
-var _postcssValueParser$3 = _interopRequireDefault$c(require$$0);
-function _interopRequireDefault$c(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _postcssValueParser$4 = _interopRequireDefault$d(require$$0);
+function _interopRequireDefault$d(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function normalizeLeadingZero(ast, _) {
   ast.walk(node => {
     if (node.type !== 'word') {
@@ -1529,7 +1529,7 @@ function normalizeLeadingZero(ast, _) {
     if (Number.isNaN(value)) {
       return;
     }
-    const dimension = _postcssValueParser$3.default.unit(node.value);
+    const dimension = _postcssValueParser$4.default.unit(node.value);
     if (value < 1 && value >= 0) {
       node.value = value.toString().replace('0.', '.') + (dimension ? dimension.unit : '');
     }
@@ -1555,14 +1555,14 @@ function normalizeQuotes(ast, _) {
   return ast;
 }
 
-var timings = {};
+var timings$1 = {};
 
-Object.defineProperty(timings, "__esModule", {
+Object.defineProperty(timings$1, "__esModule", {
   value: true
 });
-timings.default = normalizeTimings;
-var _postcssValueParser$2 = _interopRequireDefault$b(require$$0);
-function _interopRequireDefault$b(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+timings$1.default = normalizeTimings;
+var _postcssValueParser$3 = _interopRequireDefault$c(require$$0);
+function _interopRequireDefault$c(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function normalizeTimings(ast, _) {
   ast.walk(node => {
     if (node.type !== 'word') {
@@ -1572,7 +1572,7 @@ function normalizeTimings(ast, _) {
     if (Number.isNaN(value)) {
       return;
     }
-    const dimension = _postcssValueParser$2.default.unit(node.value);
+    const dimension = _postcssValueParser$3.default.unit(node.value);
     if (!dimension || dimension.unit !== 'ms' || value < 10) {
       return;
     }
@@ -1632,6 +1632,49 @@ function normalizeWhitespace(ast, _) {
   return ast;
 }
 
+var zeroDimensions = {};
+
+Object.defineProperty(zeroDimensions, "__esModule", {
+  value: true
+});
+zeroDimensions.default = normalizeZeroDimensions;
+var _postcssValueParser$2 = _interopRequireDefault$b(require$$0);
+function _interopRequireDefault$b(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const angles = ['deg', 'grad', 'turn', 'rad'];
+const timings = ['ms', 's'];
+const fraction = 'fr';
+const percentage = '%';
+function normalizeZeroDimensions(ast, _) {
+  let endFunction = 0;
+  ast.walk(node => {
+    if (node.type === 'function' && !endFunction) {
+      endFunction = node.sourceEndIndex ?? 0;
+    }
+    if (endFunction > 0 && node.sourceIndex > endFunction) {
+      endFunction = 0;
+    }
+    if (node.type !== 'word') {
+      return;
+    }
+    const dimension = _postcssValueParser$2.default.unit(node.value);
+    if (!dimension || dimension.number !== '0') {
+      return;
+    }
+    if (angles.indexOf(dimension.unit) !== -1) {
+      node.value = '0deg';
+    } else if (timings.indexOf(dimension.unit) !== -1) {
+      node.value = '0s';
+    } else if (dimension.unit === fraction) {
+      node.value = '0fr';
+    } else if (dimension.unit === percentage) {
+      node.value = '0%';
+    } else if (!endFunction) {
+      node.value = '0';
+    }
+  });
+  return ast;
+}
+
 var detectUnclosedFns$1 = {};
 
 Object.defineProperty(detectUnclosedFns$1, "__esModule", {
@@ -1681,13 +1724,14 @@ normalizeValue$1.default = normalizeValue;
 var _fontSizePxToRem = _interopRequireDefault$9(fontSizePxToRem);
 var _leadingZero = _interopRequireDefault$9(leadingZero);
 var _quotes = _interopRequireDefault$9(quotes);
-var _timings = _interopRequireDefault$9(timings);
+var _timings = _interopRequireDefault$9(timings$1);
 var _whitespace = _interopRequireDefault$9(whitespace);
+var _zeroDimensions = _interopRequireDefault$9(zeroDimensions);
 var _detectUnclosedFns = _interopRequireDefault$9(detectUnclosedFns$1);
 var _postcssValueParser$1 = _interopRequireDefault$9(require$$0);
 var _convertCamelCaseValues = _interopRequireDefault$9(convertCamelCaseValues);
 function _interopRequireDefault$9(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const normalizers = [_detectUnclosedFns.default, _whitespace.default, _timings.default, _leadingZero.default, _quotes.default, _convertCamelCaseValues.default];
+const normalizers = [_detectUnclosedFns.default, _whitespace.default, _timings.default, _zeroDimensions.default, _leadingZero.default, _quotes.default, _convertCamelCaseValues.default];
 function normalizeValue(value, key, _ref) {
   let {
     useRemForFontSize
@@ -3091,12 +3135,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 +3149,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 +3157,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 +3185,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 +3204,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 +3291,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 {
@@ -3260,7 +3304,7 @@ function styleXDefineVars(variables, options) {
   const themeNameHash = classNamePrefix + (0, _hash$3.default)(themeName);
   const typedVariables = {};
   const variablesMap = (0, _objectUtils$1.objMap)(variables, (value, key) => {
-    const nameHash = classNamePrefix + (0, _hash$3.default)(`${themeName}.${key}`);
+    const nameHash = key.startsWith('--') ? key.slice(2) : classNamePrefix + (0, _hash$3.default)(`${themeName}.${key}`);
     if ((0, _types$2.isCSSType)(value)) {
       const v = value;
       typedVariables[nameHash] = {
@@ -3338,7 +3382,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 +3528,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 +3538,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; }
@@ -3619,7 +3663,7 @@ function evaluateThemeRef(fileName, exportName, state) {
     const strToHash = key === '__themeName__' ? utils_1.genFileBasedIdentifier({
       fileName,
       exportName
-    }) : utils_1.genFileBasedIdentifier({
+    }) : key.startsWith('--') ? `var(${key})` : utils_1.genFileBasedIdentifier({
       fileName,
       exportName,
       key
@@ -4016,14 +4060,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 +4476,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 +4486,10 @@ function transformStyleXDefineVars(callExpressionPath, state) {
       memberExpressions[name].keyframes = {
         fn: keyframes
       };
+      identifiers[name] = {
+        ...(identifiers[name] ?? {}),
+        types: types$1
+      };
     });
     const {
       confident,
@@ -4518,10 +4571,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 +4634,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/lib/visitors/stylex-create/index.js.flow

@@ -11,9 +11,9 @@ 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.
+/// 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.
+/// 3. It evaluates 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.

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

@@ -11,7 +11,7 @@ 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.
+/// 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.

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

@@ -11,8 +11,8 @@ 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.defineVars` calls and transforms them.
-//. 1. It finds the first argument to `stylex.defineVars` and validates it.
-/// 2. It envalues the style object to get a JS object. This also handles local constants automatically.
+/// 1. It finds the first argument to `stylex.defineVars` and validates it.
+/// 2. It evaluates the style object to get a JS object. This also handles local constants automatically.
 /// 4. It uses the `stylexDefineVars` 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.

package/lib/visitors/stylex-keyframes.js.flow

@@ -11,8 +11,8 @@ 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.
+/// 1. It finds the first argument to `stylex.keyframes` and validates it.
+/// 2. It evaluates 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.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/babel-plugin",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "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.7.0",
+    "@stylexjs/stylex": "0.7.0",
     "@babel/core": "^7.23.6",
     "@babel/traverse": "^7.23.6",
     "@babel/types": "^7.23.6"