@stylexjs/babel-plugin 0.16.1 → 0.16.3

package/lib/index.d.ts

@@ -39,10 +39,9 @@ declare function processStylexRules(
   config?:
     | boolean
     | {
-        useLayers?: boolean,
-        enableLTRRTLComments?: boolean,
-        legacyDisableLayers?: boolean,
-        ...
+        useLayers?: boolean;
+        enableLTRRTLComments?: boolean;
+        legacyDisableLayers?: boolean;
       },
 ): string;
 export type StyleXTransformObj = Readonly<{
@@ -51,4 +50,4 @@ export type StyleXTransformObj = Readonly<{
   processStylexRules: typeof processStylexRules;
 }>;
 declare const $$EXPORT_DEFAULT_DECLARATION$$: StyleXTransformObj;
-export = $$EXPORT_DEFAULT_DECLARATION$$;
+export default $$EXPORT_DEFAULT_DECLARATION$$;

package/lib/index.js

@@ -1,9 +1,9 @@
 'use strict';
 
 var t = require('@babel/types');
-var path = require('path');
-var fs = require('fs');
-var url$1 = require('url');
+var path = require('node:path');
+var fs = require('node:fs');
+var url$1 = require('node:url');
 var importMetaResolve = require('@dual-bundle/import-meta-resolve');
 var require$$0 = require('assert');
 var core = require('@babel/core');
@@ -48,6 +48,12 @@ const boolean = (message = defaultMessage('a boolean')) => (value, name) => {
   }
   return value;
 };
