@stylexjs/babel-plugin 0.5.0-alpha.4 → 0.5.1

package/lib/index.js

@@ -30,6 +30,7 @@ var name = "@stylexjs/stylex";
 
 const defaultMessage = expected => (value, name) => name ? `Expected (${name}) to be ${expected}, but got \`${JSON.stringify(value)}\`.` : expected;
 const defaultUnionMessage = expected => (value, name) => name ? `Expected (${name}) to be ${expected}` : expected;
+const defaultObjectMessage = expected => (value, name) => name ? `Expected (${name}) to be ${expected} but:` : expected;
 const indent = str => str.split('\n').filter(line => !line.trim().startsWith('But got:')).map(line => line.includes(', but got') ? line.replace(/, but got.+$/, '') : line).map(line => line.trim()[0] === '-' ? line : `- ${line}`).map(line => `\n\t${line}`).join('');
 const string = function () {
   let message = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultMessage('a string');
@@ -104,6 +105,23 @@ const object = function (shape) {
     return result;
   };
 };
+const objectOf = function (check) {
+  let message = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultObjectMessage('an object');
+  return (value, name) => {
+    if (typeof value !== 'object' || value == null) {
+      return new Error(message(value, name));
+    }
+    const result = {};
+    for (const key in value) {
+      const item = check(value[key], name ? `${name}.${key}` : `With the key '${key}':`);
+      if (item instanceof Error) {
+        return new Error(`${message(value, name)}${indent(item.message)}\nBut got: ${indent(JSON.stringify(value))}`);
+      }
+      result[key] = item;
+    }
+    return result;
+  };
+};
 const unionOf = function (a, b) {
   let message = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultUnionMessage('one of');
   return (value, name) => {
@@ -314,8 +332,16 @@ class StateManager {
     const styleResolution = logAndDefault(unionOf3(literal('application-order'), literal('property-specificity'), literal('legacy-expand-shorthands')), options.styleResolution ?? 'application-order', 'application-order', '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 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(_ref => {
+      let [key, value] = _ref;
+      if (typeof value === 'string') {
+        return [key, [value]];
+      }
+      return [key, value];
+    }));
     const opts = {
-      ...options,
+      aliases,
       dev,
       test,
       runtimeInjection,
@@ -372,17 +398,20 @@ class StateManager {
       return identifier;
     }
     const bodyPath = programPath.get('body');
-    let lastImportIndex = -1;
+    let targetImportIndex = -1;
     for (let i = 0; i < bodyPath.length; i++) {
       const statement = bodyPath[i];
       if (isImportDeclaration(statement)) {
-        lastImportIndex = i;
+        targetImportIndex = i;
+        if (statement.node.specifiers.find(s => s.type === 'ImportSpecifier' && s.local.type === 'Identifier' && s.local.name === identifier.name)) {
+          break;
+        }
       }
     }
-    if (lastImportIndex === -1) {
+    if (targetImportIndex === -1) {
       return identifier;
     }
-    const lastImport = bodyPath[lastImportIndex];
+    const lastImport = bodyPath[targetImportIndex];
     if (lastImport == null) {
       return identifier;
     }
@@ -397,17 +426,20 @@ class StateManager {
       return identifier;
     }
     const bodyPath = programPath.get('body');
-    let lastImportIndex = -1;
+    let targetImportIndex = -1;
     for (let i = 0; i < bodyPath.length; i++) {
       const statement = bodyPath[i];
       if (isImportDeclaration(statement)) {
-        lastImportIndex = i;
+        targetImportIndex = i;
+        if (statement.node.specifiers.find(s => s.type === 'ImportDefaultSpecifier' && s.local.type === 'Identifier' && s.local.name === identifier.name)) {
+          break;
+        }
       }
     }
-    if (lastImportIndex === -1) {
+    if (targetImportIndex === -1) {
       return identifier;
     }
-    const lastImport = bodyPath[lastImportIndex];
+    const lastImport = bodyPath[targetImportIndex];
     if (lastImport == null) {
       return identifier;
     }
@@ -455,11 +487,12 @@ class StateManager {
       case 'commonJS':
         {
           const rootDir = this.options.unstable_moduleResolution.rootDir;
-          const themeFileExtension = this.options.unstable_moduleResolution.themeFileExtension ?? '.stylex';
+          const aliases = this.options.aliases;
+          const themeFileExtension = this.options.unstable_moduleResolution?.themeFileExtension ?? '.stylex';
           if (!matchesFileSuffix(themeFileExtension)(importPath)) {
             return false;
           }
-          const resolvedFilePath = filePathResolver(importPath, sourceFilePath);
+          const resolvedFilePath = filePathResolver(importPath, sourceFilePath, aliases);
           return resolvedFilePath ? ['themeNameRef', path.relative(rootDir, resolvedFilePath)] : false;
         }
       case 'haste':
@@ -472,11 +505,12 @@ class StateManager {
         }
       case 'experimental_crossFileParsing':
         {
+          const aliases = this.options.aliases;
           const themeFileExtension = this.options.unstable_moduleResolution.themeFileExtension ?? '.stylex';
           if (!matchesFileSuffix(themeFileExtension)(importPath)) {
             return false;
           }
-          const resolvedFilePath = filePathResolver(importPath, sourceFilePath);
+          const resolvedFilePath = filePathResolver(importPath, sourceFilePath, aliases);
           return resolvedFilePath ? ['filePath', resolvedFilePath] : false;
         }
       default:
@@ -490,25 +524,48 @@ class StateManager {
     this.styleVarsToKeep.add(memberExpression);
   }
 }
-const filePathResolver = (relativeFilePath, sourceFilePath) => {
-  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 importPathStr = fileToLookFor.startsWith('.') ? fileToLookFor + ext : fileToLookFor;
-      const resolvedFilePath = require.resolve(importPathStr, {
-        paths: [path.dirname(sourceFilePath)]
+function possibleAliasedPaths(importPath, aliases) {
+  const result = [importPath];
+  if (aliases == null || Object.keys(aliases).length === 0) {
+    return result;
+  }
+  for (const [alias, value] of Object.entries(aliases)) {
+    if (alias.includes('*')) {
+      const [before, after] = alias.split('*');
+      if (importPath.startsWith(before) && importPath.endsWith(after)) {
+        const replacementString = importPath.slice(before.length, after.length > 0 ? -after.length : undefined);
+        value.forEach(v => {
+          result.push(v.split('*').join(replacementString));
+        });
+      }
+    } else if (alias === importPath) {
+      value.forEach(v => {
+        result.push(v);
       });
-      return resolvedFilePath;
-    } catch {}
+    }
   }
+  return result;
+}
+const filePathResolver = (relativeFilePath, sourceFilePath, aliases) => {
+  for (const ext of ['', ...EXTENSIONS]) {
+    const importPathStr = relativeFilePath + ext;
+    if (importPathStr.startsWith('.')) {
+      try {
+        return require.resolve(importPathStr, {
+          paths: [path.dirname(sourceFilePath)]
+        });
+      } catch {}
+    }
+    const allAliases = possibleAliasedPaths(importPathStr, aliases);
+    for (const possiblePath of allAliases) {
+      try {
+        return require.resolve(possiblePath, {
+          paths: [path.dirname(sourceFilePath)]
+        });
+      } catch {}
+    }
+  }
+  return null;
 };
 const EXTENSIONS = ['.js', '.ts', '.tsx', '.jsx', '.mjs', '.cjs'];
 const addFileExtension = (importedFilePath, sourceFile) => {
@@ -1320,7 +1377,10 @@ function getExpandedKeys(options) {
   return Object.keys(expansions[options.styleResolution ?? 'application-order']);
 }
 function flatMapExpandedShorthands(objEntry, options) {
-  const [key, value] = objEntry;
+  let [key, value] = objEntry;
+  if (key.startsWith('var(') && key.endsWith(')')) {
+    key = key.slice(4, -1);
+  }
   const expansion = expansions[options.styleResolution ?? 'application-order'][key];
   if (expansion) {
     if (Array.isArray(value)) {
@@ -1502,6 +1562,16 @@ function normalizeWhitespace(ast, _) {
           break;
         }
       case 'div':
+        {
+          if (node.value === ',') {
+            node.before = '';
+            node.after = '';
+          } else {
+            node.before = ' ';
+            node.after = ' ';
+          }
+          break;
+        }
       case 'function':
         {
           node.before = '';
@@ -1533,7 +1603,14 @@ function _interopRequireDefault$b(obj) { return obj && obj.__esModule ? obj : {
 const angles = ['deg', 'grad', 'turn', 'rad'];
 const timings = ['ms', 's'];
 function normalizeZeroDimensions(ast, _) {
+  let endFunction = 0;
   ast.walk(node => {
+    if (node.type === 'function' && !endFunction) {
+      endFunction = node.sourceEndIndex ?? 0;
+    }
+    if (endFunction > 0 && node.sourceIndex > endFunction) {
+      endFunction = 0;
+    }
     if (node.type !== 'word') {
       return;
     }
@@ -1545,7 +1622,7 @@ function normalizeZeroDimensions(ast, _) {
       node.value = '0deg';
     } else if (timings.indexOf(dimension.unit) !== -1) {
       node.value = '0s';
-    } else {
+    } else if (!endFunction) {
       node.value = '0';
     }
   });
@@ -1982,6 +2059,7 @@ var propertyPriorities = {};
 Object.defineProperty(propertyPriorities, "__esModule", {
   value: true
 });
+propertyPriorities.PSEUDO_ELEMENT_PRIORITY = propertyPriorities.PSEUDO_CLASS_PRIORITIES = propertyPriorities.AT_RULE_PRIORITIES = void 0;
 propertyPriorities.default = getPriority;
 const longHandPhysical = new Set();
 const longHandLogical = new Set();
@@ -2419,7 +2497,7 @@ longHandLogical.add('math-depth');
 longHandLogical.add('math-shift');
 longHandLogical.add('math-style');
 longHandLogical.add('touch-action');
-const PRIORITIES = {
+const PSEUDO_CLASS_PRIORITIES = propertyPriorities.PSEUDO_CLASS_PRIORITIES = {
   ':is': 40,
   ':where': 40,
   ':not': 40,
@@ -2474,25 +2552,31 @@ const PRIORITIES = {
   ':focusVisible': 160,
   ':active': 170
 };
+const AT_RULE_PRIORITIES = propertyPriorities.AT_RULE_PRIORITIES = {
+  '@supports': 30,
+  '@media': 200,
+  '@container': 300
+};
+const PSEUDO_ELEMENT_PRIORITY = propertyPriorities.PSEUDO_ELEMENT_PRIORITY = 5000;
 function getPriority(key) {
   if (key.startsWith('--')) {
     return 1;
   }
   if (key.startsWith('@supports')) {
-    return 30;
+    return AT_RULE_PRIORITIES['@supports'];
   }
   if (key.startsWith('@media')) {
-    return 200;
+    return AT_RULE_PRIORITIES['@media'];
   }
   if (key.startsWith('@container')) {
-    return 300;
+    return AT_RULE_PRIORITIES['@container'];
   }
   if (key.startsWith('::')) {
-    return 5000;
+    return PSEUDO_ELEMENT_PRIORITY;
   }
   if (key.startsWith(':')) {
     const prop = key.startsWith(':') && key.includes('(') ? key.slice(0, key.indexOf('(')) : key;
-    return PRIORITIES[prop] ?? 40;
+    return PSEUDO_CLASS_PRIORITIES[prop] ?? 40;
   }
   if (longHandPhysical.has(key)) {
     return 4000;
@@ -2516,7 +2600,7 @@ generateCssRule.generateRule = generateRule;
 var _generateLtr$1 = _interopRequireDefault$6(generateLtr);
 var _generateRtl$1 = _interopRequireDefault$6(generateRtl);
 var _genCSSRule = genCSSRule$1;
-var _propertyPriorities = _interopRequireDefault$6(propertyPriorities);
+var _propertyPriorities$1 = _interopRequireDefault$6(propertyPriorities);
 function _interopRequireDefault$6(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function generateRule(className, key, value, pseudos, atRules) {
   const pairs = Array.isArray(value) ? value.map(eachValue => [key, eachValue]) : [[key, value]];
@@ -2525,7 +2609,7 @@ function generateRule(className, key, value, pseudos, atRules) {
   const rtlDecls = pairs.map(_generateRtl$1.default).filter(Boolean).map(pair => pair.join(':')).join(';');
   const ltrRule = (0, _genCSSRule.genCSSRule)(className, ltrDecls, pseudos, atRules);
   const rtlRule = !rtlDecls ? null : (0, _genCSSRule.genCSSRule)(className, rtlDecls, pseudos, atRules);
-  const priority = (0, _propertyPriorities.default)(key) + pseudos.map(_propertyPriorities.default).reduce((a, b) => a + b, 0) + atRules.map(_propertyPriorities.default).reduce((a, b) => a + b, 0);
+  const priority = (0, _propertyPriorities$1.default)(key) + pseudos.map(_propertyPriorities$1.default).reduce((a, b) => a + b, 0) + atRules.map(_propertyPriorities$1.default).reduce((a, b) => a + b, 0);
   return {
     priority,
     ltr: ltrRule,
@@ -3331,7 +3415,7 @@ var messages_1;
 Object.defineProperty(lib, "__esModule", {
   value: true
 });
-var utils_1 = lib.utils = lib.types = messages_1 = lib.messages = keyframes_1 = lib.keyframes = include_1 = lib.include = firstThatWorks_1 = lib.firstThatWorks = defineVars_1 = lib.defineVars = createTheme_1 = lib.createTheme = create_1 = lib.create = IncludedStyles_1 = lib.IncludedStyles = void 0;
+var utils_1 = lib.utils = lib.types = messages_1 = lib.messages = keyframes_1 = lib.keyframes = include_1 = lib.include = firstThatWorks_1 = lib.firstThatWorks = defineVars_1 = lib.defineVars = createTheme_1 = lib.createTheme = create_1 = lib.create = lib.PSEUDO_ELEMENT_PRIORITY = lib.PSEUDO_CLASS_PRIORITIES = IncludedStyles_1 = lib.IncludedStyles = lib.AT_RULE_PRIORITIES = void 0;
 var _stylexCreate = _interopRequireDefault(stylexCreate$1);
 var _stylexDefineVars = _interopRequireDefault(stylexDefineVars$1);
 var _stylexCreateTheme = _interopRequireDefault(stylexCreateTheme$1);
@@ -3343,6 +3427,7 @@ var _fileBasedIdentifier = _interopRequireDefault(fileBasedIdentifier);
 var m = _interopRequireWildcard(messages$3);
 var _types = _interopRequireWildcard(types$1);
 lib.types = _types;
+var _propertyPriorities = propertyPriorities;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -3358,6 +3443,9 @@ utils_1 = lib.utils = {
 messages_1 = lib.messages = m;
 IncludedStyles_1 = lib.IncludedStyles = _stylexInclude.IncludedStyles;
 firstThatWorks_1 = lib.firstThatWorks = _stylexFirstThatWorks.default;
+lib.PSEUDO_CLASS_PRIORITIES = _propertyPriorities.PSEUDO_CLASS_PRIORITIES;
+lib.AT_RULE_PRIORITIES = _propertyPriorities.AT_RULE_PRIORITIES;
+lib.PSEUDO_ELEMENT_PRIORITY = _propertyPriorities.PSEUDO_ELEMENT_PRIORITY;
 
 function namespaceToDevClassName(namespace, varName, filename) {
   const basename = path.basename(filename).split('.')[0];
@@ -4016,7 +4104,10 @@ function evaluatePartialObjectRecursively(path, traversalState) {
           value: null
         };
       }
-      const key = keyResult.value;
+      let key = keyResult.value;
+      if (key.startsWith('var(') && key.endsWith(')')) {
+        key = key.slice(4, -1);
+      }
       const valuePath = prop.get('value');
       if (isObjectExpression(valuePath)) {
         const result = evaluatePartialObjectRecursively(valuePath, traversalState, functions, [...keyPath, key]);

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

@@ -48,6 +48,10 @@ export type StyleXOptions = Readonly<
       treeshakeCompensation?: boolean;
       genConditionalClasses: boolean;
       unstable_moduleResolution: null | undefined | ModuleResolution;
+      aliases?:
+        | null
+        | undefined
+        | Readonly<{ [$$Key$$: string]: string | ReadonlyArray<string> }>;
     })
   > & {
     importSources: ReadonlyArray<
@@ -60,6 +64,10 @@ export type StyleXOptions = Readonly<
     treeshakeCompensation?: boolean;
     genConditionalClasses: boolean;
     unstable_moduleResolution: null | undefined | ModuleResolution;
+    aliases?:
+      | null
+      | undefined
+      | Readonly<{ [$$Key$$: string]: string | ReadonlyArray<string> }>;
   }
 >;
 type StyleXStateOptions = Readonly<
@@ -69,11 +77,19 @@ type StyleXStateOptions = Readonly<
       runtimeInjection:
         | (null | undefined | string)
         | Readonly<{ from: string; as: null | undefined | string }>;
+      aliases?:
+        | null
+        | undefined
+        | Readonly<{ [$$Key$$: string]: ReadonlyArray<string> }>;
     })
   > & {
     runtimeInjection:
       | (null | undefined | string)
       | Readonly<{ from: string; as: null | undefined | string }>;
+    aliases?:
+      | null
+      | undefined
+      | Readonly<{ [$$Key$$: string]: ReadonlyArray<string> }>;
   }
 >;
 declare class StateManager {

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

@@ -49,12 +49,14 @@ export type StyleXOptions = $ReadOnly<{
   treeshakeCompensation?: boolean,
   genConditionalClasses: boolean,
   unstable_moduleResolution: ?ModuleResolution,
+  aliases?: ?$ReadOnly<{ [string]: string | $ReadOnlyArray<string> }>,
   ...
 }>;
 
 type StyleXStateOptions = $ReadOnly<{
   ...StyleXOptions,
   runtimeInjection: ?string | $ReadOnly<{ from: string, as: ?string }>,
+  aliases?: ?$ReadOnly<{ [string]: $ReadOnlyArray<string> }>,
   ...
 }>;
 

package/lib/utils/validate.d.ts

@@ -39,7 +39,7 @@ export declare const object: <
 ) => Check<ObjOfChecks<T>>;
 export declare const objectOf: <T>(
   $$PARAM_0$$: Check<T>,
-  $$PARAM_1$$: Msg,
+  message?: Msg,
 ) => Check<{ readonly [$$Key$$: string]: T }>;
 export declare const unionOf: <A, B>(
   a: Check<A>,

package/lib/utils/validate.js.flow

@@ -40,7 +40,10 @@ declare export const object: <T: { +[string]: Check<mixed> }>(
   msg?: Msg,
 ) => Check<ObjOfChecks<T>>;
 
-declare export const objectOf: <T>(Check<T>, Msg) => Check<{ +[string]: T }>;
+declare export const objectOf: <T>(
+  Check<T>,
+  message?: Msg,
+) => Check<{ +[string]: T }>;
 
 declare export const unionOf: <A, B>(
   a: Check<A>,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/babel-plugin",
-  "version": "0.5.0-alpha.4",
+  "version": "0.5.1",
   "description": "StyleX babel plugin.",
   "main": "lib/index.js",
   "repository": "https://github.com/facebook/stylex",
@@ -9,12 +9,13 @@
     "prebuild": "gen-types -i src/ -o lib/",
     "build": "rollup --config ./rollup.config.mjs",
     "build-haste": "HASTE=true rollup --config ./rollup.config.mjs",
+    "build-watch": "rollup --config ./rollup.config.mjs --watch",
     "test": "jest"
   },
   "dependencies": {
     "@babel/helper-module-imports": "^7.22.15",
-    "@stylexjs/shared": "0.5.0-alpha.4",
-    "@stylexjs/stylex": "0.5.0-alpha.4",
+    "@stylexjs/shared": "0.5.1",
+    "@stylexjs/stylex": "0.5.1",
     "@babel/core": "^7.23.6",
     "@babel/traverse": "^7.23.6",
     "@babel/types": "^7.23.6"