@stylexjs/babel-plugin 0.17.0 → 0.17.2

package/lib/index.js

@@ -43,6 +43,12 @@ const string = (message = defaultMessage('a string')) => (value, name) => {
   return value;
 };
 const nullish = (message = defaultMessage('`null` or `undefined`')) => (value, name) => value == null ? value : new Error(message(value, name));
+const optional = check => (value, name) => {
+  if (value === undefined) {
+    return undefined;
+  }
+  return check(value, name);
+};
 const boolean = (message = defaultMessage('a boolean')) => (value, name) => {
   if (typeof value !== 'boolean') {
     return new Error(message(value, name));
@@ -278,6 +284,26 @@ function getProgramStatement(path) {
   return programPath;
 }
 
+const defaultOptions = {
+  classNamePrefix: 'x',
+  dev: false,
+  debug: false,
+  enableDebugClassNames: false,
+  enableDevClassNames: false,
+  enableDebugDataProp: true,
+  enableFontSizePxToRem: false,
+  enableInlinedConditionalMerge: true,
+  enableMediaQueryOrder: true,
+  enableLegacyValueFlipping: false,
+  enableLogicalStylesPolyfill: false,
+  enableLTRRTLComments: false,
+  enableMinifiedKeys: true,
+  styleResolution: 'property-specificity',
+  importSources: [],
+  treeshakeCompensation: false,
+  test: false
+};
+
 const CheckModuleResolution = unionOf4(object({
   type: literal('commonJS'),
   rootDir: unionOf(nullish(), string()),
@@ -334,27 +360,27 @@ class StateManager {
     this.options = this.setOptions(state.opts ?? {});
   }
   setOptions(options) {
-    const dev = logAndDefault(boolean(), options.dev ?? false, false, 'options.dev');
+    const dev = logAndDefault(boolean(), options.dev ?? defaultOptions.dev, false, 'options.dev');
     const debug = logAndDefault(boolean(), options.debug ?? dev, false, 'options.debug');
-    const enableDebugClassNames = logAndDefault(boolean(), options.enableDebugClassNames ?? true, true, 'options.enableDebugClassNames');
-    const enableDebugDataProp = logAndDefault(boolean(), options.enableDebugDataProp ?? true, true, 'options.enableDebugDataProp');
-    const enableDevClassNames = logAndDefault(boolean(), options.enableDevClassNames ?? false, false, 'options.enableDevClassNames');
-    const enableFontSizePxToRem = logAndDefault(boolean(), options.enableFontSizePxToRem ?? false, false, 'options.enableFontSizePxToRem');
-    const enableInlinedConditionalMerge = logAndDefault(boolean(), options.enableInlinedConditionalMerge ?? true, true, 'options.enableInlinedConditionalMerge');
-    const enableMinifiedKeys = logAndDefault(boolean(), options.enableMinifiedKeys ?? true, true, 'options.enableMinifiedKeys');
-    const enableMediaQueryOrder = logAndDefault(boolean(), options.enableMediaQueryOrder ?? true, true, 'options.enableMediaQueryOrder');
-    const enableLegacyValueFlipping = logAndDefault(boolean(), options.enableLegacyValueFlipping ?? false, false, 'options.enableLegacyValueFlipping');
-    const enableLogicalStylesPolyfill = logAndDefault(boolean(), options.enableLogicalStylesPolyfill ?? false, false, 'options.enableLogicalStylesPolyfill');
-    const enableLTRRTLComments = logAndDefault(boolean(), options.enableLTRRTLComments ?? false, false, 'options.enableLTRRTLComments');
-    const test = logAndDefault(boolean(), options.test ?? false, false, 'options.test');
+    const enableDebugClassNames = logAndDefault(boolean(), options.enableDebugClassNames ?? defaultOptions.enableDebugClassNames, true, 'options.enableDebugClassNames');
+    const enableDebugDataProp = logAndDefault(boolean(), options.enableDebugDataProp ?? debug, false, 'options.enableDebugDataProp');
+    const enableDevClassNames = logAndDefault(boolean(), options.enableDevClassNames ?? dev, dev, 'options.enableDevClassNames');
+    const enableFontSizePxToRem = logAndDefault(boolean(), options.enableFontSizePxToRem ?? defaultOptions.enableFontSizePxToRem, false, 'options.enableFontSizePxToRem');
+    const enableInlinedConditionalMerge = logAndDefault(boolean(), options.enableInlinedConditionalMerge ?? defaultOptions.enableInlinedConditionalMerge, true, 'options.enableInlinedConditionalMerge');
+    const enableMinifiedKeys = logAndDefault(boolean(), options.enableMinifiedKeys ?? defaultOptions.enableMinifiedKeys, true, 'options.enableMinifiedKeys');
+    const enableMediaQueryOrder = logAndDefault(boolean(), options.enableMediaQueryOrder ?? defaultOptions.enableMediaQueryOrder, true, 'options.enableMediaQueryOrder');
+    const enableLegacyValueFlipping = logAndDefault(boolean(), options.enableLegacyValueFlipping ?? defaultOptions.enableLegacyValueFlipping, false, 'options.enableLegacyValueFlipping');
+    const enableLogicalStylesPolyfill = logAndDefault(boolean(), options.enableLogicalStylesPolyfill ?? defaultOptions.enableLogicalStylesPolyfill, false, 'options.enableLogicalStylesPolyfill');
+    const enableLTRRTLComments = logAndDefault(boolean(), options.enableLTRRTLComments ?? defaultOptions.enableLTRRTLComments, false, 'options.enableLTRRTLComments');
+    const test = logAndDefault(boolean(), options.test ?? defaultOptions.test, false, 'options.test');
     const configRuntimeInjection = logAndDefault(checkRuntimeInjection, options.runtimeInjection ?? false, false, 'options.runtimeInjection');
     const runtimeInjection = configRuntimeInjection === true ? DEFAULT_INJECT_PATH : configRuntimeInjection === false ? undefined : configRuntimeInjection;
-    const classNamePrefix = logAndDefault(string(), options.classNamePrefix ?? 'x', 'x', 'options.classNamePrefix');
-    const configuredImportSources = logAndDefault(checkImportSources, options.importSources ?? [], [], 'options.importSources');
+    const classNamePrefix = logAndDefault(string(), options.classNamePrefix ?? defaultOptions.classNamePrefix, 'x', 'options.classNamePrefix');
+    const configuredImportSources = logAndDefault(checkImportSources, options.importSources ?? defaultOptions.importSources, [], 'options.importSources');
     const importSources = [name, 'stylex', ...configuredImportSources];
-    const styleResolution = logAndDefault(unionOf3(literal('application-order'), literal('property-specificity'), literal('legacy-expand-shorthands')), options.styleResolution ?? 'property-specificity', 'property-specificity', 'options.styleResolution');
+    const styleResolution = logAndDefault(unionOf3(literal('application-order'), literal('property-specificity'), literal('legacy-expand-shorthands')), options.styleResolution ?? defaultOptions.styleResolution, 'property-specificity', 'options.styleResolution');
     const unstable_moduleResolution = logAndDefault(unionOf(nullish(), CheckModuleResolution), options.unstable_moduleResolution, null, 'options.unstable_moduleResolution');
-    const treeshakeCompensation = logAndDefault(boolean(), options.treeshakeCompensation ?? false, false, 'options.treeshakeCompensation');
+    const treeshakeCompensation = logAndDefault(boolean(), options.treeshakeCompensation ?? defaultOptions.treeshakeCompensation, false, 'options.treeshakeCompensation');
     const aliasesOption = logAndDefault(unionOf(nullish(), objectOf(unionOf(string(), array(string())))), options.aliases, null, 'options.aliases');
     const aliases = aliasesOption == null ? aliasesOption : Object.fromEntries(Object.entries(aliasesOption).map(([key, value]) => {
       if (typeof value === 'string') {
@@ -362,6 +388,7 @@ class StateManager {
       }
       return [key, value];
     }));
+    const debugFilePath = logAndDefault(optional(func()), options.debugFilePath, undefined, 'options.debugFilePath');
     const opts = {
       aliases,
       classNamePrefix,
@@ -384,7 +411,8 @@ class StateManager {
       styleResolution,
       test,
       treeshakeCompensation,
-      unstable_moduleResolution
+      unstable_moduleResolution,
+      debugFilePath
     };
     return opts;
   }
@@ -569,11 +597,20 @@ class StateManager {
       });
       this.injectImportInserted = injectName;
     }
-    for (const [_key, {
-      ltr,
-      rtl
-    }, priority] of styles) {
-      statementPath.insertBefore(t__namespace.expressionStatement(t__namespace.callExpression(injectName, [t__namespace.stringLiteral(ltr), t__namespace.numericLiteral(priority), ...(rtl != null ? [t__namespace.stringLiteral(rtl)] : [])])));
+    for (const [_key, styleObj, priority] of styles) {
+      const {
+        ltr,
+        rtl
+      } = styleObj;
+      const args = [t__namespace.stringLiteral(ltr), t__namespace.numericLiteral(priority), ...(rtl != null ? [t__namespace.stringLiteral(rtl)] : [])];
+      if ('constKey' in styleObj && 'constVal' in styleObj) {
+        const {
+          constKey,
+          constVal
+        } = styleObj;
+        args.push(t__namespace.stringLiteral(constKey), typeof constVal === 'number' ? t__namespace.numericLiteral(constVal) : t__namespace.stringLiteral(String(constVal)));
+      }
+      statementPath.insertBefore(t__namespace.expressionStatement(t__namespace.callExpression(injectName, args)));
     }
   }
   markComposedNamespace(memberExpression) {
@@ -832,23 +869,6 @@ function toBase62(num) {
 }
 const createShortHash = str => toBase62(murmurhash2_32_gc(str, 1) % 62 ** 5);
 
-const defaultOptions = {
-  classNamePrefix: 'x',
-  dev: false,
-  debug: false,
-  enableDebugClassNames: true,
-  enableDevClassNames: false,
-  enableDebugDataProp: true,
-  enableFontSizePxToRem: false,
-  enableMediaQueryOrder: false,
-  enableLegacyValueFlipping: false,
-  enableLogicalStylesPolyfill: false,
-  enableLTRRTLComments: false,
-  enableMinifiedKeys: true,
-  styleResolution: 'property-specificity',
-  test: false
-};
-
 const shorthands$2 = {
   all: _ => {
     throw new Error('all is not supported');
@@ -1030,16 +1050,23 @@ const expansions$3 = {
 };
 
 function printNode(node) {
-  switch (node.type) {
-    case 'word':
-      return `${node.value}`;
-    case 'string':
-      return `${node.quote}${node.value}${node.quote}`;
-    case 'function':
-      return `${node.value}(${node.nodes.map(printNode).join('')})`;
-    default:
-      return node.value;
-  }
+  return ($$gen$m0 => {
+    if ((typeof $$gen$m0 === "object" && $$gen$m0 !== null || typeof $$gen$m0 === "function") && $$gen$m0.type === 'word' && "value" in $$gen$m0) {
+      const value = $$gen$m0.value;
+      return value;
+    }
+    if ((typeof $$gen$m0 === "object" && $$gen$m0 !== null || typeof $$gen$m0 === "function") && $$gen$m0.type === 'string' && "value" in $$gen$m0 && "quote" in $$gen$m0) {
+      const value = $$gen$m0.value;
+      const quote = $$gen$m0.quote;
+      return `${quote}${value}${quote}`;
+    }
+    if ((typeof $$gen$m0 === "object" && $$gen$m0 !== null || typeof $$gen$m0 === "function") && $$gen$m0.type === 'function' && "value" in $$gen$m0 && "nodes" in $$gen$m0) {
+      const value = $$gen$m0.value;
+      const nodes = $$gen$m0.nodes;
+      return `${value}(${nodes.map(printNode).join('')})`;
+    }
+    return node.value;
+  })(node);
 }
 function splitValue(str) {
   if (str == null || typeof str === 'number') {
@@ -3113,7 +3140,7 @@ function requireMediaQuery () {
 	      case 'media-keyword':
 	        {
 	          const prefix = queries.not ? 'not ' : queries.only ? 'only ' : '';
-	          return prefix + queries.key;
+	          return prefix + (isTopLevel ? queries.key : `(${queries.key})`);
 	        }
 	      case 'word-rule':
 	        return `(${queries.keyValue})`;
@@ -3139,7 +3166,7 @@ function requireMediaQuery () {
 	          throw new Error(`cannot serialize media-pair value for key "${key}": ${String(value)}`);
 	        }
 	      case 'not':
-	        return queries.rule && (queries.rule.type === 'and' || queries.rule.type === 'or') ? `(not (${this.#toString(queries.rule)}))` : `(not ${this.#toString(queries.rule)})`;
+	        return queries.rule && (queries.rule.type === 'and' || queries.rule.type === 'or' || queries.rule.type === 'not') ? `(not (${this.#toString(queries.rule)}))` : `(not ${this.#toString(queries.rule)})`;
 	      case 'and':
 	        return queries.rules.map(rule => this.#toString(rule)).join(' and ');
 	      case 'or':
@@ -3631,7 +3658,7 @@ function getNumberSuffix(key) {
     return suffix;
   }
 }
-const unitlessNumberProperties = new Set(['WebkitLineClamp', 'animationIterationCount', 'aspectRatio', 'borderImageOutset', 'borderImageSlice', 'borderImageWidth', 'counterSet', 'counterReset', 'columnCount', 'flex', 'flexGrow', 'flexShrink', 'flexOrder', 'gridRow', 'gridRowStart', 'gridRowEnd', 'gridColumn', 'gridColumnStart', 'gridColumnEnd', 'gridArea', 'fontWeight', 'hyphenateLimitChars', 'lineClamp', 'lineHeight', 'maskBorderOutset', 'maskBorderSlice', 'maskBorderWidth', 'opacity', 'order', 'orphans', 'tabSize', 'widows', 'zIndex', 'fillOpacity', 'floodOpacity', 'rotate', 'scale', 'shapeImageThreshold', 'stopOpacity', 'strokeDasharray', 'strokeDashoffset', 'strokeMiterlimit', 'strokeOpacity', 'strokeWidth', 'scale', 'mathDepth']);
+const unitlessNumberProperties = new Set(['WebkitLineClamp', 'animationIterationCount', 'aspectRatio', 'borderImageOutset', 'borderImageSlice', 'borderImageWidth', 'counterSet', 'counterReset', 'columnCount', 'flex', 'flexGrow', 'flexShrink', 'flexOrder', 'gridRow', 'gridRowStart', 'gridRowEnd', 'gridColumn', 'gridColumnStart', 'gridColumnEnd', 'gridArea', 'fontWeight', 'hyphenateLimitChars', 'lineClamp', 'lineHeight', 'maskBorderOutset', 'maskBorderSlice', 'maskBorderWidth', 'opacity', 'order', 'orphans', 'tabSize', 'widows', 'zIndex', 'fillOpacity', 'floodOpacity', 'rotate', 'scale', 'shapeImageThreshold', 'stopOpacity', 'strokeDasharray', 'strokeDashoffset', 'strokeMiterlimit', 'strokeOpacity', 'strokeWidth', 'scale', 'mathDepth', 'zoom']);
 const numberPropertySuffixes = {
   animationDelay: 'ms',
   animationDuration: 'ms',
@@ -3649,20 +3676,20 @@ const logicalToPhysical$1 = {
   'inline-end': 'right'
 };
 const inlinePropertyToLTR = {
-  'margin-inline-start': ([_key, val]) => ['margin-left', val],
-  'margin-inline-end': ([_key, val]) => ['margin-right', val],
-  'padding-inline-start': ([_key, val]) => ['padding-left', val],
-  'padding-inline-end': ([_key, val]) => ['padding-right', val],
-  'border-inline-start': ([_key, val]) => ['border-left', val],
-  'border-inline-end': ([_key, val]) => ['border-right', val],
-  'border-inline-start-width': ([_key, val]) => ['border-left-width', val],
-  'border-inline-end-width': ([_key, val]) => ['border-right-width', val],
+  'margin-inline-start': ([_k, val]) => ['margin-left', val],
+  'margin-inline-end': ([_k, val]) => ['margin-right', val],
+  'padding-inline-start': ([_k, val]) => ['padding-left', val],
+  'padding-inline-end': ([_k, val]) => ['padding-right', val],
+  'border-inline-start': ([_k, val]) => ['border-left', val],
+  'border-inline-end': ([_k, val]) => ['border-right', val],
+  'border-inline-start-width': ([_k, val]) => ['border-left-width', val],
+  'border-inline-end-width': ([_k, val]) => ['border-right-width', val],
   'border-inline-start-color': ([_key, val]) => ['border-left-color', val],
   'border-inline-end-color': ([_key, val]) => ['border-right-color', val],
   'border-inline-start-style': ([_key, val]) => ['border-left-style', val],
   'border-inline-end-style': ([_key, val]) => ['border-right-style', val],
   'border-start-start-radius': ([_key, val]) => ['border-top-left-radius', val],
-  'border-end-start-radius': ([_key, val]) => ['border-bottom-left-radius', val],
+  'border-end-start-radius': ([_k, val]) => ['border-bottom-left-radius', val],
   'border-start-end-radius': ([_key, val]) => ['border-top-right-radius', val],
   'border-end-end-radius': ([_key, val]) => ['border-bottom-right-radius', val],
   'inset-inline-start': ([_key, val]) => ['left', val],
@@ -3682,13 +3709,13 @@ const propertyToLTR = {
   'border-start-style': ([_key, val]) => ['border-left-style', val],
   'border-end-style': ([_key, val]) => ['border-right-style', val],
   'border-top-start-radius': ([_key, val]) => ['border-top-left-radius', val],
-  'border-bottom-start-radius': ([_key, val]) => ['border-bottom-left-radius', val],
-  'border-top-end-radius': ([_key, val]) => ['border-top-right-radius', val],
-  'border-bottom-end-radius': ([_key, val]) => ['border-bottom-right-radius', val],
+  'border-bottom-start-radius': ([_k, v]) => ['border-bottom-left-radius', v],
+  'border-top-end-radius': ([_key, v]) => ['border-top-right-radius', v],
+  'border-bottom-end-radius': ([_k, v]) => ['border-bottom-right-radius', v],
   float: ([key, val]) => [key, logicalToPhysical$1[val] ?? val],
   clear: ([key, val]) => [key, logicalToPhysical$1[val] ?? val],
-  start: ([_key, val]) => ['left', val],
-  end: ([_key, val]) => ['right', val],
+  start: ([_k, val]) => ['left', val],
+  end: ([_k, val]) => ['right', val],
   'background-position': ([key, val]) => [key, val.split(' ').map(word => word === 'start' || word === 'insetInlineStart' ? 'left' : word === 'end' || word === 'insetInlineEnd' ? 'right' : word).join(' ')]
 };
 function generateLTR(pair, options = defaultOptions) {
@@ -3784,8 +3811,8 @@ const inlinePropertyToRTL = {
   'border-inline-end-color': ([_key, val]) => ['border-left-color', val],
   'border-inline-start-style': ([_key, val]) => ['border-right-style', val],
   'border-inline-end-style': ([_key, val]) => ['border-left-style', val],
-  'border-start-start-radius': ([_key, val]) => ['border-top-right-radius', val],
-  'border-end-start-radius': ([_key, val]) => ['border-bottom-right-radius', val],
+  'border-start-start-radius': ([_k, val]) => ['border-top-right-radius', val],
+  'border-end-start-radius': ([_k, val]) => ['border-bottom-right-radius', val],
   'border-start-end-radius': ([_key, val]) => ['border-top-left-radius', val],
   'border-end-end-radius': ([_key, val]) => ['border-bottom-left-radius', val],
   'inset-inline-start': ([_key, val]) => ['right', val],
@@ -3805,9 +3832,9 @@ const propertyToRTL = {
   'border-start-style': ([_key, val]) => ['border-right-style', val],
   'border-end-style': ([_key, val]) => ['border-left-style', val],
   'border-top-start-radius': ([_key, val]) => ['border-top-right-radius', val],
-  'border-bottom-start-radius': ([_key, val]) => ['border-bottom-right-radius', val],
+  'border-bottom-start-radius': ([_k, v]) => ['border-bottom-right-radius', v],
   'border-top-end-radius': ([_key, val]) => ['border-top-left-radius', val],
-  'border-bottom-end-radius': ([_key, val]) => ['border-bottom-left-radius', val],
+  'border-bottom-end-radius': ([_k, val]) => ['border-bottom-left-radius', val],
   float: ([key, val]) => logicalToPhysical[val] != null ? [key, logicalToPhysical[val]] : null,
   clear: ([key, val]) => logicalToPhysical[val] != null ? [key, logicalToPhysical[val]] : null,
   start: ([_key, val]) => ['right', val],
@@ -5464,21 +5491,37 @@ function getPackagePrefix(absolutePath) {
   }
   return undefined;
 }
-function getShortPath(relativePath) {
+function getShortPath(relativePath, state) {
+  if (state.options.unstable_moduleResolution?.type === 'commonJS' && state.options.unstable_moduleResolution?.rootDir) {
+    const appRootPath = state.options.unstable_moduleResolution?.rootDir;
+    return path.relative(appRootPath, relativePath);
+  }
   return relativePath.split(path.sep).slice(-2).join('/');
 }
 function createShortFilename(absolutePath, state) {
-  const isHaste = state.options.unstable_moduleResolution?.type === 'haste';
-  const relativePath = path.relative(process.cwd(), absolutePath);
+  if (typeof state.options.debugFilePath === 'function') {
+    return state.options.debugFilePath(absolutePath);
+  }
+  const cwdPackage = state.getPackageNameAndPath(process.cwd());
+  const packageDetails = state.getPackageNameAndPath(absolutePath);
+  if (packageDetails) {
+    const [packageName, packageRootPath] = packageDetails;
+    const relativePath = path.relative(packageRootPath, absolutePath);
+    if (cwdPackage && cwdPackage[0] === packageName) {
+      return relativePath;
+    }
+    return `${packageName}:${relativePath}`;
+  }
   const packagePrefix = getPackagePrefix(absolutePath);
   if (packagePrefix) {
-    const shortPath = getShortPath(relativePath);
+    const shortPath = getShortPath(absolutePath, state);
     return `${packagePrefix}:${shortPath}`;
   } else {
+    const isHaste = state.options.unstable_moduleResolution?.type === 'haste';
     if (isHaste) {
       return path.basename(absolutePath);
     }
-    return getShortPath(relativePath);
+    return getShortPath(absolutePath, state);
   }
 }
 function addSourceMapData(obj, babelPath, state) {
@@ -5582,6 +5625,43 @@ function isValidCallee(val) {
 function isInvalidMethod(val) {
   return INVALID_METHODS.includes(val);
 }
+const MUTATING_ARRAY_METHODS = new Set(['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse', 'fill', 'copyWithin']);
+function isMutated(binding) {
+  for (const path of binding.referencePaths) {
+    const parentPath = path.parentPath;
+    if (!parentPath) continue;
+    if (parentPath.isMemberExpression() && parentPath.node.object === path.node) {
+      const memberExpr = parentPath;
+      const parent = memberExpr.parentPath;
+      if (!parent) continue;
+      if (parent.isAssignmentExpression() && parent.node.left === memberExpr.node) {
+        return true;
+      }
+      if (parent.isUpdateExpression()) {
+        return true;
+      }
+      if (parent.isUnaryExpression({
+        operator: 'delete'
+      })) {
+        return true;
+      }
+      if (parent.isCallExpression() && parent.node.callee === memberExpr.node) {
+        const property = memberExpr.node.property;
+        if (t__namespace.isIdentifier(property) && MUTATING_ARRAY_METHODS.has(property.name)) {
+          return true;
+        }
+      }
+    }
+    if (parentPath?.isCallExpression() && path.listKey === 'arguments' && path.key === 0) {
+      const callExpr = parentPath;
+      const callee = callExpr.get('callee');
+      if (callee.matchesPattern('Object.assign') || callee.matchesPattern('Object.defineProperty') || callee.matchesPattern('Object.defineProperties') || callee.matchesPattern('Object.setPrototypeOf')) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
 function deopt(path, state, reason) {
   if (!state.confident) return;
   state.deoptPath = path;
@@ -5836,6 +5916,9 @@ function _evaluate(path, state) {
     if (binding && binding.constantViolations.length > 0) {
       return deopt(binding.path, state, NON_CONSTANT);
     }
+    if (binding && isMutated(binding)) {
+      return deopt(binding.path, state, NON_CONSTANT);
+    }
     if (binding && path.node.start < binding.path.node.end) {
       return deopt(binding.path, state, USED_BEFORE_DECLARATION);
     }
@@ -6922,7 +7005,7 @@ function transformStyleXDefineConsts(callExpressionPath, state) {
       ltr: obj.ltr,
       rtl: obj.rtl ?? null
     }, obj.priority]);
-    state.registerStyles(styles);
+    state.registerStyles(styles, variableDeclaratorPath);
   }
 }
 function validateStyleXDefineConsts(callExpressionPath) {

package/lib/shared/common-types.js.flow

@@ -52,11 +52,20 @@ export type StyleXOptions = $ReadOnly<{
   enableDebugDataProp?: ?boolean,
   enableDevClassNames?: ?boolean,
   enableFontSizePxToRem?: ?boolean,
+  enableInlinedConditionalMerge?: ?boolean,
   enableMediaQueryOrder?: ?boolean,
   enableLegacyValueFlipping?: ?boolean,
   enableLogicalStylesPolyfill?: ?boolean,
   enableLTRRTLComments?: ?boolean,
   enableMinifiedKeys?: ?boolean,
+  // runtimeInjection?:
+  //   | boolean
+  //   | ?string
+  //   | $ReadOnly<{ from: string, as: string }>,
+  importSources?: $ReadOnlyArray<
+    string | $ReadOnly<{ from: string, as: string }>,
+  >,
+  treeshakeCompensation?: boolean,
   styleResolution:
     | 'application-order' // The last style applied wins.
     // More specific styles will win over less specific styles. (margin-top wins over margin)

package/lib/shared/hash.d.ts

@@ -8,5 +8,8 @@
  */
 
 declare const $$EXPORT_DEFAULT_DECLARATION$$: (str: string) => string;
+declare type $$EXPORT_DEFAULT_DECLARATION$$ =
+  typeof $$EXPORT_DEFAULT_DECLARATION$$;
 export default $$EXPORT_DEFAULT_DECLARATION$$;
 export declare const createShortHash: (str: string) => string;
+export declare type createShortHash = typeof createShortHash;

package/lib/shared/index.d.ts

@@ -38,20 +38,32 @@ import {
 export * as types from './types';
 export * as when from './when/when';
 export declare const create: typeof styleXCreateSet;
+export declare type create = typeof create;
 export declare const defineVars: typeof styleXDefineVars;
+export declare type defineVars = typeof defineVars;
 export declare const defineConsts: typeof styleXDefineConsts;
+export declare type defineConsts = typeof defineConsts;
 export declare const createTheme: typeof styleXCreateTheme;
+export declare type createTheme = typeof createTheme;
 export declare const keyframes: typeof stylexKeyframes;
+export declare type keyframes = typeof keyframes;
 export declare const positionTry: typeof stylexPositionTry;
+export declare type positionTry = typeof positionTry;
 export declare const utils: {
   hash: typeof hash;
   genFileBasedIdentifier: typeof genFileBasedIdentifier;
 };
+export declare type utils = typeof utils;
 export declare const messages: typeof m;
+export declare type messages = typeof messages;
 export declare const firstThatWorks: typeof stylexFirstThatWorks;
+export declare type firstThatWorks = typeof firstThatWorks;
 export declare const PSEUDO_CLASS_PRIORITIES: typeof _PSEUDO_CLASS_PRIORITIES;
+export declare type PSEUDO_CLASS_PRIORITIES = typeof PSEUDO_CLASS_PRIORITIES;
 export declare const AT_RULE_PRIORITIES: typeof _AT_RULE_PRIORITIES;
+export declare type AT_RULE_PRIORITIES = typeof AT_RULE_PRIORITIES;
 export declare const PSEUDO_ELEMENT_PRIORITY: typeof _PSEUDO_ELEMENT_PRIORITY;
+export declare type PSEUDO_ELEMENT_PRIORITY = typeof PSEUDO_ELEMENT_PRIORITY;
 export type InjectableStyle = _InjectableStyle;
 export type CompiledNamespaces = _CompiledNamespaces;
 export type MutableCompiledNamespaces = _MutableCompiledNamespaces;

package/lib/shared/messages.d.ts

@@ -11,28 +11,60 @@ export declare const illegalArgumentLength: (
   fn: string,
   argLength: number,
 ) => string;
+export declare type illegalArgumentLength = typeof illegalArgumentLength;
 export declare const nonStaticValue: (fn: string) => string;
+export declare type nonStaticValue = typeof nonStaticValue;
 export declare const nonStyleObject: (fn: string) => string;
+export declare type nonStyleObject = typeof nonStyleObject;
 export declare const nonExportNamedDeclaration: (fn: string) => string;
+export declare type nonExportNamedDeclaration =
+  typeof nonExportNamedDeclaration;
 export declare const unboundCallValue: (fn: string) => string;
+export declare type unboundCallValue = typeof unboundCallValue;
 export declare const cannotGenerateHash: (fn: string) => string;
+export declare type cannotGenerateHash = typeof cannotGenerateHash;
 export declare const DUPLICATE_CONDITIONAL: 'The same pseudo selector or at-rule cannot be used more than once.';
+export declare type DUPLICATE_CONDITIONAL = typeof DUPLICATE_CONDITIONAL;
 export declare const ESCAPED_STYLEX_VALUE: 'Escaping a create() value is not allowed.';
+export declare type ESCAPED_STYLEX_VALUE = typeof ESCAPED_STYLEX_VALUE;
 export declare const ILLEGAL_NESTED_PSEUDO: "Pseudo objects can't be nested more than one level deep.";
+export declare type ILLEGAL_NESTED_PSEUDO = typeof ILLEGAL_NESTED_PSEUDO;
 export declare const ILLEGAL_PROP_VALUE: 'A style value can only contain an array, string or number.';
+export declare type ILLEGAL_PROP_VALUE = typeof ILLEGAL_PROP_VALUE;
 export declare const ILLEGAL_PROP_ARRAY_VALUE: 'A style array value can only contain strings or numbers.';
+export declare type ILLEGAL_PROP_ARRAY_VALUE = typeof ILLEGAL_PROP_ARRAY_VALUE;
 export declare const ILLEGAL_NAMESPACE_VALUE: 'A StyleX namespace must be an object.';
+export declare type ILLEGAL_NAMESPACE_VALUE = typeof ILLEGAL_NAMESPACE_VALUE;
 export declare const INVALID_CONST_KEY: 'Keys in defineConsts() cannot start with "--".';
+export declare type INVALID_CONST_KEY = typeof INVALID_CONST_KEY;
 export declare const INVALID_PSEUDO: 'Invalid pseudo selector, not on the whitelist.';
+export declare type INVALID_PSEUDO = typeof INVALID_PSEUDO;
 export declare const INVALID_PSEUDO_OR_AT_RULE: 'Invalid pseudo or at-rule.';
+export declare type INVALID_PSEUDO_OR_AT_RULE =
+  typeof INVALID_PSEUDO_OR_AT_RULE;
 export declare const INVALID_MEDIA_QUERY_SYNTAX: 'Invalid media query syntax.';
+export declare type INVALID_MEDIA_QUERY_SYNTAX =
+  typeof INVALID_MEDIA_QUERY_SYNTAX;
 export declare const LINT_UNCLOSED_FUNCTION: 'Rule contains an unclosed function';
+export declare type LINT_UNCLOSED_FUNCTION = typeof LINT_UNCLOSED_FUNCTION;
 export declare const LOCAL_ONLY: 'The return value of create() should not be exported.';
+export declare type LOCAL_ONLY = typeof LOCAL_ONLY;
 export declare const NON_OBJECT_KEYFRAME: 'Every frame within a keyframes() call must be an object.';
+export declare type NON_OBJECT_KEYFRAME = typeof NON_OBJECT_KEYFRAME;
 export declare const NON_CONTIGUOUS_VARS: 'All variables passed to firstThatWorks() must be contiguous.';
+export declare type NON_CONTIGUOUS_VARS = typeof NON_CONTIGUOUS_VARS;
 export declare const NO_OBJECT_SPREADS: 'Object spreads are not allowed in create() calls.';
+export declare type NO_OBJECT_SPREADS = typeof NO_OBJECT_SPREADS;
 export declare const ONLY_NAMED_PARAMETERS_IN_DYNAMIC_STYLE_FUNCTIONS: 'Only named parameters are allowed in Dynamic Style functions. Destructuring, spreading or default values are not allowed.';
+export declare type ONLY_NAMED_PARAMETERS_IN_DYNAMIC_STYLE_FUNCTIONS =
+  typeof ONLY_NAMED_PARAMETERS_IN_DYNAMIC_STYLE_FUNCTIONS;
 export declare const ONLY_TOP_LEVEL: 'create() is only allowed at the root of a program.';
+export declare type ONLY_TOP_LEVEL = typeof ONLY_TOP_LEVEL;
 export declare const UNKNOWN_PROP_KEY: 'Unknown property key';
+export declare type UNKNOWN_PROP_KEY = typeof UNKNOWN_PROP_KEY;
 export declare const POSITION_TRY_INVALID_PROPERTY: 'Invalid property in `positionTry()` call. It may only contain, positionAnchor, positionArea, inset properties (top, left, insetInline etc.), margin properties, size properties (height, inlineSize, etc.), and self-alignment properties (alignSelf, justifySelf, placeSelf)';
+export declare type POSITION_TRY_INVALID_PROPERTY =
+  typeof POSITION_TRY_INVALID_PROPERTY;
 export declare const VIEW_TRANSITION_CLASS_INVALID_PROPERTY: 'Invalid property in `viewTransitionClass()` call. It may only contain group, imagePair, old, and new properties';
+export declare type VIEW_TRANSITION_CLASS_INVALID_PROPERTY =
+  typeof VIEW_TRANSITION_CLASS_INVALID_PROPERTY;

package/lib/shared/physical-rtl/generate-ltr.d.ts

@@ -10,6 +10,6 @@
 import type { StyleXOptions } from '../common-types';
 declare function generateLTR(
   pair: Readonly<[string, string]>,
-  options: StyleXOptions,
+  options?: StyleXOptions,
 ): Readonly<[string, string]>;
 export default generateLTR;

package/lib/shared/physical-rtl/generate-ltr.js.flow

@@ -10,5 +10,5 @@
 import type { StyleXOptions } from '../common-types';
 declare export default function generateLTR(
   pair: $ReadOnly<[string, string]>,
-  options: StyleXOptions,
+  options?: StyleXOptions,
 ): $ReadOnly<[string, string]>;

package/lib/shared/physical-rtl/generate-rtl.d.ts

@@ -10,6 +10,6 @@
 import type { StyleXOptions } from '../common-types';
 declare function generateRTL(
   pair: Readonly<[string, string]>,
-  options: StyleXOptions,
+  options?: StyleXOptions,
 ): null | undefined | Readonly<[string, string]>;
 export default generateRTL;

package/lib/shared/physical-rtl/generate-rtl.js.flow

@@ -10,5 +10,5 @@
 import type { StyleXOptions } from '../common-types';
 declare export default function generateRTL(
   pair: $ReadOnly<[string, string]>,
-  options: StyleXOptions,
+  options?: StyleXOptions,
 ): ?$ReadOnly<[string, string]>;