+const func = (message = defaultMessage('a function')) => (value, name) => {
+  if (typeof value !== 'function') {
+    return new Error(message(value, name));
+  }
+  return value;
+};
 const literal = (expected, message = defaultMessage(`the literal ${JSON.stringify(expected)}`)) => (value, name) => {
   if (value === expected) {
     return expected;
@@ -128,6 +134,25 @@ const unionOf3 = (a, b, c, message = defaultUnionMessage('one of')) => (value, n
   }
   return new Error(`${message(value, name)}${indent(resultA.message)}${indent(resultB.message)}${indent(resultC.message)}\nBut got: ${JSON.stringify(value)}`);
 };
+const unionOf4 = (a, b, c, d, message = defaultUnionMessage('one of')) => (value, name) => {
+  const resultA = a(value);
+  if (!(resultA instanceof Error)) {
+    return resultA;
+  }
+  const resultB = b(value);
+  if (!(resultB instanceof Error)) {
+    return resultB;
+  }
+  const resultC = c(value);
+  if (!(resultC instanceof Error)) {
+    return resultC;
+  }
+  const resultD = d(value);
+  if (!(resultD instanceof Error)) {
+    return resultD;
+  }
+  return new Error(`${message(value, name)}${indent(resultA.message)}${indent(resultB.message)}${indent(resultC.message)}${indent(resultD.message)}\nBut got: ${JSON.stringify(value)}`);
+};
 const logAndDefault = (check, value, def, name) => {
   const result = check(value, name);
   if (result instanceof Error) {
@@ -770,13 +795,18 @@ function getProgramStatement(path) {
   return programPath;
 }
 
-const CheckModuleResolution = unionOf3(object({
+const CheckModuleResolution = unionOf4(object({
   type: literal('commonJS'),
   rootDir: unionOf(nullish(), string()),
   themeFileExtension: unionOf(nullish(), string())
 }), object({
   type: literal('haste'),
   themeFileExtension: unionOf(nullish(), string())
+}), object({
+  type: literal('custom'),
+  themeFileExtension: unionOf(nullish(), string()),
+  filePathResolver: func(),
+  getCanonicalFilePath: func()
 }), object({
   type: literal('experimental_crossFileParsing'),
   rootDir: string(),
@@ -828,7 +858,7 @@ class StateManager {
     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 ?? false, false, 'options.enableMediaQueryOrder');
+    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');
@@ -935,12 +965,20 @@ class StateManager {
   get fileNameForHashing() {
     const filename = this.filename;
     const themeFileExtension = this.options.unstable_moduleResolution?.themeFileExtension ?? '.stylex';
-    if (filename == null || !matchesFileSuffix(themeFileExtension)(filename) || this.options.unstable_moduleResolution == null) {
+    const constsFileExtension = `${themeFileExtension}.const`;
+    if (filename == null || this.options.unstable_moduleResolution == null) {
       return null;
     }
-    switch (this.options.unstable_moduleResolution.type) {
+    const isThemeFile = matchesFileSuffix(themeFileExtension)(filename);
+    const isConstsOnlyFile = matchesFileSuffix(constsFileExtension)(filename);
+    if (!isThemeFile && !isConstsOnlyFile) {
+      return null;
+    }
+    switch (this.options.unstable_moduleResolution?.type) {
       case 'haste':
         return path.basename(filename);
+      case 'custom':
+        return this.options.unstable_moduleResolution.getCanonicalFilePath(filename);
       default:
         return this.getCanonicalFilePath(filename);
     }
@@ -983,10 +1021,12 @@ class StateManager {
       return false;
     }
     const themeFileExtension = this.options.unstable_moduleResolution?.themeFileExtension ?? '.stylex';
+    const constsFileExtension = `${themeFileExtension}.const`;
     const transformedVarsFileExtension = '.transformed';
     const isValidStylexFile = matchesFileSuffix(themeFileExtension)(importPath);
     const isValidTransformedVarsFile = matchesFileSuffix(transformedVarsFileExtension)(importPath);
-    if (!isValidStylexFile && !isValidTransformedVarsFile) {
+    const isValidConstsOnlyFile = matchesFileSuffix(constsFileExtension)(importPath);
+    if (!isValidStylexFile && !isValidTransformedVarsFile && !isValidConstsOnlyFile) {
       return false;
     }
     switch (this.options.unstable_moduleResolution?.type) {
@@ -1000,6 +1040,13 @@ class StateManager {
         {
           return ['themeNameRef', addFileExtension(importPath, sourceFilePath)];
         }
+      case 'custom':
+        {
+          const aliases = this.options.aliases;
+          const moduleResolution = this.options.unstable_moduleResolution;
+          const result = moduleResolution.filePathResolver(importPath, sourceFilePath, aliases);
+          return result ? ['themeNameRef', moduleResolution.getCanonicalFilePath(result)] : false;
+        }
       case 'experimental_crossFileParsing':
         {
           const aliases = this.options.aliases;
@@ -4018,7 +4065,7 @@ function requireMediaQuery () {
 	})), mediaAndRulesParser, mediaOrRulesParser, simplePairParser, mediaWordRuleParser, () => notParser, () => mediaOrRulesParser.surroundedBy(_tokenParser.TokenParser.tokens.OpenParen, _tokenParser.TokenParser.tokens.CloseParen), () => mediaAndRulesParser.surroundedBy(_tokenParser.TokenParser.tokens.OpenParen, _tokenParser.TokenParser.tokens.CloseParen)).skip(_tokenParser.TokenParser.tokens.Whitespace.optional);
 	notParser = _tokenParser.TokenParser.sequence(_tokenParser.TokenParser.tokens.OpenParen, _tokenParser.TokenParser.string('not'), _tokenParser.TokenParser.tokens.Whitespace, getNormalRuleParser(), _tokenParser.TokenParser.tokens.CloseParen).map(([_openParen, _not, _space, rule, _closeParen]) => ({
 	  type: 'not',
-	  rule
+	  rule: rule
 	}));
 	function isNumericLength(val) {
 	  return typeof val === 'object' && val !== null && !Array.isArray(val) && typeof val.value === 'number' && typeof val.unit === 'string' && (val.type === 'integer' || val.type === 'number');
@@ -5403,6 +5450,13 @@ const AT_RULE_PRIORITIES = {
   '@container': 300
 };
 const PSEUDO_ELEMENT_PRIORITY = 5000;
+const RELATIONAL_SELECTORS = {
+  ANCESTOR: /^:where\(\.[0-9a-zA-Z_-]+(:[a-zA-Z-]+)\s+\*\)$/,
+  DESCENDANT: /^:where\(:has\(\.[0-9a-zA-Z_-]+(:[a-zA-Z-]+)\)\)$/,
+  SIBLING_BEFORE: /^:where\(\.[0-9a-zA-Z_-]+(:[a-zA-Z-]+)\s+~\s+\*\)$/,
+  SIBLING_AFTER: /^:where\(:has\(~\s\.[0-9a-zA-Z_-]+(:[a-zA-Z-]+)\)\)$/,
+  ANY_SIBLING: /^:where\(\.[0-9a-zA-Z_-]+(:[a-zA-Z-]+)\s+~\s+\*,\s+:has\(~\s\.[0-9a-zA-Z_-]+(:[a-zA-Z-]+)\)\)$/
+};
 function getPriority(key) {
   if (key.startsWith('--')) {
     return 1;
@@ -5419,6 +5473,25 @@ function getPriority(key) {
   if (key.startsWith('::')) {
     return PSEUDO_ELEMENT_PRIORITY;
   }
+  const pseudoBase = p => (PSEUDO_CLASS_PRIORITIES[p] ?? 40) / 100;
+  const ancestorMatch = RELATIONAL_SELECTORS.ANCESTOR.exec(key);
+  if (ancestorMatch) {
+    return 10 + pseudoBase(ancestorMatch[1]);
+  }
+  const descendantMatch = RELATIONAL_SELECTORS.DESCENDANT.exec(key);
+  if (descendantMatch) {
+    return 15 + pseudoBase(descendantMatch[1]);
+  }
+  const anySiblingMatch = RELATIONAL_SELECTORS.ANY_SIBLING.exec(key);
+  if (anySiblingMatch) return 20 + Math.max(pseudoBase(anySiblingMatch[1]), pseudoBase(anySiblingMatch[2]));
+  const siblingBeforeMatch = RELATIONAL_SELECTORS.SIBLING_BEFORE.exec(key);
+  if (siblingBeforeMatch) {
+    return 30 + pseudoBase(siblingBeforeMatch[1]);
+  }
+  const siblingAfterMatch = RELATIONAL_SELECTORS.SIBLING_AFTER.exec(key);
+  if (siblingAfterMatch) {
+    return 40 + pseudoBase(siblingAfterMatch[1]);
+  }
   if (key.startsWith(':')) {
     const prop = key.startsWith(':') && key.includes('(') ? key.slice(0, key.indexOf('(')) : key;
     return PSEUDO_CLASS_PRIORITIES[prop] ?? 40;
@@ -6060,7 +6133,7 @@ function priorityForAtRule(atRule) {
   if (atRule === 'default') {
     return 1;
   }
-  return atRule.split(SPLIT_TOKEN).length;
+  return 1 + atRule.split(SPLIT_TOKEN).length;
 }
 function getDefaultValue(value) {
   if (typeof value === 'string' || typeof value === 'number') {
@@ -6154,7 +6227,7 @@ function constructCssVariablesString(variables, varGroupHash) {
     result[varGroupHash + suffix] = {
       ltr,
       rtl: null,
-      priority: priorityForAtRule(atRule) * 0.1
+      priority: priorityForAtRule(atRule) / 10
     };
   }
   return result;
@@ -6217,19 +6290,14 @@ function styleXCreateTheme(themeVars, variables, options) {
   for (const atRule of sortedAtRules) {
     const decls = rulesByAtRule[atRule].join('');
     const rule = `.${overrideClassName}, .${overrideClassName}:root{${decls}}`;
-    if (atRule === 'default') {
-      stylesToInject[overrideClassName] = {
-        ltr: rule,
-        priority: 0.5,
-        rtl: null
-      };
-    } else {
-      stylesToInject[overrideClassName + '-' + hash(atRule)] = {
-        ltr: wrapWithAtRules(rule, atRule),
-        priority: 0.5 + 0.1 * priorityForAtRule(atRule),
-        rtl: null
-      };
-    }
+    const priority = 0.4 + priorityForAtRule(atRule) / 10;
+    const suffix = atRule === 'default' ? '' : `-${hash(atRule)}`;
+    const ltr = atRule === 'default' ? rule : wrapWithAtRules(rule, atRule);
+    stylesToInject[overrideClassName + suffix] = {
+      ltr: ltr,
+      priority: priority,
+      rtl: null
+    };
   }
   const themeClass = `${overrideClassName} ${themeVars.__varGroupHash__}`;
   return [{
@@ -6349,7 +6417,7 @@ function ancestor(pseudo, options = defaultOptions) {
 function descendant(pseudo, options = defaultOptions) {
   validatePseudoSelector(pseudo);
   const defaultMarker = typeof options === 'string' ? options : getDefaultMarkerClassName(options);
-  return `:has(.${defaultMarker}${pseudo})`;
+  return `:where(:has(.${defaultMarker}${pseudo}))`;
 }
 function siblingBefore(pseudo, options = defaultOptions) {
   validatePseudoSelector(pseudo);
@@ -6359,7 +6427,7 @@ function siblingBefore(pseudo, options = defaultOptions) {
 function siblingAfter(pseudo, options = defaultOptions) {
   validatePseudoSelector(pseudo);
   const defaultMarker = typeof options === 'string' ? options : getDefaultMarkerClassName(options);
-  return `:has(~ .${defaultMarker}${pseudo})`;
+  return `:where(:has(~ .${defaultMarker}${pseudo}))`;
 }
 function anySibling(pseudo, options = defaultOptions) {
   validatePseudoSelector(pseudo);
@@ -6486,14 +6554,11 @@ function convertToTestStyles(obj, varName, state) {
 }
 
 function convertObjectToAST(obj) {
-  return t__namespace.objectExpression(Object.entries(obj).map(([key, value]) => t__namespace.objectProperty(canBeIdentifier(key) ? t__namespace.identifier(key) : t__namespace.stringLiteral(key), typeof value === 'string' ? t__namespace.stringLiteral(value) : typeof value === 'number' ? t__namespace.numericLiteral(value) : typeof value === 'boolean' ? t__namespace.booleanLiteral(value) : value === null ? t__namespace.nullLiteral() : convertObjectToAST(value))));
+  return t__namespace.objectExpression(Object.entries(obj).map(([key, value]) => t__namespace.objectProperty(t__namespace.isValidIdentifier(key, false) ? t__namespace.identifier(key) : t__namespace.stringLiteral(key), typeof value === 'string' ? t__namespace.stringLiteral(value) : typeof value === 'number' ? t__namespace.numericLiteral(value) : typeof value === 'boolean' ? t__namespace.booleanLiteral(value) : value === null ? t__namespace.nullLiteral() : convertObjectToAST(value))));
 }
 function removeObjectsWithSpreads(obj) {
   return Object.fromEntries(Object.entries(obj).filter(Boolean));
 }
-function canBeIdentifier(str) {
-  return str.match(/^[a-zA-Z_$][a-zA-Z0-9_$]*$/) != null;
-}
 
 const IMPORT_FILE_PARSING_ERROR = `There was error when attempting to parse the imported file.
 Please ensure that the 'babelrc' file is configured to be able to parse this file.
@@ -6536,7 +6601,7 @@ function deopt(path, state, reason) {
   state.deoptReason = reason;
 }
 function evaluateImportedFile(filePath, namedExport, state, bindingPath) {
-  const fs = require('fs');
+  const fs = require('node:fs');
   const fileContents = fs.readFileSync(filePath, 'utf8');
   const ast = core.parseSync(fileContents, {
     babelrc: true

package/lib/index.js.flow

@@ -7,7 +7,7 @@
  * @flow strict
  */
 
-import type { PluginObj } from '../flow_modules/@babel/core';
+import type { PluginObj } from '@babel/core';
 import type { StyleXOptions } from './utils/state-manager';
 
 export type Options = StyleXOptions;

package/lib/shared/common-types.d.ts

@@ -33,10 +33,9 @@ export type CompiledStyles = Readonly<{
     | string
     | Readonly<{ [$$Key$$: string]: null | string }>;
 }>;
-export type FlatCompiledStyles = Readonly<{
-  [$$Key$$: string]: string | null;
-  $$css: true | string;
-}>;
+export type FlatCompiledStyles = Readonly<
+  { [$$Key$$: string]: string | null } & { $$css: true | string }
+>;
 export type StyleXOptions = Readonly<{
   classNamePrefix: string;
   debug: null | undefined | boolean;

package/lib/shared/stylex-create-theme.d.ts

@@ -20,7 +20,7 @@ declare function styleXCreateTheme(
   },
   options?: StyleXOptions,
 ): [
-  { $$css: true; readonly [$$Key$$: string]: string },
+  { $$css: true } & { readonly [$$Key$$: string]: string },
   { [$$Key$$: string]: InjectableStyle },
 ];
 export default styleXCreateTheme;

package/lib/shared/stylex-define-vars.d.ts

@@ -10,17 +10,17 @@
 import type { InjectableStyle, StyleXOptions } from './common-types';
 import type { VarsConfig } from './stylex-vars-utils';
 type VarsKeysWithStringValues<Vars extends VarsConfig> = Readonly<{
-  [$$Key$$: keyof Vars]: string;
+  [$$Key$$ in keyof Vars]: string;
 }>;
 type VarsObject<Vars extends VarsConfig> = Readonly<
-  Omit<VarsKeysWithStringValues<Vars>, keyof ({ __varGroupHash__: string })> & {
+  Omit<VarsKeysWithStringValues<Vars>, keyof { __varGroupHash__: string }> & {
     __varGroupHash__: string;
   }
 >;
 declare function styleXDefineVars<Vars extends VarsConfig>(
   variables: Vars,
   options: Readonly<
-    Omit<Partial<StyleXOptions>, keyof ({ exportId: string })> & {
+    Omit<Partial<StyleXOptions>, keyof { exportId: string }> & {
       exportId: string;
     }
   >,

package/lib/shared/types/index.js.flow

@@ -79,7 +79,7 @@ declare export class Angle<+T: AngleValue>
 }
 declare export const angle: <T: AngleValue = AngleValue>(
   value: ValueWithDefault,
-  // $FlowIgnore[method-unbinding]
+  // $FlowFixMe[method-unbinding]
 ) => Angle<T>;
 
 type ColorValue = string;
@@ -93,7 +93,7 @@ declare export class Color<+T: ColorValue>
 }
 declare export const color: <T: ColorValue = ColorValue>(
   value: ValueWithDefault,
-  // $FlowIgnore[method-unbinding]
+  // $FlowFixMe[method-unbinding]
 ) => Color<T>;
 
 type URLValue = string;
@@ -123,7 +123,7 @@ declare export class Image<+T: ImageValue>
 }
 declare export const image: <T: ImageValue = ImageValue>(
   value: ValueWithDefault,
-  // $FlowIgnore[method-unbinding]
+  // $FlowFixMe[method-unbinding]
 ) => Image<T>;
 
 type IntegerValue = number;
@@ -157,7 +157,7 @@ declare export class LengthPercentage<+_T: LengthPercentageValue>
 }
 declare export const lengthPercentage: <_T: LengthPercentageValue | number>(
   value: ValueWithDefault,
-  // $FlowIgnore[method-unbinding]
+  // $FlowFixMe[method-unbinding]
 ) => LengthPercentage<string>;
 
 type LengthValue = number | string;
@@ -174,7 +174,7 @@ declare export class Length<+_T: LengthValue>
 }
 declare export const length: <T: LengthValue = LengthValue>(
   value: NestedWithNumbers,
-  // $FlowIgnore[method-unbinding]
+  // $FlowFixMe[method-unbinding]
 ) => Length<T>;
 
 type PercentageValue = string | number;
@@ -191,7 +191,7 @@ declare export class Percentage<+_T: PercentageValue>
 }
 declare export const percentage: <T: PercentageValue = PercentageValue>(
   value: NestedWithNumbers,
-  // $FlowIgnore[method-unbinding]
+  // $FlowFixMe[method-unbinding]
 ) => Percentage<T>;
 
 type NumberValue = number;
@@ -206,7 +206,7 @@ declare export class Num<+T: NumberValue>
 }
 declare export const number: <T: NumberValue = NumberValue>(
   value: NestedWithNumbers,
-  // $FlowIgnore[method-unbinding]
+  // $FlowFixMe[method-unbinding]
 ) => Num<T>;
 
 type ResolutionValue = string | 0;
@@ -223,7 +223,7 @@ declare export class Resolution<+T: ResolutionValue>
 }
 declare export const resolution: <T: ResolutionValue = ResolutionValue>(
   value: ValueWithDefault,
-  // $FlowIgnore[method-unbinding]
+  // $FlowFixMe[method-unbinding]
 ) => Resolution<T>;
 
 type TimeValue = string | 0;
@@ -238,7 +238,7 @@ declare export class Time<+T: TimeValue>
 }
 declare export const time: <T: TimeValue = TimeValue>(
   value: ValueWithDefault,
-  // $FlowIgnore[method-unbinding]
+  // $FlowFixMe[method-unbinding]
 ) => Time<T>;
 
 type TransformFunctionValue = string;
@@ -257,7 +257,7 @@ declare export const transformFunction: <
   T: TransformFunctionValue = TransformFunctionValue,
 >(
   value: ValueWithDefault,
-  // $FlowIgnore[method-unbinding]
+  // $FlowFixMe[method-unbinding]
 ) => TransformFunction<T>;
 
 type TransformListValue = string;
@@ -276,5 +276,5 @@ declare export const transformList: <
   T: TransformListValue = TransformListValue,
 >(
   value: ValueWithDefault,
-  // $FlowIgnore[method-unbinding]
+  // $FlowFixMe[method-unbinding]
 ) => TransformList<T>;

package/lib/utils/add-sourcemap-data.js.flow

@@ -7,10 +7,10 @@
  * @flow strict
  */
 
-import type { NodePath } from '../../flow_modules/@babel/traverse';
+import type { NodePath } from '@babel/traverse';
 import type { CompiledNamespaces } from '../shared';
 
-import * as t from '../../flow_modules/@babel/types';
+import * as t from '@babel/types';
 import StateManager from './state-manager';
 
 /**

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

@@ -7,14 +7,14 @@
  * @flow strict
  */
 
-import type { ImportOptions } from '../../flow_modules/@babel/helper-module-imports';
-import type { NodePath } from '../../flow_modules/@babel/traverse';
+import type { ImportOptions } from '@babel/helper-module-imports';
+import type { NodePath } from '@babel/traverse';
 type ImportAdditionOptions = Omit<
   Partial<ImportOptions>,
   'ensureLiveReference' | 'ensureNoContext',
 >;
 
-import * as t from '../../flow_modules/@babel/types';
+import * as t from '@babel/types';
 
 declare export function hoistExpression(
   path: NodePath<>,

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

@@ -21,9 +21,9 @@
  * - It can handle object spreads when the spread value itself is statically evaluated.
  */
 
-import type { NodePath } from '../../flow_modules/@babel/traverse';
+import type { NodePath } from '@babel/traverse';
 
-import * as t from '../../flow_modules/@babel/types';
+import * as t from '@babel/types';
 import StateManager from './state-manager';
 export type FunctionConfig = {
   identifiers: {

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

@@ -9,7 +9,7 @@
 
 import type { FlatCompiledStyles } from '../shared/common-types';
 
-import * as t from '../../flow_modules/@babel/types';
+import * as t from '@babel/types';
 
 type NestedStringObject = $ReadOnly<{
   [key: string]: string | number | null | boolean | NestedStringObject,

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

@@ -28,6 +28,19 @@ type ModuleResolution =
       type: 'experimental_crossFileParsing';
       rootDir?: string;
       themeFileExtension?: null | undefined | string;
+    }>
+  | Readonly<{
+      type: 'custom';
+      themeFileExtension?: null | undefined | string;
+      filePathResolver: (
+        importPath: string,
+        sourceFilePath: string,
+        aliases:
+          | null
+          | undefined
+          | Readonly<{ [$$Key$$: string]: ReadonlyArray<string> }>,
+      ) => string | void;
+      getCanonicalFilePath: (filePath: string) => string;
     }>;
 export type StyleXOptions = Readonly<
   Omit<
@@ -158,36 +171,40 @@ declare class StateManager {
   getCanonicalFilePath(filePath: string): string;
   importPathResolver(importPath: string): ImportPathResolution;
   addStyle(
-    style: [
-      string,
-      (
-        | { ltr: string; rtl?: string | null }
-        | {
-            constKey: string;
-            constVal: string | number;
-            rtl?: string | null;
-            ltr: string;
-          }
-      ),
-      number,
-    ],
-  ): void;
-  registerStyles(
-    styles: ReadonlyArray<
+    style: Readonly<
       [
         string,
         (
-          | { ltr: string; rtl?: string | null }
-          | {
+          | Readonly<{ ltr: string; rtl?: string | null }>
+          | Readonly<{
               constKey: string;
               constVal: string | number;
               rtl?: string | null;
               ltr: string;
-            }
+            }>
         ),
         number,
       ]
     >,
+  ): void;
+  registerStyles(
+    styles: ReadonlyArray<
+      Readonly<
+        [
+          string,
+          (
+            | Readonly<{ ltr: string; rtl?: string | null }>
+            | Readonly<{
+                constKey: string;
+                constVal: string | number;
+                rtl?: string | null;
+                ltr: string;
+              }>
+          ),
+          number,
+        ]
+      >
+    >,
     path?: null | undefined | NodePath,
   ): void;
   markComposedNamespace(

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

@@ -7,13 +7,13 @@
  * @flow strict
  */
 
-import type { PluginPass } from '../../flow_modules/@babel/core';
-import type { NodePath } from '../../flow_modules/@babel/traverse';
+import type { PluginPass } from '@babel/core';
+import type { NodePath } from '@babel/traverse';
 import type {
   CompiledNamespaces,
   StyleXOptions as RuntimeOptions,
 } from '../shared';
-import * as t from '../../flow_modules/@babel/types';
+import * as t from '@babel/types';
 export type ImportPathResolution =
   | false
   | ['themeNameRef' | 'filePath', string];
@@ -32,6 +32,16 @@ type ModuleResolution =
       type: 'experimental_crossFileParsing',
       rootDir?: string,
       themeFileExtension?: ?string,
+    }>
+  | $ReadOnly<{
+      type: 'custom',
+      themeFileExtension?: ?string,
+      filePathResolver: (
+        importPath: string,
+        sourceFilePath: string,
+        aliases: ?$ReadOnly<{ [string]: $ReadOnlyArray<string> }>,
+      ) => string | void,
+      getCanonicalFilePath: (filePath: string) => string,
     }>;
 
 export type StyleXOptions = $ReadOnly<{
@@ -110,36 +120,40 @@ declare export default class StateManager {
   getCanonicalFilePath(filePath: string): string;
   importPathResolver(importPath: string): ImportPathResolution;
   addStyle(
-    style: [
-      string,
-      (
-        | { ltr: string, rtl?: string | null }
-        | {
-            constKey: string,
-            constVal: string | number,
-            rtl?: string | null,
-            ltr: string,
-          }
-      ),
-      number,
-    ],
-  ): void;
-  registerStyles(
-    styles: $ReadOnlyArray<
+    style: $ReadOnly<
       [
         string,
         (
-          | { ltr: string, rtl?: string | null }
-          | {
+          | $ReadOnly<{ ltr: string, rtl?: string | null }>
+          | $ReadOnly<{
               constKey: string,
               constVal: string | number,
               rtl?: string | null,
               ltr: string,
-            }
+            }>
         ),
         number,
       ],
     >,
+  ): void;
+  registerStyles(
+    styles: $ReadOnlyArray<
+      $ReadOnly<
+        [
+          string,
+          (
+            | $ReadOnly<{ ltr: string, rtl?: string | null }>
+            | $ReadOnly<{
+                constKey: string,
+                constVal: string | number,
+                rtl?: string | null,
+                ltr: string,
+              }>
+          ),
+          number,
+        ],
+      >,
+    >,
     path?: ?NodePath<>,
   ): void;
   markComposedNamespace(

package/lib/utils/validate.d.ts

@@ -22,6 +22,7 @@ export declare const string: PrimitiveChecker<string>;
 export declare const nullish: PrimitiveChecker<null | void>;
 export declare const boolean: PrimitiveChecker<boolean>;
 export declare const number: PrimitiveChecker<number>;
+export declare const func: <T extends Function>(msg?: Msg) => Check<T>;
 export declare const literal: <T extends string | number | boolean>(
   $$PARAM_0$$: T,
   msg?: Msg,