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

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

@@ -10,8 +10,6 @@
 import type { NodePath } from '@babel/traverse';
 import * as t from '@babel/types';
 
-type object = { [key: string]: unknown };
-
 export declare function isAnyTypeAnnotation(
   path: NodePath,
   props?: object | null,

package/lib/index.js

@@ -38,6 +38,7 @@ class StateManager {
   stylexKeyframesImport = new Set();
   stylexCreateVarsImport = new Set();
   stylexOverrideVarsImport = new Set();
+  stylexTypesImport = new Set();
   styleMap = new Map();
   styleVars = new Map();
   styleVarsToKeep = new Set();
@@ -113,8 +114,8 @@ class StateManager {
           if (!matchesFileSuffix(themeFileExtension)(importPath)) {
             return false;
           }
-          const resolvedFilePath = filePathResolver(importPath, rootDir);
-          return resolvedFilePath ? ["themeNameRef", resolvedFilePath] : false;
+          const resolvedFilePath = filePathResolver(importPath, sourceFilePath);
+          return resolvedFilePath ? ["themeNameRef", path.relative(rootDir, resolvedFilePath)] : false;
         }
       case "haste":
         {
@@ -145,16 +146,27 @@ class StateManager {
   }
 }
 const filePathResolver = (relativeFilePath, sourceFilePath) => {
-  const fileToLookFor = addFileExtension(relativeFilePath, sourceFilePath);
-  try {
-    const resolvedFilePath = require.resolve(fileToLookFor, {
-      paths: [path.dirname(sourceFilePath)]
-    });
-    return resolvedFilePath;
-  } catch {}
+  const fileToLookFor = relativeFilePath;
+  if (EXTENSIONS.some(ext => fileToLookFor.endsWith(ext))) {
+    try {
+      const resolvedFilePath = require.resolve(fileToLookFor, {
+        paths: [path.dirname(sourceFilePath)]
+      });
+      return resolvedFilePath;
+    } catch {}
+  }
+  for (const ext of EXTENSIONS) {
+    try {
+      const resolvedFilePath = require.resolve(fileToLookFor + ext, {
+        paths: [path.dirname(sourceFilePath)]
+      });
+      return resolvedFilePath;
+    } catch {}
+  }
 };
+const EXTENSIONS = [".js", ".ts", ".tsx", ".jsx", ".mjs", ".cjs"];
 const addFileExtension = (importedFilePath, sourceFile) => {
-  if (importedFilePath.endsWith(".js") || importedFilePath.endsWith(".ts") || importedFilePath.endsWith(".tsx") || importedFilePath.endsWith(".jsx") || importedFilePath.endsWith(".mjs") || importedFilePath.endsWith(".cjs")) {
+  if (EXTENSIONS.some(ext => importedFilePath.endsWith(ext))) {
     return importedFilePath;
   }
   const fileExtension = path.extname(sourceFile);
@@ -197,6 +209,9 @@ function readImportDeclarations(path, state) {
           if (specifier.imported.name === "unstable_overrideVars") {
             state.stylexCreateVarsImport.add(specifier.local.name);
           }
+          if (specifier.imported.name === "types") {
+            state.stylexTypesImport.add(specifier.local.name);
+          }
         }
         if (specifier.imported.type === "StringLiteral") {
           if (specifier.imported.value === "create") {
@@ -217,6 +232,9 @@ function readImportDeclarations(path, state) {
           if (specifier.imported.value === "unstable_overrideVars  ") {
             state.stylexCreateVarsImport.add(specifier.local.name);
           }
+          if (specifier.imported.value === "types  ") {
+            state.stylexTypesImport.add(specifier.local.name);
+          }
         }
       }
     }
@@ -252,6 +270,9 @@ function readRequires(path, state) {
           if (prop.key.name === "unstable_overrideVars") {
             state.stylexCreateVarsImport.add(value.name);
           }
+          if (prop.key.name === "types") {
+            state.stylexTypesImport.add(value.name);
+          }
         }
       }
     }
@@ -333,9 +354,9 @@ stylexInclude$1.default = stylexInclude;
 var messages$3 = _interopRequireWildcard$3(messages$4);
 function _getRequireWildcardCache$3(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache$3 = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard$3(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache$3(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-let number = 0;
+let number$1 = 0;
 function uuid() {
-  return `__included_${++number}__`;
+  return `__included_${++number$1}__`;
 }
 let IncludedStyles$1 = class IncludedStyles {
   constructor(astNode) {
@@ -513,7 +534,7 @@ Object.defineProperty(applicationOrder, "__esModule", {
 applicationOrder.default = void 0;
 var _splitCssValue$2 = _interopRequireDefault$j(splitCssValue);
 function _interopRequireDefault$j(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const shorthands$1 = {
+const shorthands$2 = {
   all: _ => {
     throw new Error("all is not supported");
   },
@@ -521,24 +542,24 @@ const shorthands$1 = {
   background: value => [["background", value], ["backgroundAttachment", null], ["backgroundClip", null], ["backgroundColor", null], ["backgroundImage", null], ["backgroundOrigin", null], ["backgroundPosition", null], ["backgroundRepeat", null], ["backgroundSize", null]],
   border: rawValue => {
     if (typeof rawValue === "number") {
-      return shorthands$1.borderWidth(rawValue);
+      return shorthands$2.borderWidth(rawValue);
     }
     const [width, style, color] = (0, _splitCssValue$2.default)(rawValue);
-    return [...shorthands$1.borderWidth(width), ...shorthands$1.borderStyle(style), ...shorthands$1.borderColor(color)];
+    return [...shorthands$2.borderWidth(width), ...shorthands$2.borderStyle(style), ...shorthands$2.borderColor(color)];
   },
   borderInline: rawValue => {
     if (typeof rawValue === "number") {
       return [["borderInlineWidth", rawValue], ["borderInlineStartWidth", null], ["borderInlineEndWidth", null]];
     }
     const [width, style, color] = (0, _splitCssValue$2.default)(rawValue);
-    return [...shorthands$1.borderInlineWidth(width), ...shorthands$1.borderInlineStyle(style), ...shorthands$1.borderInlineColor(color)];
+    return [...shorthands$2.borderInlineWidth(width), ...shorthands$2.borderInlineStyle(style), ...shorthands$2.borderInlineColor(color)];
   },
   borderBlock: rawValue => {
     if (typeof rawValue === "number") {
       return [["borderBlockWidth", rawValue], ["borderTopWidth", null], ["borderBottomWidth", null]];
     }
     const [width, style, color] = (0, _splitCssValue$2.default)(rawValue);
-    return [...shorthands$1.borderBlockWidth(width), ...shorthands$1.borderBlockStyle(style), ...shorthands$1.borderBlockColor(color)];
+    return [...shorthands$2.borderBlockWidth(width), ...shorthands$2.borderBlockStyle(style), ...shorthands$2.borderBlockColor(color)];
   },
   borderTop: rawValue => {
     if (typeof rawValue === "number") {
@@ -673,55 +694,61 @@ const shorthands$1 = {
   textEmphasis: value => [["textEmphasis", value], ["textEmphasisColor", null], ["textEmphasisStyle", null]],
   transition: value => [["transition", value], ["transitionDelay", null], ["transitionDuration", null], ["transitionProperty", null], ["transitionTimingFunction", null]]
 };
-const aliases$1 = {
-  borderHorizontal: shorthands$1.borderInline,
-  borderVertical: shorthands$1.borderBlock,
-  borderBlockStart: shorthands$1.borderTop,
-  borderEnd: shorthands$1.borderInlineEnd,
-  borderBlockEnd: shorthands$1.borderBottom,
-  borderStart: shorthands$1.borderInlineStart,
-  borderHorizontalWidth: shorthands$1.borderInlineWidth,
-  borderHorizontalStyle: shorthands$1.borderInlineStyle,
-  borderHorizontalColor: shorthands$1.borderInlineColor,
-  borderVerticalWidth: shorthands$1.borderBlockWidth,
-  borderVerticalStyle: shorthands$1.borderBlockStyle,
-  borderVerticalColor: shorthands$1.borderBlockColor,
+const aliases$2 = {
+  borderHorizontal: shorthands$2.borderInline,
+  borderVertical: shorthands$2.borderBlock,
+  borderBlockStart: shorthands$2.borderTop,
+  borderEnd: shorthands$2.borderInlineEnd,
+  borderBlockEnd: shorthands$2.borderBottom,
+  borderStart: shorthands$2.borderInlineStart,
+  blockSize: val => [["height", val]],
+  inlineSize: val => [["width", val]],
+  minBlockSize: val => [["minHeight", val]],
+  minInlineSize: val => [["minWidth", val]],
+  maxBlockSize: val => [["maxHeight", val]],
+  maxInlineSize: val => [["maxWidth", val]],
+  borderHorizontalWidth: shorthands$2.borderInlineWidth,
+  borderHorizontalStyle: shorthands$2.borderInlineStyle,
+  borderHorizontalColor: shorthands$2.borderInlineColor,
+  borderVerticalWidth: shorthands$2.borderBlockWidth,
+  borderVerticalStyle: shorthands$2.borderBlockStyle,
+  borderVerticalColor: shorthands$2.borderBlockColor,
   borderBlockStartColor: value => [["borderTopColor", value]],
   borderBlockEndColor: value => [["borderBottomColor", value]],
   borderBlockStartStyle: value => [["borderTopStyle", value]],
   borderBlockEndStyle: value => [["borderBottomStyle", value]],
   borderBlockStartWidth: value => [["borderTopWidth", value]],
   borderBlockEndWidth: value => [["borderBottomWidth", value]],
-  borderStartColor: shorthands$1.borderInlineStartColor,
-  borderEndColor: shorthands$1.borderInlineEndColor,
-  borderStartStyle: shorthands$1.borderInlineStartStyle,
-  borderEndStyle: shorthands$1.borderInlineEndStyle,
-  borderStartWidth: shorthands$1.borderInlineStartWidth,
-  borderEndWidth: shorthands$1.borderInlineEndWidth,
+  borderStartColor: shorthands$2.borderInlineStartColor,
+  borderEndColor: shorthands$2.borderInlineEndColor,
+  borderStartStyle: shorthands$2.borderInlineStartStyle,
+  borderEndStyle: shorthands$2.borderInlineEndStyle,
+  borderStartWidth: shorthands$2.borderInlineStartWidth,
+  borderEndWidth: shorthands$2.borderInlineEndWidth,
   borderTopStartRadius: value => [["borderStartStartRadius", value]],
   borderTopEndRadius: value => [["borderStartEndRadius", value]],
   borderBottomStartRadius: value => [["borderEndStartRadius", value]],
   borderBottomEndRadius: value => [["borderEndEndRadius", value]],
   marginBlockStart: value => [["marginTop", value]],
   marginBlockEnd: value => [["marginBottom", value]],
-  marginStart: shorthands$1.marginInlineStart,
-  marginEnd: shorthands$1.marginInlineEnd,
-  marginHorizontal: shorthands$1.marginInline,
-  marginVertical: shorthands$1.marginBlock,
+  marginStart: shorthands$2.marginInlineStart,
+  marginEnd: shorthands$2.marginInlineEnd,
+  marginHorizontal: shorthands$2.marginInline,
+  marginVertical: shorthands$2.marginBlock,
   paddingBlockStart: rawValue => [["paddingTop", rawValue]],
   paddingBlockEnd: rawValue => [["paddingBottom", rawValue]],
-  paddingStart: shorthands$1.paddingInlineStart,
-  paddingEnd: shorthands$1.paddingInlineEnd,
-  paddingHorizontal: shorthands$1.paddingInline,
-  paddingVertical: shorthands$1.paddingBlock,
+  paddingStart: shorthands$2.paddingInlineStart,
+  paddingEnd: shorthands$2.paddingInlineEnd,
+  paddingHorizontal: shorthands$2.paddingInline,
+  paddingVertical: shorthands$2.paddingBlock,
   insetBlockStart: value => [["top", value]],
   insetBlockEnd: value => [["bottom", value]],
-  start: shorthands$1.insetInlineStart,
-  end: shorthands$1.insetInlineEnd
+  start: shorthands$2.insetInlineStart,
+  end: shorthands$2.insetInlineEnd
 };
 const expansions$3 = {
-  ...shorthands$1,
-  ...aliases$1
+  ...shorthands$2,
+  ...aliases$2
 };
 var _default$4 = expansions$3;
 applicationOrder.default = _default$4;
@@ -734,7 +761,7 @@ Object.defineProperty(legacyExpandShorthands, "__esModule", {
 legacyExpandShorthands.default = void 0;
 var _splitCssValue$1 = _interopRequireDefault$i(splitCssValue);
 function _interopRequireDefault$i(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const expansions$2 = {
+const shorthands$1 = {
   border: rawValue => {
     return [["borderTop", rawValue], ["borderEnd", rawValue], ["borderBottom", rawValue], ["borderStart", rawValue]];
   },
@@ -756,10 +783,19 @@ const expansions$2 = {
     const [top, right = top, bottom = top, left = right] = (0, _splitCssValue$1.default)(rawValue);
     return [["borderTopWidth", top], ["borderEndWidth", right], ["borderBottomWidth", bottom], ["borderStartWidth", left]];
   },
+  borderHorizontalColor: rawValue => [["borderStartColor", rawValue], ["borderEndColor", rawValue]],
+  borderHorizontalStyle: rawValue => [["borderStartStyle", rawValue], ["borderEndStyle", rawValue]],
+  borderHorizontalWidth: rawValue => [["borderStartWidth", rawValue], ["borderEndWidth", rawValue]],
+  borderVerticalColor: rawValue => [["borderTopColor", rawValue], ["borderBottomColor", rawValue]],
+  borderVerticalStyle: rawValue => [["borderTopStyle", rawValue], ["borderBottomStyle", rawValue]],
+  borderVerticalWidth: rawValue => [["borderTopWidth", rawValue], ["borderBottomWidth", rawValue]],
   borderRadius: rawValue => {
     const [top, right = top, bottom = top, left = right] = (0, _splitCssValue$1.default)(rawValue);
     return [["borderTopStartRadius", top], ["borderTopEndRadius", right], ["borderBottomEndRadius", bottom], ["borderBottomStartRadius", left]];
   },
+  inset: rawValue => [["top", rawValue], ["end", rawValue], ["bottom", rawValue], ["start", rawValue]],
+  insetInline: rawValue => [["start", rawValue], ["end", rawValue]],
+  insetBlock: rawValue => [["top", rawValue], ["bottom", rawValue]],
   margin: rawValue => {
     const [top, right = top, bottom = top, left = right] = (0, _splitCssValue$1.default)(rawValue);
     return [["marginTop", top], ["marginEnd", right], ["marginBottom", bottom], ["marginStart", left]];
@@ -778,13 +814,63 @@ const expansions$2 = {
     const [top, right = top, bottom = top, left = right] = (0, _splitCssValue$1.default)(rawValue);
     return [["paddingTop", top], ["paddingEnd", right], ["paddingBottom", bottom], ["paddingStart", left]];
   },
-  paddingHorizontal: rawValue => {
-    return [["paddingStart", rawValue], ["paddingEnd", rawValue]];
+  paddingHorizontal: val => {
+    return [["paddingStart", val], ["paddingEnd", val]];
   },
-  paddingVertical: rawValue => {
-    return [["paddingTop", rawValue], ["paddingBottom", rawValue]];
+  paddingVertical: val => {
+    return [["paddingTop", val], ["paddingBottom", val]];
   }
 };
+const aliases$1 = {
+  insetBlockStart: val => [["top", val]],
+  insetBlockEnd: val => [["bottom", val]],
+  insetInlineStart: val => [["start", val]],
+  insetInlineEnd: val => [["end", val]],
+  blockSize: val => [["height", val]],
+  inlineSize: val => [["width", val]],
+  minBlockSize: val => [["minHeight", val]],
+  minInlineSize: val => [["minWidth", val]],
+  maxBlockSize: val => [["maxHeight", val]],
+  maxInlineSize: val => [["maxWidth", val]],
+  borderBlockWidth: shorthands$1.borderVerticalWidth,
+  borderBlockStyle: shorthands$1.borderVerticalStyle,
+  borderBlockColor: shorthands$1.borderVerticalColor,
+  borderBlockStartWidth: val => [["borderTopWidth", val]],
+  borderBlockStartStyle: val => [["borderTopStyle", val]],
+  borderBlockStartColor: val => [["borderTopColor", val]],
+  borderBlockEndWidth: val => [["borderBottomWidth", val]],
+  borderBlockEndStyle: val => [["borderBottomStyle", val]],
+  borderBlockEndColor: val => [["borderBottomColor", val]],
+  borderInlineWidth: shorthands$1.borderHorizontalWidth,
+  borderInlineStyle: shorthands$1.borderHorizontalStyle,
+  borderInlineColor: shorthands$1.borderHorizontalColor,
+  borderInlineStartWidth: val => [["borderStartWidth", val]],
+  borderInlineStartStyle: val => [["borderStartStyle", val]],
+  borderInlineStartColor: val => [["borderStartColor", val]],
+  borderInlineEndWidth: val => [["borderEndWidth", val]],
+  borderInlineEndStyle: val => [["borderEndStyle", val]],
+  borderInlineEndColor: val => [["borderEndColor", val]],
+  borderStartStartRadius: val => [["borderTopStartRadius", val]],
+  borderStartEndRadius: val => [["borderTopEndRadius", val]],
+  borderEndStartRadius: val => [["borderBottomStartRadius", val]],
+  borderEndEndRadius: val => [["borderBottomEndRadius", val]],
+  marginBlock: shorthands$1.marginVertical,
+  marginBlockStart: val => [["marginTop", val]],
+  marginBlockEnd: val => [["marginBottom", val]],
+  marginInline: shorthands$1.marginHorizontal,
+  marginInlineStart: val => [["marginStart", val]],
+  marginInlineEnd: val => [["marginEnd", val]],
+  paddingBlock: shorthands$1.paddingVertical,
+  paddingBlockStart: val => [["paddingTop", val]],
+  paddingBlockEnd: val => [["paddingBottom", val]],
+  paddingInline: shorthands$1.paddingHorizontal,
+  paddingInlineStart: val => [["paddingStart", val]],
+  paddingInlineEnd: val => [["paddingEnd", val]]
+};
+const expansions$2 = {
+  ...shorthands$1,
+  ...aliases$1
+};
 var _default$3 = expansions$2;
 legacyExpandShorthands.default = _default$3;
 
@@ -856,6 +942,12 @@ const aliases = {
   borderEnd: shorthands.borderInlineEnd,
   borderBlockEnd: shorthands.borderBottom,
   borderStart: shorthands.borderInlineStart,
+  blockSize: val => [["height", val]],
+  inlineSize: val => [["width", val]],
+  minBlockSize: val => [["minHeight", val]],
+  minInlineSize: val => [["minWidth", val]],
+  maxBlockSize: val => [["maxHeight", val]],
+  maxInlineSize: val => [["maxWidth", val]],
   borderHorizontalWidth: value => [["borderInlineWidth", value]],
   borderHorizontalStyle: value => [["borderInlineStyle", value]],
   borderHorizontalColor: value => [["borderInlineColor", value]],
@@ -1197,6 +1289,8 @@ Object.defineProperty(transformValue$1, "__esModule", {
   value: true
 });
 transformValue$1.default = transformValue;
+var getNumberSuffix_1 = transformValue$1.getNumberSuffix = getNumberSuffix;
+var timeUnits_1 = transformValue$1.timeUnits = lengthUnits_1 = transformValue$1.lengthUnits = void 0;
 var _normalizeValue = _interopRequireDefault$a(normalizeValue$1);
 function _interopRequireDefault$a(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function transformValue(key, rawValue) {
@@ -1223,7 +1317,7 @@ function getNumberSuffix(key) {
     return suffix;
   }
 }
-const unitlessNumberProperties = new Set(["animationIterationCount", "borderImageOutset", "borderImageSlice", "borderImageWidth", "columnCount", "flex", "flexGrow", "flexPositive", "flexShrink", "flexOrder", "gridRow", "gridColumn", "fontWeight", "lineClamp", "lineHeight", "opacity", "order", "orphans", "tabSize", "widows", "zIndex", "fillOpacity", "floodOpacity", "stopOpacity", "strokeDasharray", "strokeDashoffset", "strokeMiterlimit", "strokeOpacity", "strokeWidth"]);
+const unitlessNumberProperties = new Set(["animationIterationCount", "aspectRatio", "borderImageOutset", "borderImageSlice", "borderImageWidth", "columnCount", "flex", "flexGrow", "flexPositive", "flexShrink", "flexOrder", "gridRow", "gridColumn", "fontWeight", "lineClamp", "lineHeight", "opacity", "order", "orphans", "tabSize", "widows", "zIndex", "fillOpacity", "floodOpacity", "stopOpacity", "strokeDasharray", "strokeDashoffset", "strokeMiterlimit", "strokeOpacity", "strokeWidth"]);
 const numberPropertySuffixes = {
   animationDelay: "ms",
   animationDuration: "ms",
@@ -1231,6 +1325,10 @@ const numberPropertySuffixes = {
   transitionDuration: "ms",
   voiceDuration: "ms"
 };
+const timeUnits = new Set(Object.keys(numberPropertySuffixes));
+timeUnits_1 = transformValue$1.timeUnits = timeUnits;
+const lengthUnits = new Set(["backgroundPositionX", "backgroundPositionY", "blockSize", "borderBlockEndWidth", "borderBlockStartWidth", "borderBlockWidth", "borderVerticalWidth", "borderVerticalWidth", "borderBottomLeftRadius", "borderBottomRightRadius", "borderBottomWidth", "borderEndEndRadius", "borderEndStartRadius", "borderImageWidth", "borderInlineEndWidth", "borderEndWidth", "borderInlineStartWidth", "borderStartWidth", "borderInlineWidth", "borderHorizontalWidth", "borderLeftWidth", "borderRightWidth", "borderSpacing", "borderStartEndRadius", "borderStartStartRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderTopWidth", "bottom", "columnGap", "columnRuleWidth", "columnWidth", "containIntrinsicBlockSize", "containIntrinsicHeight", "containIntrinsicInlineSize", "containIntrinsicWidth", "flexBasis", "fontSize", "fontSmooth", "height", "inlineSize", "insetBlockEnd", "insetBlockStart", "insetInlineEnd", "insetInlineStart", "left", "letterSpacing", "marginBlockEnd", "marginBlockStart", "marginBottom", "marginInlineEnd", "marginEnd", "marginInlineStart", "marginStart", "marginLeft", "marginRight", "marginTop", "maskBorderOutset", "maskBorderWidth", "maxBlockSize", "maxHeight", "maxInlineSize", "maxWidth", "minBlockSize", "minHeight", "minInlineSize", "minWidth", "offsetDistance", "outlineOffset", "outlineWidth", "overflowClipMargin", "paddingBlockEnd", "paddingBlockStart", "paddingBottom", "paddingInlineEnd", "paddingEnd", "paddingInlineStart", "paddingStart", "paddingLeft", "paddingRight", "paddingTop", "perspective", "right", "rowGap", "scrollMarginBlockEnd", "scrollMarginBlockStart", "scrollMarginBottom", "scrollMarginInlineEnd", "scrollMarginInlineStart", "scrollMarginLeft", "scrollMarginRight", "scrollMarginTop", "scrollPaddingBlockEnd", "scrollPaddingBlockStart", "scrollPaddingBottom", "scrollPaddingInlineEnd", "scrollPaddingInlineStart", "scrollPaddingLeft", "scrollPaddingRight", "scrollPaddingTop", "scrollSnapMarginBottom", "scrollSnapMarginLeft", "scrollSnapMarginRight", "scrollSnapMarginTop", "shapeMargin", "tabSize", "textDecorationThickness", "textIndent", "textUnderlineOffset", "top", "transformOrigin", "translate", "verticalAlign", "width", "wordSpacing", "border", "borderBlock", "borderBlockEnd", "borderBlockStart", "borderBottom", "borderLeft", "borderRadius", "borderRight", "borderTop", "borderWidth", "columnRule", "containIntrinsicSize", "gap", "inset", "insetBlock", "insetInline", "margin", "marginBlock", "marginVertical", "marginInline", "marginHorizontal", "offset", "outline", "padding", "paddingBlock", "paddingVertical", "paddingInline", "paddingHorizontal", "scrollMargin", "scrollMarginBlock", "scrollMarginInline", "scrollPadding", "scrollPaddingBlock", "scrollPaddingInline", "scrollSnapMargin"]);
+var lengthUnits_1 = transformValue$1.lengthUnits = lengthUnits;
 
 var generateCssRule = {};
 
@@ -2165,7 +2263,7 @@ function styleXOverrideVars(themeVars, variables, options) {
     [themeVars.__themeName__]: overrideClassName
   }, {
     [overrideClassName]: {
-      ltr: `.${overrideClassName}{${cssVariablesOverrideString}${atRulesCss}}`,
+      ltr: `.${overrideClassName}{${cssVariablesOverrideString}}${atRulesCss}`,
       priority: 0.99,
       rtl: undefined
     }
@@ -2257,10 +2355,215 @@ function genFileBasedIdentifier(_ref) {
   return `${fileName}//${exportName}${key != null ? `.${key}` : ""}`;
 }
 
+var types$1 = {};
+
+Object.defineProperty(types$1, "__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.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.CSSType = types$1.Angle = void 0;
+class CSSType {}
+types$1.CSSType = CSSType;
+class Angle extends CSSType {
+  syntax = "<angle>";
+  static syntax = "<angle>";
+  constructor(value) {
+    super();
+    this.value = value;
+  }
+  static create(value) {
+    return new Angle(value);
+  }
+}
+types$1.Angle = Angle;
+const angle = Angle.create;
+types$1.angle = angle;
+class Color extends CSSType {
+  syntax = "<color>";
+  constructor(value) {
+    super();
+    this.value = value;
+  }
+  static create(value) {
+    return new Color(value);
+  }
+}
+types$1.Color = Color;
+const color = Color.create;
+types$1.color = color;
+class Url extends CSSType {
+  syntax = "<url>";
+  constructor(value) {
+    super();
+    this.value = value;
+  }
+  static create(value) {
+    return new Url(value);
+  }
+}
+types$1.Url = Url;
+const url = Url.create;
+types$1.url = url;
+class Image extends Url {
+  syntax = "<image>";
+  constructor(value) {
+    super(value);
+    this.value = value;
+  }
+  static create(value) {
+    return new Image(value);
+  }
+}
+types$1.Image = Image;
+const image = Image.create;
+types$1.image = image;
+class Integer extends CSSType {
+  syntax = "<integer>";
+  constructor(value) {
+    super();
+    this.value = value;
+  }
+  static create(value) {
+    return new Integer(value);
+  }
+}
+types$1.Integer = Integer;
+const integer = Integer.create;
+types$1.integer = integer;
+class LengthPercentage extends CSSType {
+  syntax = "<length-percentage>";
+  constructor(value) {
+    super();
+    this.value = value;
+  }
+  static createLength(value) {
+    return new LengthPercentage(convertNumberToLength(value));
+  }
+  static createPercentage(value) {
+    return new LengthPercentage(convertNumberToPercentage(value));
+  }
+}
+types$1.LengthPercentage = LengthPercentage;
+const lengthPercentage = LengthPercentage.createLength;
+types$1.lengthPercentage = lengthPercentage;
+class Length extends LengthPercentage {
+  syntax = "<length>";
+  constructor(value) {
+    super(convertNumberToLength(value));
+  }
+  static create(value) {
+    return new Length(value);
+  }
+}
+types$1.Length = Length;
+const length = Length.create;
+types$1.length = length;
+class Percentage extends LengthPercentage {
+  syntax = "<percentage>";
+  constructor(value) {
+    super(convertNumberToPercentage(value));
+  }
+  static create(value) {
+    return new Percentage(value);
+  }
+}
+types$1.Percentage = Percentage;
+const percentage = Percentage.create;
+types$1.percentage = percentage;
+class Num extends CSSType {
+  syntax = "<number>";
+  constructor(value) {
+    super();
+    this.value = value;
+  }
+  static create(value) {
+    return new Num(value);
+  }
+}
+types$1.Num = Num;
+const number = Num.create;
+types$1.number = number;
+class Resolution extends CSSType {
+  syntax = "<resolution>";
+  constructor(value) {
+    super();
+    this.value = value;
+  }
+  static create(value) {
+    return new Resolution(value);
+  }
+}
+types$1.Resolution = Resolution;
+const resolution = Resolution.create;
+types$1.resolution = resolution;
+class Time extends CSSType {
+  syntax = "<time>";
+  constructor(value) {
+    super();
+    this.value = value;
+  }
+  static create(value) {
+    return new Time(value);
+  }
+}
+types$1.Time = Time;
+const time = Time.create;
+types$1.time = time;
+class TransformFunction extends CSSType {
+  syntax = "<transform-function>";
+  constructor(value) {
+    super();
+    this.value = value;
+  }
+  static create(value) {
+    return new TransformFunction(value);
+  }
+}
+types$1.TransformFunction = TransformFunction;
+const transformFunction = TransformFunction.create;
+types$1.transformFunction = transformFunction;
+class TransformList extends CSSType {
+  syntax = "<transform-list>";
+  constructor(value) {
+    super();
+    this.value = value;
+  }
+  static create(value) {
+    return new TransformList(value);
+  }
+}
+types$1.TransformList = TransformList;
+const transformList = TransformList.create;
+types$1.transformList = transformList;
+const convertNumberToStringUsing = (transformNumber, defaultStr) => value => {
+  if (typeof value === "number") {
+    return transformNumber(value);
+  }
+  if (typeof value === "string") {
+    return value;
+  }
+  if (typeof value === "object") {
+    const {
+      default: defaultValue,
+      ...rest
+    } = value;
+    const defaultResult = convertNumberToLength(defaultValue);
+    const result = {
+      default: typeof defaultResult === "string" ? defaultResult : defaultStr
+    };
+    for (const [key, value] of Object.entries(rest)) {
+      result[key] = convertNumberToLength(value);
+    }
+    return result;
+  }
+  return value;
+};
+const convertNumberToLength = convertNumberToStringUsing(value => value === 0 ? "0" : `${value}px`, "0px");
+const convertNumberToPercentage = convertNumberToStringUsing(value => value === 0 ? "0" : `${value * 100}%`, "0");
+
 Object.defineProperty(lib, "__esModule", {
   value: true
 });
-var utils_1 = lib.utils = overrideVars_1 = lib.overrideVars = messages_1 = lib.messages = keyframes_1 = lib.keyframes = include_1 = lib.include = firstThatWorks_1 = lib.firstThatWorks = createVars_1 = lib.createVars = create_1 = lib.create = IncludedStyles_1 = lib.IncludedStyles = void 0;
+var utils_1 = lib.utils = lib.types = overrideVars_1 = lib.overrideVars = messages_1 = lib.messages = keyframes_1 = lib.keyframes = include_1 = lib.include = firstThatWorks_1 = lib.firstThatWorks = createVars_1 = lib.createVars = create_1 = lib.create = IncludedStyles_1 = lib.IncludedStyles = void 0;
 var _stylexCreate = _interopRequireDefault$2(stylexCreate$1);
 var _stylexCreateVars = _interopRequireDefault$2(stylexCreateVars$1);
 var _stylexOverrideVars = _interopRequireDefault$2(stylexOverrideVars$1);
@@ -2270,6 +2573,8 @@ var _stylexFirstThatWorks = _interopRequireDefault$2(stylexFirstThatWorks$1);
 var _hash = _interopRequireDefault$2(hash$1);
 var _fileBasedIdentifier = _interopRequireDefault$2(fileBasedIdentifier);
 var m = _interopRequireWildcard(messages$4);
+var _types = _interopRequireWildcard(types$1);
+lib.types = _types;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault$2(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -2336,6 +2641,9 @@ function canBeIdentifier(str) {
 function isArrayExpression(path, props) {
   return path.isArrayExpression(props);
 }
+function isArrowFunctionExpression(path, props) {
+  return path.isArrowFunctionExpression(props);
+}
 function isBinaryExpression(path, props) {
   return path.isBinaryExpression(props);
 }
@@ -2423,9 +2731,6 @@ function isTaggedTemplateExpression(path, props) {
 function isTemplateLiteral(path, props) {
   return path.isTemplateLiteral(props);
 }
-function isTypeCastExpression(path, props) {
-  return path.isTypeCastExpression(props);
-}
 function isUnaryExpression(path, props) {
   return path.isUnaryExpression(props);
 }
@@ -2901,6 +3206,173 @@ function evaluate(path, traversalState) {
   };
 }
 
+function evaluateStyleXCreateArg(path, traversalState) {
+  let functions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
+    identifiers: {},
+    memberExpressions: {}
+  };
+  if (!isObjectExpression(path)) {
+    return evaluate(path, traversalState, functions);
+  }
+  const value = {};
+  const fns = {};
+  for (const prop of path.get("properties")) {
+    if (!isObjectProperty(prop)) {
+      return evaluate(path, traversalState, functions);
+    }
+    const objPropPath = prop;
+    const keyResult = evaluateObjKey(objPropPath, traversalState, functions);
+    if (!keyResult.confident) {
+      return {
+        confident: false,
+        deopt: keyResult.deopt,
+        value: null
+      };
+    }
+    const key = keyResult.value;
+    const valPath = prop.get("value");
+    if (!isArrowFunctionExpression(valPath)) {
+      const val = evaluate(valPath, traversalState, functions);
+      if (!val.confident) {
+        return val;
+      }
+      value[key] = val.value;
+      continue;
+    }
+    const fnPath = valPath;
+    const allParams = fnPath.get("params");
+    const params = allParams.filter(param => isIdentifier(param)).map(param => param.node);
+    if (params.length !== allParams.length) {
+      return {
+        confident: false,
+        deopt: valPath,
+        value: null
+      };
+    }
+    const fnBody = fnPath.get("body");
+    if (!isObjectExpression(fnBody)) {
+      return evaluate(path, traversalState, functions);
+    }
+    const fnObjectBody = fnBody;
+    const evalResult = evaluatePartialObjectRecursively(fnObjectBody, traversalState, functions);
+    if (!evalResult.confident) {
+      const {
+        confident,
+        value: v,
+        deopt
+      } = evalResult;
+      return {
+        confident,
+        value: v,
+        deopt
+      };
+    }
+    const {
+      value: v,
+      inlineStyles
+    } = evalResult;
+    value[key] = v;
+    fns[key] = [params, inlineStyles ?? {}];
+  }
+  return {
+    value,
+    confident: true,
+    fns
+  };
+}
+function evaluatePartialObjectRecursively(path, traversalState) {
+  let functions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
+    identifiers: {},
+    memberExpressions: {}
+  };
+  let keyPath = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
+  const obj = {};
+  const inlineStyles = {};
+  const props = path.get("properties");
+  for (const prop of props) {
+    if (isObjectMethod(prop)) {
+      return {
+        value: null,
+        confident: false
+      };
+    }
+    if (isSpreadElement(prop)) {
+      const result = evaluate(prop.get("argument"), traversalState, functions);
+      if (!result.confident) {
+        return result;
+      }
+      Object.assign(obj, result.value);
+      continue;
+    }
+    if (isObjectProperty(prop)) {
+      const keyResult = evaluateObjKey(prop, traversalState, functions);
+      if (!keyResult.confident) {
+        return {
+          confident: false,
+          deopt: keyResult.deopt,
+          value: null
+        };
+      }
+      const key = keyResult.value;
+      const valuePath = prop.get("value");
+      if (isObjectExpression(valuePath)) {
+        const result = evaluatePartialObjectRecursively(valuePath, traversalState, functions, [...keyPath, key]);
+        if (!result.confident) {
+          return {
+            confident: false,
+            deopt: result.deopt,
+            value: null
+          };
+        }
+        obj[key] = result.value;
+        Object.assign(inlineStyles, result.inlineStyles);
+      } else {
+        const result = evaluate(valuePath, traversalState, functions);
+        if (!result.confident) {
+          const varName = "--" + (keyPath.length > 0 ? utils_1.hash([...keyPath, key].join("_")) : key);
+          obj[key] = `var(${varName}, revert)`;
+          const node = valuePath.node;
+          if (!t__namespace.isExpression(node)) {
+            throw new Error("Expected expression as style value");
+          }
+          const expression = node;
+          const unit = timeUnits_1.has(key) || lengthUnits_1.has(key) ? getNumberSuffix_1(key) : "";
+          inlineStyles[varName] = unit !== "" ? t__namespace.callExpression(t__namespace.arrowFunctionExpression([t__namespace.identifier("val")], t__namespace.conditionalExpression(t__namespace.binaryExpression("===", t__namespace.unaryExpression("typeof", t__namespace.identifier("val")), t__namespace.stringLiteral("number")), t__namespace.binaryExpression("+", t__namespace.identifier("val"), t__namespace.stringLiteral(unit)), t__namespace.logicalExpression("??", t__namespace.identifier("val"), t__namespace.stringLiteral("initial")))), [expression]) : t__namespace.logicalExpression("??", expression, t__namespace.stringLiteral("initial"));
+        } else {
+          obj[key] = result.value;
+        }
+      }
+    }
+  }
+  return {
+    value: obj,
+    confident: true,
+    inlineStyles
+  };
+}
+function evaluateObjKey(prop, traversalState, functions) {
+  const keyPath = prop.get("key");
+  let key;
+  if (prop.node.computed) {
+    const result = evaluate(keyPath, traversalState, functions);
+    if (!result.confident) {
+      return {
+        confident: false,
+        deopt: result.deopt
+      };
+    }
+    key = result.value;
+  } else if (isIdentifier(keyPath)) {
+    key = keyPath.node.name;
+  } else {
+    key = keyPath.node.value;
+  }
+  return {
+    confident: true,
+    value: String(key)
+  };
+}
+
 function transformStyleXCreate(path, state) {
   const {
     node
@@ -2915,7 +3387,6 @@ function transformStyleXCreate(path, state) {
     if (!isObjectExpression(firstArg)) {
       throw new Error(messages_1.ILLEGAL_ARGUMENT_LENGTH);
     }
-    preProcessStyleArg(firstArg, state);
     state.inStyleXCreate = true;
     const injectedKeyframes = {};
     function keyframes(animation) {
@@ -2958,8 +3429,9 @@ function transformStyleXCreate(path, state) {
     });
     const {
       confident,
-      value
-    } = evaluate(firstArg, state, {
+      value,
+      fns
+    } = evaluateStyleXCreateArg(firstArg, state, {
       identifiers,
       memberExpressions
     });
@@ -2992,7 +3464,26 @@ function transformStyleXCreate(path, state) {
       state.styleMap.set(varName, compiledStyles);
       state.styleVars.set(varName, path.parentPath);
     }
-    path.replaceWith(convertObjectToAST(compiledStyles));
+    const resultAst = convertObjectToAST(compiledStyles);
+    if (fns != null) {
+      resultAst.properties = resultAst.properties.map(prop => {
+        if (t__namespace.isObjectProperty(prop)) {
+          const key = prop.key.type === "Identifier" && !prop.computed ? prop.key.name : prop.key.type === "StringLiteral" ? prop.key.value : null;
+          if (key != null && Object.keys(fns).includes(key)) {
+            const [params, inlineStyles] = fns[key];
+            if (t__namespace.isExpression(prop.value)) {
+              const value = prop.value;
+              prop.value = t__namespace.arrowFunctionExpression(params, t__namespace.arrayExpression([value, t__namespace.objectExpression(Object.entries(inlineStyles).map(_ref => {
+                let [key, value] = _ref;
+                return t__namespace.objectProperty(t__namespace.stringLiteral(key), value);
+              }))]));
+            }
+          }
+        }
+        return prop;
+      });
+    }
+    path.replaceWith(resultAst);
     if (Object.keys(injectedStyles).length === 0) {
       return;
     }
@@ -3040,25 +3531,6 @@ function findNearestStatementAncestor(path) {
   }
   return findNearestStatementAncestor(path.parentPath);
 }
-function preProcessStyleArg(objPath, state) {
-  objPath.traverse({
-    SpreadElement(path) {
-      const argument = path.get("argument");
-      if (!isTypeCastExpression(argument)) {
-        return;
-      }
-      const expression = argument.get("expression");
-      if (!isIdentifier(expression) && !isMemberExpression(expression)) {
-        throw new Error(messages_1.ILLEGAL_NAMESPACE_VALUE);
-      }
-      if (!(isObjectExpression(path.parentPath) && isObjectProperty(path.parentPath.parentPath) && isObjectExpression(path.parentPath.parentPath.parentPath) && isCallExpression(path.parentPath.parentPath.parentPath.parentPath))) {
-        throw new Error(messages_1.ILLEGAL_NESTED_PSEUDO);
-      }
-      const stylexName = getStylexDefaultImport(path, state);
-      argument.replaceWith(t__namespace.callExpression(t__namespace.memberExpression(t__namespace.identifier(stylexName), t__namespace.identifier("include")), [expression.node]));
-    }
-  });
-}
 function getStylexDefaultImport(path, state) {
   const statementPath = findNearestStatementAncestor(path);
   let stylexName;
@@ -3091,10 +3563,15 @@ function transformStyleXCreateVars(callExpressionPath, state) {
     const varId = variableDeclaratorNode.id;
     const args = callExpressionPath.get("arguments");
     const firstArg = args[0];
+    const identifiers = {};
+    const memberExpressions = {};
     const {
       confident,
       value
-    } = evaluate(firstArg, state);
+    } = evaluate(firstArg, state, {
+      identifiers,
+      memberExpressions
+    });
     if (!confident) {
       throw new Error(messages_1.NON_STATIC_VALUE);
     }
@@ -3479,7 +3956,7 @@ Object.defineProperty(stylex$1, "__esModule", {
 });
 stylex$1.keyframes = stylex$1.inject = stylex$1.include = stylex$1.firstThatWorks = default_1 = stylex$1.default = stylex$1.create = stylex$1.UNSUPPORTED_PROPERTY = void 0;
 stylex$1.spread = spread;
-stylex$1.unstable_overrideVars = stylex$1.unstable_createVars = stylex$1.stylex = void 0;
+stylex$1.unstable_overrideVars = stylex$1.unstable_createVars = stylex$1.types = stylex$1.stylex = void 0;
 var _stylexInject = _interopRequireDefault(stylexInject);
 var _styleq = require$$1;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -3510,6 +3987,49 @@ const unstable_overrideVars = stylexOverrideVars;
 stylex$1.unstable_overrideVars = unstable_overrideVars;
 const include = stylexIncludes;
 stylex$1.include = include;
+const types = {
+  angle: _v => {
+    throw new Error(errorForType("angle"));
+  },
+  color: _v => {
+    throw new Error(errorForType("color"));
+  },
+  url: _v => {
+    throw new Error(errorForType("url"));
+  },
+  image: _v => {
+    throw new Error(errorForType("image"));
+  },
+  integer: _v => {
+    throw new Error(errorForType("integer"));
+  },
+  lengthPercentage: _v => {
+    throw new Error(errorForType("lengthPercentage"));
+  },
+  length: _v => {
+    throw new Error(errorForType("length"));
+  },
+  percentage: _v => {
+    throw new Error(errorForType("percentage"));
+  },
+  number: _v => {
+    throw new Error(errorForType("number"));
+  },
+  resolution: _v => {
+    throw new Error(errorForType("resolution"));
+  },
+  time: _v => {
+    throw new Error(errorForType("time"));
+  },
+  transformFunction: _v => {
+    throw new Error(errorForType("transformFunction"));
+  },
+  transformList: _v => {
+    throw new Error(errorForType("transformList"));
+  }
+};
+stylex$1.types = types;
+const errorForType = type => `stylex.types.${type} should be compiled away by @stylexjs/babel-plugin`;
 const keyframes = _keyframes => {
   throw new Error("stylex.keyframes should never be called");
 };
@@ -3540,10 +4060,11 @@ _stylex.keyframes = keyframes;
 _stylex.firstThatWorks = firstThatWorks;
 _stylex.inject = inject;
 _stylex.UNSUPPORTED_PROPERTY = UNSUPPORTED_PROPERTY;
-var _default = _stylex;
-var default_1 = stylex$1.default = _default;
+_stylex.types = types;
 const stylex = _stylex;
 stylex$1.stylex = stylex;
+var _default = _stylex;
+var default_1 = stylex$1.default = _default;
 
 function skipStylexMergeChildren(path, state) {
   const {

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

@@ -42,4 +42,4 @@ export declare function evaluate(
   path: NodePath,
   traversalState: StateManager,
   functions: FunctionConfig,
-): { confident: boolean; value: any; deopt?: null | NodePath };
+): Readonly<{ confident: boolean; value: any; deopt?: null | NodePath }>;

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

@@ -46,8 +46,8 @@ declare export function evaluate(
   path: NodePath<>,
   traversalState: StateManager,
   functions: FunctionConfig,
-): {
+): $ReadOnly<{
   confident: boolean,
   value: any,
   deopt?: null | NodePath<>,
-};
+}>;

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

@@ -45,6 +45,7 @@ declare class StateManager {
   readonly stylexKeyframesImport: Set<string>;
   readonly stylexCreateVarsImport: Set<string>;
   readonly stylexOverrideVarsImport: Set<string>;
+  readonly stylexTypesImport: Set<string>;
   readonly styleMap: Map<string, CompiledNamespaces>;
   readonly styleVars: Map<string, NodePath>;
   readonly styleVarsToKeep: Set<[string, null | string]>;

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

@@ -50,6 +50,7 @@ declare export default class StateManager {
   +stylexKeyframesImport: Set<string>;
   +stylexCreateVarsImport: Set<string>;
   +stylexOverrideVarsImport: Set<string>;
+  +stylexTypesImport: Set<string>;
   +styleMap: Map<string, CompiledNamespaces>;
   +styleVars: Map<string, NodePath<>>;
   +styleVarsToKeep: Set<[string, null | string]>;

package/lib/visitors/stylex-create/index.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/index.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-create/parse-style-function.d.ts

@@ -0,0 +1,18 @@
+/* eslint-disable no-unused-vars */
+/**
+ * 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 '@babel/traverse';
+import StateManager from '../../utils/state-manager';
+import { type FunctionConfig } from '../../utils/evaluate-path';
+export declare function evaluateStyleFunction(
+  path: NodePath,
+  traversalState: StateManager,
+  functions: FunctionConfig,
+): { confident: boolean; value: any; deopt?: null | NodePath };

package/lib/visitors/stylex-create/parse-style-function.js.flow

@@ -0,0 +1,23 @@
+/* eslint-disable no-unused-vars */
+/**
+ * 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 '../../utils/state-manager';
+import { type FunctionConfig } from '../../utils/evaluate-path';
+// This
+declare export function evaluateStyleFunction(
+  path: NodePath<>,
+  traversalState: StateManager,
+  functions: FunctionConfig,
+): {
+  confident: boolean,
+  value: any,
+  deopt?: null | NodePath<>,
+};

package/lib/visitors/stylex-create/parse-stylex-create-arg.d.ts

@@ -0,0 +1,29 @@
+/* eslint-disable no-unused-vars */
+/**
+ * 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 '@babel/traverse';
+import * as t from '@babel/types';
+import StateManager from '../../utils/state-manager';
+import { type FunctionConfig } from '../../utils/evaluate-path';
+export declare function evaluateStyleXCreateArg(
+  path: NodePath,
+  traversalState: StateManager,
+  functions: FunctionConfig,
+): Readonly<{
+  confident: boolean;
+  value: any;
+  deopt?: null | NodePath;
+  fns?: {
+    [$$Key$$: string]: [
+      Array<t.Identifier>,
+      { readonly [$$Key$$: string]: t.Expression | t.PatternLike },
+    ];
+  };
+}>;

package/lib/visitors/stylex-create/parse-stylex-create-arg.js.flow

@@ -0,0 +1,30 @@
+/* eslint-disable no-unused-vars */
+/**
+ * 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';
+import { type FunctionConfig } from '../../utils/evaluate-path';
+// This
+declare export function evaluateStyleXCreateArg(
+  path: NodePath<>,
+  traversalState: StateManager,
+  functions: FunctionConfig,
+): $ReadOnly<{
+  confident: boolean,
+  value: any,
+  deopt?: null | NodePath<>,
+  fns?: {
+    [string]: [
+      Array<t.Identifier>,
+      { +[string]: t.Expression | t.PatternLike },
+    ],
+  },
+}>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/babel-plugin",
-  "version": "0.2.0-beta.18",
+  "version": "0.2.0-beta.20",
   "description": "StyleX babel plugin.",
   "main": "lib/index.js",
   "repository": "https://github.com/facebook/stylex",
@@ -12,7 +12,7 @@
     "test": "jest"
   },
   "dependencies": {
-    "@stylexjs/shared": "0.2.0-beta.18"
+    "@stylexjs/shared": "0.2.0-beta.20"
   },
   "peerDependencies": {
     "@babel/core": "^7.19.6",
@@ -26,7 +26,8 @@
     "verbose": true,
     "snapshotFormat": {
       "printBasicPrototype": false
-    }
+    },
+    "prettierPath": null
   },
   "files": [
     "flow_modules/*",