@stylexjs/babel-plugin 0.4.0 → 0.5.0-alpha.1

package/flow_modules/@babel/core/index.js.flow

@@ -518,7 +518,7 @@ export interface BabelFile {
 export interface PluginPass {
   file: BabelFile;
   key: string;
-  opts: { [string]: mixed };
+  opts: { +[string]: mixed };
   cwd: string;
   filename: string | void;
   get(key: mixed): any;

package/lib/index.js

@@ -6,7 +6,6 @@ var helperModuleImports = require('@babel/helper-module-imports');
 var require$$0 = require('postcss-value-parser');
 var core = require('@babel/core');
 var traverse = require('@babel/traverse');
-var require$$0$1 = require('styleq');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -29,11 +28,150 @@ var t__namespace = /*#__PURE__*/_interopNamespaceDefault(t);
 
 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 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');
+  return (value, name) => {
+    if (typeof value !== 'string') {
+      return new Error(message(value, name));
+    }
+    return value;
+  };
+};
+const nullish = function () {
+  let message = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultMessage('`null` or `undefined`');
+  return (value, name) => value == null ? value : new Error(message(value, name));
+};
+const boolean = function () {
+  let message = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultMessage('a boolean');
+  return (value, name) => {
+    if (typeof value !== 'boolean') {
+      return new Error(message(value, name));
+    }
+    return value;
+  };
+};
+const literal = function (expected) {
+  let message = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultMessage(`the literal ${JSON.stringify(expected)}`);
+  return (value, name) => {
+    if (value === expected) {
+      return expected;
+    }
+    return new Error(message(value, name));
+  };
+};
+const array = function (check) {
+  let message = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultMessage('an array');
+  return function (value) {
+    let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'array';
+    if (!Array.isArray(value)) {
+      return new Error(message(value, name));
+    }
+    const validated = value.map((item, i) => check(item, name ? `${name}[${i}]` : undefined));
+    const errors = validated.filter(item => item instanceof Error);
+    if (errors.length > 0) {
+      const errMessageList = errors.map(item => '\t' + item.message).join('\n');
+      return new Error(`Failed to validate ${name}:\n${errMessageList}`);
+    }
+    return validated.filter(item => !(item instanceof Error));
+  };
+};
+const object = function (shape) {
+  let message = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultMessage('an object where:');
+  return (value, name) => {
+    if (typeof value !== 'object' || value == null) {
+      return new Error(message(value, name));
+    }
+    const result = {};
+    for (const key in shape) {
+      const check = shape[key];
+      const item = check(value[key], name ? `${name}.${key}` : `obj.${key}`);
+      if (item instanceof Error) {
+        const objectDescription = Object.entries(shape).map(_ref => {
+          let [key, check] = _ref;
+          let msg = check(Symbol()).message;
+          if (msg.includes('\n')) {
+            msg = indent(indent(msg)).split('\n').slice(1).join('\n');
+          }
+          return `\t- Expected "${key}": to be ${msg}`;
+        }).join('\n');
+        return new Error(`${message(value, name)}\n${objectDescription}\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) => {
+    const resultA = a(value);
+    if (!(resultA instanceof Error)) {
+      return resultA;
+    }
+    const resultB = b(value);
+    if (!(resultB instanceof Error)) {
+      return resultB;
+    }
+    return new Error(`${message(value, name)}${indent(resultA.message)}${indent(resultB.message)}\nBut got: ${JSON.stringify(value)}`);
+  };
+};
+const unionOf3 = function (a, b, c) {
+  let message = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : defaultUnionMessage('one of');
+  return (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;
+    }
+    return new Error(`${message(value, name)}${indent(resultA.message)}${indent(resultB.message)}${indent(resultC.message)}\nBut got: ${JSON.stringify(value)}`);
+  };
+};
+const logAndDefault = (check, value, def, name) => {
+  const result = check(value, name);
+  if (result instanceof Error) {
+    console.error('[@stylexjs/babel-plugin]', result.message);
+    return def;
+  }
+  return result;
+};
+
+const CheckModuleResolution = unionOf3(object({
+  type: literal('commonJS'),
+  rootDir: string(),
+  themeFileExtension: unionOf(nullish(), string())
+}), object({
+  type: literal('haste'),
+  themeFileExtension: unionOf(nullish(), string())
+}), object({
+  type: literal('experimental_crossFileParsing'),
+  rootDir: string(),
+  themeFileExtension: unionOf(nullish(), string())
+}));
+const checkImportSource = unionOf(string(), object({
+  from: string(),
+  as: string()
+}));
+const checkImportSources = array(checkImportSource);
+const checkRuntimeInjection = unionOf3(boolean(), string(), object({
+  from: string(),
+  as: string()
+}));
 const DEFAULT_INJECT_PATH = '@stylexjs/stylex/lib/stylex-inject';
 class StateManager {
   importPaths = new Set();
   stylexImport = new Set();
   stylexPropsImport = new Set();
+  stylexAttrsImport = new Set();
   stylexCreateImport = new Set();
   stylexIncludeImport = new Set();
   stylexFirstThatWorksImport = new Set();
@@ -49,25 +187,36 @@ class StateManager {
   constructor(state) {
     this._state = state;
     state.file.metadata.stylex = [];
-  }
-  get options() {
-    const options = this._state.opts || {};
+    this.options = this.setOptions(state.opts ?? {});
+  }
+  setOptions(options) {
+    const dev = logAndDefault(boolean(), options.dev ?? false, false, 'options.dev');
+    const test = logAndDefault(boolean(), options.test ?? false, false, 'options.test');
+    const configRuntimeInjection = logAndDefault(checkRuntimeInjection, options.runtimeInjection ?? dev, dev, '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 importSources = [name, 'stylex', ...configuredImportSources];
+    const genConditionalClasses = logAndDefault(boolean(), options.genConditionalClasses ?? false, false, 'options.genConditionalClasses');
+    const useRemForFontSize = logAndDefault(boolean(), options.useRemForFontSize ?? false, false, 'options.useRemForFontSize');
+    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 opts = {
       ...options,
-      dev: !!options.dev,
-      test: !!options.test,
-      runtimeInjection: options.runtimeInjection === true ? DEFAULT_INJECT_PATH : options.runtimeInjection ? options.runtimeInjection : options.dev ? DEFAULT_INJECT_PATH : undefined,
-      classNamePrefix: options.classNamePrefix ?? 'x',
-      importSources: [name, 'stylex', ...(options.importSources ?? [])],
-      definedStylexCSSVariables: options.definedStylexCSSVariables ?? {},
-      genConditionalClasses: !!options.genConditionalClasses,
-      useRemForFontSize: !!options.useRemForFontSize,
-      styleResolution: options.styleResolution ?? 'application-order',
-      unstable_moduleResolution: options.unstable_moduleResolution ?? undefined,
-      treeshakeCompensation: !!options.treeshakeCompensation
+      dev,
+      test,
+      runtimeInjection,
+      classNamePrefix,
+      importSources,
+      definedStylexCSSVariables: {},
+      genConditionalClasses,
+      useRemForFontSize,
+      styleResolution,
+      unstable_moduleResolution,
+      treeshakeCompensation
     };
-    this._state.opts = opts;
-    return this._state.opts;
+    return opts;
   }
   get importPathString() {
     if (this.importPaths.has('@stylexjs/stylex')) {
@@ -96,9 +245,13 @@ class StateManager {
     return this._state.file.metadata;
   }
   get runtimeInjection() {
-    return typeof this.options.runtimeInjection === 'string' ? {
-      from: this.options.runtimeInjection
-    } : this.options.runtimeInjection || null;
+    if (this.options.runtimeInjection == null) {
+      return null;
+    }
+    const runInj = this.options.runtimeInjection;
+    return typeof runInj === 'string' ? {
+      from: runInj
+    } : runInj || null;
   }
   get isDev() {
     return !!this.options.dev;
@@ -239,6 +392,9 @@ function readImportDeclarations(path, state) {
             if (importedName === 'props') {
               state.stylexPropsImport.add(localName);
             }
+            if (importedName === 'attrs') {
+              state.stylexAttrsImport.add(localName);
+            }
             if (importedName === 'keyframes') {
               state.stylexKeyframesImport.add(localName);
             }
@@ -287,6 +443,9 @@ function readRequires(path, state) {
           if (prop.key.name === 'props') {
             state.stylexPropsImport.add(value.name);
           }
+          if (prop.key.name === 'attrs') {
+            state.stylexAttrsImport.add(value.name);
+          }
           if (prop.key.name === 'keyframes') {
             state.stylexKeyframesImport.add(value.name);
           }
@@ -4049,8 +4208,27 @@ function transformStyleXDefineVars(callExpressionPath, state) {
     const varId = variableDeclaratorNode.id;
     const args = callExpressionPath.get('arguments');
     const firstArg = args[0];
+    const injectedKeyframes = {};
+    function keyframes(animation) {
+      const [animationName, injectedStyle] = keyframes_1(animation, state.options);
+      injectedKeyframes[animationName] = injectedStyle;
+      return animationName;
+    }
     const identifiers = {};
     const memberExpressions = {};
+    state.stylexKeyframesImport.forEach(name => {
+      identifiers[name] = {
+        fn: keyframes
+      };
+    });
+    state.stylexImport.forEach(name => {
+      if (memberExpressions[name] === undefined) {
+        memberExpressions[name] = {};
+      }
+      memberExpressions[name].keyframes = {
+        fn: keyframes
+      };
+    });
     const {
       confident,
       value
@@ -4069,13 +4247,17 @@ function transformStyleXDefineVars(callExpressionPath, state) {
       throw new Error('No filename found for generating theme name.');
     }
     const exportName = varId.name;
-    const [variablesObj, injectedStyles] = defineVars_1(value, {
+    const [variablesObj, injectedStylesSansKeyframes] = defineVars_1(value, {
       ...state.options,
       themeName: utils_1.genFileBasedIdentifier({
         fileName,
         exportName
       })
     });
+    const injectedStyles = {
+      ...injectedKeyframes,
+      ...injectedStylesSansKeyframes
+    };
     callExpressionPath.replaceWith(convertObjectToAST(variablesObj));
     const statementPath = variableDeclaratorPath.parentPath.parentPath;
     if (Object.keys(injectedStyles).length === 0) {
@@ -4318,18 +4500,181 @@ function assertValidKeyframes(obj) {
   }
 }
 
-var stylex = {};
+var styleq$1 = {};
 
-var default_1;
+/**
+ * Copyright (c) Nicolas Gallagher
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
 
-Object.defineProperty(stylex, "__esModule", {
+Object.defineProperty(styleq$1, "__esModule", {
   value: true
 });
-stylex.__monkey_patch__ = __monkey_patch__;
-stylex.keyframes = stylex.include = stylex.firstThatWorks = stylex.defineVars = default_1 = stylex.default = stylex.createTheme = stylex.create = void 0;
-var props_1 = stylex.props = props;
-stylex.types = stylex.stylex = void 0;
-var _styleq = require$$0$1;
+var styleq_2 = styleq$1.styleq = void 0;
+var cache = new WeakMap();
+var compiledKey = '$$css';
+
+function createStyleq(options) {
+  var disableCache;
+  var disableMix;
+  var transform;
+
+  if (options != null) {
+    disableCache = options.disableCache === true;
+    disableMix = options.disableMix === true;
+    transform = options.transform;
+  }
+
+  return function styleq() {
+    // Keep track of property commits to the className
+    var definedProperties = []; // The className and inline style to build up
+
+    var className = '';
+    var inlineStyle = null; // The current position in the cache graph
+
+    var nextCache = disableCache ? null : cache; // This way of creating an array from arguments is fastest
+
+    var styles = new Array(arguments.length);
+
+    for (var i = 0; i < arguments.length; i++) {
+      styles[i] = arguments[i];
+    } // Iterate over styles from last to first
+
+
+    while (styles.length > 0) {
+      var possibleStyle = styles.pop(); // Skip empty items
+
+      if (possibleStyle == null || possibleStyle === false) {
+        continue;
+      } // Push nested styles back onto the stack to be processed
+
+
+      if (Array.isArray(possibleStyle)) {
+        for (var _i = 0; _i < possibleStyle.length; _i++) {
+          styles.push(possibleStyle[_i]);
+        }
+
+        continue;
+      } // Process an individual style object
+
+
+      var style = transform != null ? transform(possibleStyle) : possibleStyle;
+
+      if (style.$$css) {
+        // Build up the class names defined by this object
+        var classNameChunk = ''; // Check the cache to see if we've already done this work
+
+        if (nextCache != null && nextCache.has(style)) {
+          // Cache: read
+          var cacheEntry = nextCache.get(style);
+
+          if (cacheEntry != null) {
+            classNameChunk = cacheEntry[0]; // $FlowIgnore
+
+            definedProperties.push.apply(definedProperties, cacheEntry[1]);
+            nextCache = cacheEntry[2];
+          }
+        } // Update the chunks with data from this object
+        else {
+          // The properties defined by this object
+          var definedPropertiesChunk = [];
+
+          for (var prop in style) {
+            var value = style[prop];
+            if (prop === compiledKey) continue; // Each property value is used as an HTML class name
+            // { 'debug.string': 'debug.string', opacity: 's-jskmnoqp' }
+
+            if (typeof value === 'string' || value === null) {
+              // Only add to chunks if this property hasn't already been seen
+              if (!definedProperties.includes(prop)) {
+                definedProperties.push(prop);
+
+                if (nextCache != null) {
+                  definedPropertiesChunk.push(prop);
+                }
+
+                if (typeof value === 'string') {
+                  classNameChunk += classNameChunk ? ' ' + value : value;
+                }
+              }
+            } // If we encounter a value that isn't a string or `null`
+            else {
+              console.error("styleq: ".concat(prop, " typeof ").concat(String(value), " is not \"string\" or \"null\"."));
+            }
+          } // Cache: write
+
+
+          if (nextCache != null) {
+            // Create the next WeakMap for this sequence of styles
+            var weakMap = new WeakMap();
+            nextCache.set(style, [classNameChunk, definedPropertiesChunk, weakMap]);
+            nextCache = weakMap;
+          }
+        } // Order of classes in chunks matches property-iteration order of style
+        // object. Order of chunks matches passed order of styles from first to
+        // last (which we iterate over in reverse).
+
+
+        if (classNameChunk) {
+          className = className ? classNameChunk + ' ' + className : classNameChunk;
+        }
+      } // ----- DYNAMIC: Process inline style object -----
+      else {
+        if (disableMix) {
+          if (inlineStyle == null) {
+            inlineStyle = {};
+          }
+
+          inlineStyle = Object.assign({}, style, inlineStyle);
+        } else {
+          var subStyle = null;
+
+          for (var _prop in style) {
+            var _value = style[_prop];
+
+            if (_value !== undefined) {
+              if (!definedProperties.includes(_prop)) {
+                if (_value != null) {
+                  if (inlineStyle == null) {
+                    inlineStyle = {};
+                  }
+
+                  if (subStyle == null) {
+                    subStyle = {};
+                  }
+
+                  subStyle[_prop] = _value;
+                }
+
+                definedProperties.push(_prop); // Cache is unnecessary overhead if results can't be reused.
+
+                nextCache = null;
+              }
+            }
+          }
+
+          if (subStyle != null) {
+            inlineStyle = Object.assign(subStyle, inlineStyle);
+          }
+        }
+      }
+    }
+
+    var styleProps = [className, inlineStyle];
+    return styleProps;
+  };
+}
+
+var styleq = createStyleq();
+styleq_2 = styleq$1.styleq = styleq;
+styleq.factory = createStyleq;
+
+const errorForFn = name => new Error(`'stylex.${name}' should never be called at runtime. It should be compiled away by '@stylexjs/babel-plugin'`);
+const errorForType = key => errorForFn(`types.${key}`);
 function props() {
   const options = this;
   for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -4338,7 +4683,7 @@ function props() {
   if (__implementations.props) {
     return __implementations.props.call(options, styles);
   }
-  const [className, style] = (0, _styleq.styleq)(styles);
+  const [className, style] = styleq_2(styles);
   const result = {};
   if (className != null && className !== '') {
     result.className = className;
@@ -4348,99 +4693,111 @@ function props() {
   }
   return result;
 }
+function attrs() {
+  const {
+    className,
+    style
+  } = props(...arguments);
+  const result = {};
+  if (className != null && className !== '') {
+    result.class = className;
+  }
+  if (style != null && Object.keys(style).length > 0) {
+    result.style = Object.keys(style).map(key => `${key}:${style[key]};`).join('');
+  }
+  return result;
+}
 function stylexCreate(styles) {
   if (__implementations.create != null) {
     const create = __implementations.create;
     return create(styles);
   }
-  throw new Error('stylex.create should never be called. It should be compiled away.');
+  throw errorForFn('create');
 }
 function stylexDefineVars(styles) {
   if (__implementations.defineVars) {
     return __implementations.defineVars(styles);
   }
-  throw new Error('stylex.defineVars should never be called. It should be compiled away.');
+  throw errorForFn('defineVars');
 }
 const stylexCreateTheme = (baseTokens, overrides) => {
   if (__implementations.createTheme) {
     return __implementations.createTheme(baseTokens, overrides);
   }
-  throw new Error('stylex.createTheme should never be called. It should be compiled away.');
+  throw errorForFn('createTheme');
 };
 const stylexInclude = styles => {
   if (__implementations.include) {
     return __implementations.include(styles);
   }
-  throw new Error('stylex.extends should never be called. It should be compiled away.');
+  throw errorForFn('include');
 };
-const create = stylex.create = stylexCreate;
-const defineVars = stylex.defineVars = stylexDefineVars;
-const createTheme = stylex.createTheme = stylexCreateTheme;
-const include = stylex.include = stylexInclude;
-const types = stylex.types = {
+const create = stylexCreate;
+const defineVars = stylexDefineVars;
+const createTheme = stylexCreateTheme;
+const include = stylexInclude;
+const types = {
   angle: _v => {
-    throw new Error(errorForType('angle'));
+    throw errorForType('angle');
   },
   color: _v => {
-    throw new Error(errorForType('color'));
+    throw errorForType('color');
   },
   url: _v => {
-    throw new Error(errorForType('url'));
+    throw errorForType('url');
   },
   image: _v => {
-    throw new Error(errorForType('image'));
+    throw errorForType('image');
   },
   integer: _v => {
-    throw new Error(errorForType('integer'));
+    throw errorForType('integer');
   },
   lengthPercentage: _v => {
-    throw new Error(errorForType('lengthPercentage'));
+    throw errorForType('lengthPercentage');
   },
   length: _v => {
-    throw new Error(errorForType('length'));
+    throw errorForType('length');
   },
   percentage: _v => {
-    throw new Error(errorForType('percentage'));
+    throw errorForType('percentage');
   },
   number: _v => {
-    throw new Error(errorForType('number'));
+    throw errorForType('number');
   },
   resolution: _v => {
-    throw new Error(errorForType('resolution'));
+    throw errorForType('resolution');
   },
   time: _v => {
-    throw new Error(errorForType('time'));
+    throw errorForType('time');
   },
   transformFunction: _v => {
-    throw new Error(errorForType('transformFunction'));
+    throw errorForType('transformFunction');
   },
   transformList: _v => {
-    throw new Error(errorForType('transformList'));
+    throw errorForType('transformList');
   }
 };
-const errorForType = type => `stylex.types.${type} should be compiled away by @stylexjs/babel-plugin`;
 const keyframes = keyframes => {
   if (__implementations.keyframes) {
     return __implementations.keyframes(keyframes);
   }
-  throw new Error('stylex.keyframes should never be called');
+  throw errorForFn('keyframes');
 };
-stylex.keyframes = keyframes;
 const firstThatWorks = function () {
   if (__implementations.firstThatWorks) {
     return __implementations.firstThatWorks(...arguments);
   }
-  throw new Error('stylex.firstThatWorks should never be called.');
+  throw errorForFn('firstThatWorks');
 };
-stylex.firstThatWorks = firstThatWorks;
 function _stylex() {
   for (var _len2 = arguments.length, styles = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
     styles[_key2] = arguments[_key2];
   }
-  const [className] = (0, _styleq.styleq)(styles);
+  const [className] = styleq_2(styles);
   return className;
 }
 _stylex.props = props;
+_stylex.attrs = attrs;
 _stylex.create = create;
 _stylex.defineVars = defineVars;
 _stylex.createTheme = createTheme;
@@ -4449,15 +4806,6 @@ _stylex.keyframes = keyframes;
 _stylex.firstThatWorks = firstThatWorks;
 _stylex.types = types;
 const __implementations = {};
-function __monkey_patch__(key, implementation) {
-  if (key === 'types') {
-    Object.assign(types, implementation);
-  } else {
-    __implementations[key] = implementation;
-  }
-}
-stylex.stylex = _stylex;
-default_1 = stylex.default = _stylex;
 
 function skipStylexMergeChildren(path, state) {
   const {
@@ -4481,6 +4829,228 @@ function transformStyleXMerge(path, state) {
   let bailOutIndex = null;
   const resolvedArgs = [];
   for (const arg of node.arguments) {
+    currentIndex++;
+    switch (arg.type) {
+      case 'MemberExpression':
+        {
+          const resolved = parseNullableStyle$2(arg, state);
+          if (resolved === 'other') {
+            bailOutIndex = currentIndex;
+            bailOut = true;
+          } else {
+            resolvedArgs.push(resolved);
+          }
+          break;
+        }
+      case 'ConditionalExpression':
+        {
+          const {
+            test,
+            consequent,
+            alternate
+          } = arg;
+          const primary = parseNullableStyle$2(consequent, state);
+          const fallback = parseNullableStyle$2(alternate, state);
+          if (primary === 'other' || fallback === 'other') {
+            bailOutIndex = currentIndex;
+            bailOut = true;
+          } else {
+            resolvedArgs.push([test, primary, fallback]);
+            conditional++;
+          }
+          break;
+        }
+      case 'LogicalExpression':
+        {
+          if (arg.operator !== '&&') {
+            bailOutIndex = currentIndex;
+            bailOut = true;
+            break;
+          }
+          const {
+            left,
+            right
+          } = arg;
+          const leftResolved = parseNullableStyle$2(left, state);
+          const rightResolved = parseNullableStyle$2(right, state);
+          if (leftResolved !== 'other' || rightResolved === 'other') {
+            bailOutIndex = currentIndex;
+            bailOut = true;
+          } else {
+            resolvedArgs.push([left, rightResolved, null]);
+            conditional++;
+          }
+          break;
+        }
+      default:
+        bailOutIndex = currentIndex;
+        bailOut = true;
+        break;
+    }
+    if (conditional > 4) {
+      bailOut = true;
+    }
+    if (bailOut) {
+      break;
+    }
+  }
+  if (!state.options.genConditionalClasses && conditional) {
+    bailOut = true;
+  }
+  if (bailOut) {
+    const argumentPaths = path.get('arguments');
+    let nonNullProps = [];
+    let index = -1;
+    for (const argPath of argumentPaths) {
+      index++;
+      function MemberExpression(path) {
+        const object = path.get('object').node;
+        const property = path.get('property').node;
+        const computed = path.node.computed;
+        let objName = null;
+        let propName = null;
+        if (object.type === 'Identifier' && state.styleMap.has(object.name)) {
+          objName = object.name;
+          if (property.type === 'Identifier' && !computed) {
+            propName = property.name;
+          }
+          if ((property.type === 'StringLiteral' || property.type === 'NumericLiteral') && computed) {
+            propName = property.value;
+          }
+        }
+        let styleNonNullProps = [];
+        if (bailOutIndex != null && index > bailOutIndex) {
+          nonNullProps = true;
+          styleNonNullProps = true;
+        }
+        if (nonNullProps === true) {
+          styleNonNullProps = true;
+        } else {
+          const {
+            confident,
+            value: styleValue
+          } = evaluate(path, state);
+          if (!confident) {
+            nonNullProps = true;
+            styleNonNullProps = true;
+          } else {
+            styleNonNullProps = nonNullProps === true ? true : [...nonNullProps];
+            if (nonNullProps !== true) {
+              nonNullProps = [...nonNullProps, ...Object.keys(styleValue).filter(key => styleValue[key] !== null)];
+            }
+          }
+        }
+        if (objName != null) {
+          state.styleVarsToKeep.add([objName, propName != null ? String(propName) : true, styleNonNullProps]);
+        }
+      }
+      if (isMemberExpression(argPath)) {
+        MemberExpression(argPath);
+      } else {
+        argPath.traverse({
+          MemberExpression
+        });
+      }
+    }
+  } else {
+    path.skip();
+    const stringExpression = makeStringExpression$2(resolvedArgs);
+    path.replaceWith(stringExpression);
+  }
+}
+function parseNullableStyle$2(node, state) {
+  if (t__namespace.isNullLiteral(node) || t__namespace.isIdentifier(node) && node.name === 'undefined') {
+    return null;
+  }
+  if (t__namespace.isMemberExpression(node)) {
+    const {
+      object,
+      property,
+      computed: computed
+    } = node;
+    let objName = null;
+    let propName = null;
+    if (object.type === 'Identifier' && state.styleMap.has(object.name) && property.type === 'Identifier' && !computed) {
+      objName = object.name;
+      propName = property.name;
+    }
+    if (object.type === 'Identifier' && state.styleMap.has(object.name) && (property.type === 'StringLiteral' || property.type === 'NumericLiteral') && computed) {
+      objName = object.name;
+      propName = property.value;
+    }
+    if (objName != null && propName != null) {
+      const style = state.styleMap.get(objName);
+      if (style != null && style[String(propName)] != null) {
+        return style[String(propName)];
+      }
+    }
+  }
+  return 'other';
+}
+function makeStringExpression$2(values) {
+  const conditions = values.filter(v => Array.isArray(v)).map(v => v[0]);
+  if (conditions.length === 0) {
+    return t__namespace.stringLiteral(_stylex(...values));
+  }
+  const conditionPermutations = genConditionPermutations$2(conditions.length);
+  const objEntries = conditionPermutations.map(permutation => {
+    let i = 0;
+    const args = values.map(v => {
+      if (Array.isArray(v)) {
+        const [_test, primary, fallback] = v;
+        return permutation[i++] ? primary : fallback;
+      } else {
+        return v;
+      }
+    });
+    const key = permutation.reduce((soFar, bool) => soFar << 1 | (bool ? 1 : 0), 0);
+    return t__namespace.objectProperty(t__namespace.numericLiteral(key), t__namespace.stringLiteral(_stylex(...args)));
+  });
+  const objExpressions = t__namespace.objectExpression(objEntries);
+  const conditionsToKey = genBitwiseOrOfConditions$2(conditions);
+  return t__namespace.memberExpression(objExpressions, conditionsToKey, true);
+}
+function genConditionPermutations$2(count) {
+  const result = [];
+  for (let i = 0; i < 2 ** count; i++) {
+    const combination = [];
+    for (let j = 0; j < count; j++) {
+      combination.push(Boolean(i & 1 << j));
+    }
+    result.push(combination);
+  }
+  return result;
+}
+function genBitwiseOrOfConditions$2(conditions) {
+  const binaryExpressions = conditions.map((condition, i) => {
+    const shift = conditions.length - i - 1;
+    return t__namespace.binaryExpression('<<', t__namespace.unaryExpression('!', t__namespace.unaryExpression('!', condition)), t__namespace.numericLiteral(shift));
+  });
+  return binaryExpressions.reduce((acc, expr) => {
+    return t__namespace.binaryExpression('|', acc, expr);
+  });
+}
+
+function skipStylexPropsChildren(path, state) {
+  if (!isCalleeIdentifier$1(path, state) && !isCalleeMemberExpression$1(path, state)) {
+    return;
+  }
+  path.skip();
+}
+function transformStylexProps(path, state) {
+  const {
+    node
+  } = path;
+  if (!isCalleeIdentifier$1(path, state) && !isCalleeMemberExpression$1(path, state)) {
+    return;
+  }
+  let bailOut = false;
+  let conditional = 0;
+  const args = node.arguments.flatMap(arg => arg.type === 'ArrayExpression' ? arg.elements : [arg]);
+  let currentIndex = -1;
+  let bailOutIndex = null;
+  const resolvedArgs = [];
+  for (const arg of args) {
     currentIndex++;
     switch (arg.type) {
       case 'MemberExpression':
@@ -4642,7 +5212,8 @@ function parseNullableStyle$1(node, state) {
 function makeStringExpression$1(values) {
   const conditions = values.filter(v => Array.isArray(v)).map(v => v[0]);
   if (conditions.length === 0) {
-    return t__namespace.stringLiteral(default_1(...values));
+    const result = props(values);
+    return convertObjectToAST(result);
   }
   const conditionPermutations = genConditionPermutations$1(conditions.length);
   const objEntries = conditionPermutations.map(permutation => {
@@ -4656,7 +5227,7 @@ function makeStringExpression$1(values) {
       }
     });
     const key = permutation.reduce((soFar, bool) => soFar << 1 | (bool ? 1 : 0), 0);
-    return t__namespace.objectProperty(t__namespace.numericLiteral(key), t__namespace.stringLiteral(default_1(...args)));
+    return t__namespace.objectProperty(t__namespace.numericLiteral(key), convertObjectToAST(props(args)));
   });
   const objExpressions = t__namespace.objectExpression(objEntries);
   const conditionsToKey = genBitwiseOrOfConditions$1(conditions);
@@ -4682,14 +5253,26 @@ function genBitwiseOrOfConditions$1(conditions) {
     return t__namespace.binaryExpression('|', acc, expr);
   });
 }
+function isCalleeIdentifier$1(path, state) {
+  const {
+    node
+  } = path;
+  return node != null && node.callee != null && node.callee.type === 'Identifier' && state.stylexPropsImport.has(node.callee.name);
+}
+function isCalleeMemberExpression$1(path, state) {
+  const {
+    node
+  } = path;
+  return node != null && node.callee != null && node.callee.type === 'MemberExpression' && node.callee.object.type === 'Identifier' && node.callee.property.type === 'Identifier' && node.callee.property.name === 'props' && state.stylexImport.has(node.callee.object.name);
+}
 
-function skipStylexPropsChildren(path, state) {
+function skipStylexAttrsChildren(path, state) {
   if (!isCalleeIdentifier(path, state) && !isCalleeMemberExpression(path, state)) {
     return;
   }
   path.skip();
 }
-function transformStylexProps(path, state) {
+function transformStylexAttrs(path, state) {
   const {
     node
   } = path;
@@ -4864,7 +5447,7 @@ function parseNullableStyle(node, state) {
 function makeStringExpression(values) {
   const conditions = values.filter(v => Array.isArray(v)).map(v => v[0]);
   if (conditions.length === 0) {
-    const result = props_1(values);
+    const result = attrs(values);
     return convertObjectToAST(result);
   }
   const conditionPermutations = genConditionPermutations(conditions.length);
@@ -4879,7 +5462,7 @@ function makeStringExpression(values) {
       }
     });
     const key = permutation.reduce((soFar, bool) => soFar << 1 | (bool ? 1 : 0), 0);
-    return t__namespace.objectProperty(t__namespace.numericLiteral(key), convertObjectToAST(props_1(args)));
+    return t__namespace.objectProperty(t__namespace.numericLiteral(key), convertObjectToAST(attrs(args)));
   });
   const objExpressions = t__namespace.objectExpression(objEntries);
   const conditionsToKey = genBitwiseOrOfConditions(conditions);
@@ -4909,13 +5492,13 @@ function isCalleeIdentifier(path, state) {
   const {
     node
   } = path;
-  return node != null && node.callee != null && node.callee.type === 'Identifier' && state.stylexPropsImport.has(node.callee.name);
+  return node != null && node.callee != null && node.callee.type === 'Identifier' && state.stylexAttrsImport.has(node.callee.name);
 }
 function isCalleeMemberExpression(path, state) {
   const {
     node
   } = path;
-  return node != null && node.callee != null && node.callee.type === 'MemberExpression' && node.callee.object.type === 'Identifier' && node.callee.property.type === 'Identifier' && node.callee.property.name === 'props' && state.stylexImport.has(node.callee.object.name);
+  return node != null && node.callee != null && node.callee.type === 'MemberExpression' && node.callee.object.type === 'Identifier' && node.callee.property.type === 'Identifier' && node.callee.property.name === 'attrs' && state.stylexImport.has(node.callee.object.name);
 }
 
 const NAME = 'stylex';
@@ -4953,6 +5536,7 @@ function styleXTransform() {
             CallExpression(path) {
               transformStyleXMerge(path, state);
               transformStylexProps(path, state);
+              transformStylexAttrs(path, state);
             }
           });
           const varsToKeep = {};
@@ -5034,6 +5618,7 @@ function styleXTransform() {
       CallExpression(path) {
         skipStylexMergeChildren(path, state);
         skipStylexPropsChildren(path, state);
+        skipStylexAttrsChildren(path, state);
       },
       Identifier(path) {
         if (isReferencedIdentifier(path)) {

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

@@ -18,13 +18,17 @@ export type ImportPathResolution =
   | false
   | ['themeNameRef' | 'filePath', string];
 type ModuleResolution =
-  | { type: 'commonJS'; rootDir: string; themeFileExtension?: string }
-  | { type: 'haste'; themeFileExtension?: string }
-  | {
+  | Readonly<{
+      type: 'commonJS';
+      rootDir: string;
+      themeFileExtension?: null | undefined | string;
+    }>
+  | Readonly<{ type: 'haste'; themeFileExtension?: null | undefined | string }>
+  | Readonly<{
       type: 'experimental_crossFileParsing';
       rootDir: string;
-      themeFileExtension?: string;
-    };
+      themeFileExtension?: null | undefined | string;
+    }>;
 export type StyleXOptions = Readonly<
   Omit<
     RuntimeOptions,
@@ -38,7 +42,7 @@ export type StyleXOptions = Readonly<
         | Readonly<{ from: string; as: string }>;
       treeshakeCompensation?: boolean;
       genConditionalClasses: boolean;
-      unstable_moduleResolution: void | ModuleResolution;
+      unstable_moduleResolution: null | undefined | ModuleResolution;
     })
   > & {
     importSources: ReadonlyArray<
@@ -50,7 +54,7 @@ export type StyleXOptions = Readonly<
       | Readonly<{ from: string; as: string }>;
     treeshakeCompensation?: boolean;
     genConditionalClasses: boolean;
-    unstable_moduleResolution: void | ModuleResolution;
+    unstable_moduleResolution: null | undefined | ModuleResolution;
   }
 >;
 type StyleXStateOptions = Readonly<
@@ -59,12 +63,12 @@ type StyleXStateOptions = Readonly<
     keyof ({
       runtimeInjection:
         | (null | undefined | string)
-        | Readonly<{ from: string; as: string }>;
+        | Readonly<{ from: string; as: null | undefined | string }>;
     })
   > & {
     runtimeInjection:
       | (null | undefined | string)
-      | Readonly<{ from: string; as: string }>;
+      | Readonly<{ from: string; as: null | undefined | string }>;
   }
 >;
 declare class StateManager {
@@ -72,6 +76,7 @@ declare class StateManager {
   readonly importPaths: Set<string>;
   readonly stylexImport: Set<string>;
   readonly stylexPropsImport: Set<string>;
+  readonly stylexAttrsImport: Set<string>;
   readonly stylexCreateImport: Set<string>;
   readonly stylexIncludeImport: Set<string>;
   readonly stylexFirstThatWorksImport: Set<string>;
@@ -84,8 +89,11 @@ declare class StateManager {
   readonly styleVars: Map<string, NodePath>;
   readonly styleVarsToKeep: Set<[string, true | string, true | Array<string>]>;
   inStyleXCreate: boolean;
+  readonly options: StyleXStateOptions;
   constructor(state: PluginPass);
-  get options(): StyleXStateOptions;
+  setOptions(options: {
+    readonly [$$Key$$: string]: unknown;
+  }): StyleXStateOptions;
   get importPathString(): string;
   get importSources(): ReadonlyArray<string>;
   importAs(source: string): null | string;
@@ -94,7 +102,7 @@ declare class StateManager {
   get runtimeInjection():
     | null
     | undefined
-    | Readonly<{ from: string; as?: string }>;
+    | Readonly<{ from: string; as?: null | undefined | string }>;
   get isDev(): boolean;
   get isTest(): boolean;
   get filename(): string | void;

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

@@ -19,20 +19,20 @@ export type ImportPathResolution =
   | ['themeNameRef' | 'filePath', string];
 
 type ModuleResolution =
-  | {
+  | $ReadOnly<{
       type: 'commonJS',
       rootDir: string,
-      themeFileExtension?: string,
-    }
-  | {
+      themeFileExtension?: ?string,
+    }>
+  | $ReadOnly<{
       type: 'haste',
-      themeFileExtension?: string,
-    }
-  | {
+      themeFileExtension?: ?string,
+    }>
+  | $ReadOnly<{
       type: 'experimental_crossFileParsing',
       rootDir: string,
-      themeFileExtension?: string,
-    };
+      themeFileExtension?: ?string,
+    }>;
 
 export type StyleXOptions = $ReadOnly<{
   ...RuntimeOptions,
@@ -42,13 +42,13 @@ export type StyleXOptions = $ReadOnly<{
   runtimeInjection: boolean | ?string | $ReadOnly<{ from: string, as: string }>,
   treeshakeCompensation?: boolean,
   genConditionalClasses: boolean,
-  unstable_moduleResolution: void | ModuleResolution,
+  unstable_moduleResolution: ?ModuleResolution,
   ...
 }>;
 
 type StyleXStateOptions = $ReadOnly<{
   ...StyleXOptions,
-  runtimeInjection: ?string | $ReadOnly<{ from: string, as: string }>,
+  runtimeInjection: ?string | $ReadOnly<{ from: string, as: ?string }>,
   ...
 }>;
 
@@ -57,6 +57,7 @@ declare export default class StateManager {
   +importPaths: Set<string>;
   +stylexImport: Set<string>;
   +stylexPropsImport: Set<string>;
+  +stylexAttrsImport: Set<string>;
   +stylexCreateImport: Set<string>;
   +stylexIncludeImport: Set<string>;
   +stylexFirstThatWorksImport: Set<string>;
@@ -69,14 +70,15 @@ declare export default class StateManager {
   +styleVars: Map<string, NodePath<>>;
   +styleVarsToKeep: Set<[string, true | string, true | Array<string>]>;
   inStyleXCreate: boolean;
+  +options: StyleXStateOptions;
   constructor(state: PluginPass): void;
-  get options(): StyleXStateOptions;
+  setOptions(options: { +[string]: mixed }): StyleXStateOptions;
   get importPathString(): string;
   get importSources(): $ReadOnlyArray<string>;
   importAs(source: string): null | string;
   get canReferenceTheme(): boolean;
   get metadata(): { [key: string]: any };
-  get runtimeInjection(): ?$ReadOnly<{ from: string, as?: string }>;
+  get runtimeInjection(): ?$ReadOnly<{ from: string, as?: ?string }>;
   get isDev(): boolean;
   get isTest(): boolean;
   get filename(): string | void;

package/lib/utils/validate.d.ts

@@ -0,0 +1,67 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+export type Check<T> = (val: unknown, name?: string) => Error | T;
+export type InferCheckType<T> = T extends Check<infer U>
+  ? U
+  : /**
+     * > 11 | export type InferCheckType<T> = T extends Check<infer U> ? U : empty;
+     *      |                                                                ^^^^^ Unsupported feature: Translating "empty type" is currently not supported.
+     **/
+    any;
+type Msg = (value: unknown, name?: string) => string;
+type PrimitiveChecker<T> = (message?: Msg) => Check<T>;
+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 literal: <T extends string | number | boolean>(
+  $$PARAM_0$$: T,
+  msg?: Msg,
+) => Check<T>;
+export declare const array: <T>(
+  $$PARAM_0$$: Check<T>,
+  msg?: Msg,
+) => Check<ReadonlyArray<T>>;
+type ObjOfChecks<T extends { readonly [$$Key$$: string]: Check<unknown> }> =
+  Readonly<{ [K in keyof T]: InferCheckType<T[K]> }>;
+export declare const object: <
+  T extends { readonly [$$Key$$: string]: Check<unknown> },
+>(
+  $$PARAM_0$$: T,
+  msg?: Msg,
+) => Check<ObjOfChecks<T>>;
+export declare const objectOf: <T>(
+  $$PARAM_0$$: Check<T>,
+  $$PARAM_1$$: Msg,
+) => Check<{ readonly [$$Key$$: string]: T }>;
+export declare const unionOf: <A, B>(
+  a: Check<A>,
+  b: Check<B>,
+  message: Msg,
+) => Check<A | B>;
+export declare const unionOf3: <A, B, C>(
+  a: Check<A>,
+  b: Check<B>,
+  c: Check<C>,
+  message: Msg,
+) => Check<A | B | C>;
+export declare const unionOf4: <A, B, C, D>(
+  a: Check<A>,
+  b: Check<B>,
+  c: Check<C>,
+  d: Check<D>,
+  message: Msg,
+) => Check<A | B | C | D>;
+export declare const logAndDefault: <T>(
+  check: Check<T>,
+  value: unknown,
+  def: T,
+  name?: string,
+) => T;

package/lib/utils/validate.js.flow

@@ -0,0 +1,71 @@
+/**
+ * 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
+ */
+
+export type Check<+T> = (val: mixed, name?: string) => Error | T;
+export type InferCheckType<T> = T extends Check<infer U> ? U : empty;
+
+type Msg = (value: mixed, name?: string) => string;
+type PrimitiveChecker<+T> = (message?: Msg) => Check<T>;
+
+declare export const string: PrimitiveChecker<string>;
+
+declare export const nullish: PrimitiveChecker<null | void>;
+
+declare export const boolean: PrimitiveChecker<boolean>;
+
+declare export const number: PrimitiveChecker<number>;
+
+declare export const literal: <T: string | number | boolean>(
+  T,
+  msg?: Msg,
+) => Check<T>;
+
+declare export const array: <T>(
+  Check<T>,
+  msg?: Msg,
+) => Check<$ReadOnlyArray<T>>;
+
+type ObjOfChecks<T: { +[string]: Check<mixed> }> = $ReadOnly<{
+  [K in keyof T]: InferCheckType<T[K]>,
+}>;
+
+declare export const object: <T: { +[string]: Check<mixed> }>(
+  T,
+  msg?: Msg,
+) => Check<ObjOfChecks<T>>;
+
+declare export const objectOf: <T>(Check<T>, Msg) => Check<{ +[string]: T }>;
+
+declare export const unionOf: <A, B>(
+  a: Check<A>,
+  b: Check<B>,
+  message: Msg,
+) => Check<A | B>;
+
+declare export const unionOf3: <A, B, C>(
+  a: Check<A>,
+  b: Check<B>,
+  c: Check<C>,
+  message: Msg,
+) => Check<A | B | C>;
+
+declare export const unionOf4: <A, B, C, D>(
+  a: Check<A>,
+  b: Check<B>,
+  c: Check<C>,
+  d: Check<D>,
+  message: Msg,
+) => Check<A | B | C | D>;
+
+declare export const logAndDefault: <T>(
+  check: Check<T>,
+  value: mixed,
+  def: T,
+  name?: string,
+) => T;

package/lib/visitors/stylex-attrs.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 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 type { NodePath } from '@babel/traverse';
+import * as t from '@babel/types';
+import StateManager from '../utils/state-manager';
+export declare function skipStylexAttrsChildren(
+  path: NodePath<t.CallExpression>,
+  state: StateManager,
+): void;
+declare function transformStylexAttrs(
+  path: NodePath<t.CallExpression>,
+  state: StateManager,
+): void;
+export default transformStylexAttrs;

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

@@ -0,0 +1,25 @@
+/**
+ * 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';
+declare export function skipStylexAttrsChildren(
+  path: NodePath<t.CallExpression>,
+  state: StateManager,
+): void;
+
+// If a `stylex()` call uses styles that are all locally defined,
+// This function is able to pre-compute that into a single string or
+// a single expression of strings and ternary expressions.
+declare export default function transformStylexAttrs(
+  path: NodePath<t.CallExpression>,
+  state: StateManager,
+): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/babel-plugin",
-  "version": "0.4.0",
+  "version": "0.5.0-alpha.1",
   "description": "StyleX babel plugin.",
   "main": "lib/index.js",
   "repository": "https://github.com/facebook/stylex",
@@ -13,8 +13,8 @@
   },
   "dependencies": {
     "@babel/helper-module-imports": "^7.22.15",
-    "@stylexjs/shared": "0.4.0",
-    "@stylexjs/stylex": "0.4.0",
+    "@stylexjs/shared": "0.5.0-alpha.1",
+    "@stylexjs/stylex": "0.5.0-alpha.1",
     "@babel/core": "^7.23.6",
     "@babel/traverse": "^7.23.6",
     "@babel/types": "^7.23.6"