@stylexjs/stylex 0.4.1 → 0.5.0-alpha.1

package/lib/es/StyleXCSSTypes.js

@@ -0,0 +1 @@
+'use strict';

package/lib/es/StyleXSheet.js

@@ -0,0 +1,234 @@
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Use invariant() to assert state which your program assumes to be true.
+ *
+ * Provide sprintf-style format (only %s is supported) and arguments
+ * to provide information about what broke and what you were
+ * expecting.
+ *
+ * The invariant message will be stripped in production, but the invariant
+ * will remain to ensure logic does not differ in production.
+ */
+
+var NODE_ENV = process.env.NODE_ENV;
+
+var invariant = function(condition, format, a, b, c, d, e, f) {
+  if (NODE_ENV !== 'production') {
+    if (format === undefined) {
+      throw new Error('invariant requires an error message argument');
+    }
+  }
+
+  if (!condition) {
+    var error;
+    if (format === undefined) {
+      error = new Error(
+        'Minified exception occurred; use the non-minified dev environment ' +
+        'for the full error message and additional helpful warnings.'
+      );
+    } else {
+      var args = [a, b, c, d, e, f];
+      var argIndex = 0;
+      error = new Error(
+        format.replace(/%s/g, function() { return args[argIndex++]; })
+      );
+      error.name = 'Invariant Violation';
+    }
+
+    error.framesToPop = 1; // we don't care about invariant's own frame
+    throw error;
+  }
+};
+
+var invariant_1 = invariant;
+
+var invariant$1 = /*@__PURE__*/getDefaultExportFromCjs(invariant_1);
+
+const LIGHT_MODE_CLASS_NAME = '__fb-light-mode';
+const DARK_MODE_CLASS_NAME = '__fb-dark-mode';
+function buildTheme(selector, theme) {
+  const lines = [];
+  lines.push(`${selector} {`);
+  for (const key in theme) {
+    const value = theme[key];
+    lines.push(`  --${key}: ${value};`);
+  }
+  lines.push('}');
+  return lines.join('\n');
+}
+function makeStyleTag() {
+  const tag = document.createElement('style');
+  tag.setAttribute('type', 'text/css');
+  tag.setAttribute('data-stylex', 'true');
+  const head = document.head || document.getElementsByTagName('head')[0];
+  invariant$1(head, 'expected head');
+  head.appendChild(tag);
+  return tag;
+}
+function doesSupportCSSVariables() {
+  return globalThis.CSS != null && globalThis.CSS.supports != null && globalThis.CSS.supports('--fake-var:0');
+}
+const VARIABLE_MATCH = /var\(--(.*?)\)/g;
+class StyleXSheet {
+  static LIGHT_MODE_CLASS_NAME = LIGHT_MODE_CLASS_NAME;
+  static DARK_MODE_CLASS_NAME = DARK_MODE_CLASS_NAME;
+  constructor(opts) {
+    this.tag = null;
+    this.injected = false;
+    this.ruleForPriority = new Map();
+    this.rules = [];
+    this.rootTheme = opts.rootTheme;
+    this.rootDarkTheme = opts.rootDarkTheme;
+    this.supportsVariables = opts.supportsVariables ?? doesSupportCSSVariables();
+  }
+  getVariableMatch() {
+    return VARIABLE_MATCH;
+  }
+  isHeadless() {
+    return this.tag == null || globalThis?.document?.body == null;
+  }
+  getTag() {
+    const {
+      tag
+    } = this;
+    invariant$1(tag != null, 'expected tag');
+    return tag;
+  }
+  getCSS() {
+    return this.rules.join('\n');
+  }
+  getRulePosition(rule) {
+    return this.rules.indexOf(rule);
+  }
+  getRuleCount() {
+    return this.rules.length;
+  }
+  inject() {
+    if (this.injected) {
+      return;
+    }
+    this.injected = true;
+    if (globalThis.document?.body == null) {
+      this.injectTheme();
+      return;
+    }
+    this.tag = makeStyleTag();
+    this.injectTheme();
+  }
+  injectTheme() {
+    if (this.rootTheme != null) {
+      this.insert(buildTheme(`:root, .${LIGHT_MODE_CLASS_NAME}`, this.rootTheme), 0);
+    }
+    if (this.rootDarkTheme != null) {
+      this.insert(buildTheme(`.${DARK_MODE_CLASS_NAME}:root, .${DARK_MODE_CLASS_NAME}`, this.rootDarkTheme), 0);
+    }
+  }
+  __injectCustomThemeForTesting(selector, theme) {
+    if (theme != null) {
+      this.insert(buildTheme(selector, theme), 0);
+    }
+  }
+  delete(rule) {
+    const index = this.rules.indexOf(rule);
+    invariant$1(index >= 0, "Couldn't find the index for rule %s", rule);
+    this.rules.splice(index, 1);
+    if (this.isHeadless()) {
+      return;
+    }
+    const tag = this.getTag();
+    const sheet = tag.sheet;
+    invariant$1(sheet, 'expected sheet');
+    sheet.deleteRule(index);
+  }
+  normalizeRule(rule) {
+    const {
+      rootTheme
+    } = this;
+    if (this.supportsVariables || rootTheme == null) {
+      return rule;
+    }
+    return rule.replace(VARIABLE_MATCH, (_match, name) => {
+      return rootTheme[name];
+    });
+  }
+  getInsertPositionForPriority(priority) {
+    const priorityRule = this.ruleForPriority.get(priority);
+    if (priorityRule != null) {
+      return this.rules.indexOf(priorityRule) + 1;
+    }
+    const priorities = Array.from(this.ruleForPriority.keys()).sort((a, b) => b - a).filter(num => num > priority ? 1 : 0);
+    if (priorities.length === 0) {
+      return this.getRuleCount();
+    }
+    const lastPriority = priorities.pop();
+    return this.rules.indexOf(this.ruleForPriority.get(lastPriority));
+  }
+  insert(rawLTRRule, priority, rawRTLRule) {
+    if (this.injected === false) {
+      this.inject();
+    }
+    if (rawRTLRule != null) {
+      this.insert(addAncestorSelector(rawLTRRule, "html:not([dir='rtl'])"), priority);
+      this.insert(addAncestorSelector(rawRTLRule, "html[dir='rtl']"), priority);
+      return;
+    }
+    const rawRule = rawLTRRule;
+    if (this.rules.includes(rawRule)) {
+      return;
+    }
+    const rule = this.normalizeRule(addSpecificityLevel(rawRule, Math.floor(priority / 1000)));
+    const insertPos = this.getInsertPositionForPriority(priority);
+    this.rules.splice(insertPos, 0, rule);
+    this.ruleForPriority.set(priority, rule);
+    if (this.isHeadless()) {
+      return;
+    }
+    const tag = this.getTag();
+    const sheet = tag.sheet;
+    if (sheet != null) {
+      try {
+        sheet.insertRule(rule, Math.min(insertPos, sheet.cssRules.length));
+      } catch (err) {
+        console.error('insertRule error', err, rule, insertPos);
+      }
+    }
+  }
+}
+function addAncestorSelector(selector, ancestorSelector) {
+  if (!selector.startsWith('@')) {
+    return `${ancestorSelector} ${selector}`;
+  }
+  const firstBracketIndex = selector.indexOf('{');
+  const mediaQueryPart = selector.slice(0, firstBracketIndex + 1);
+  const rest = selector.slice(firstBracketIndex + 1);
+  return `${mediaQueryPart}${ancestorSelector} ${rest}`;
+}
+function addSpecificityLevel(selector, index) {
+  if (selector.startsWith('@keyframes')) {
+    return selector;
+  }
+  const pseudo = Array.from({
+    length: index
+  }).map(() => ':not(#\\#)').join('');
+  const lastOpenCurly = selector.includes('::') ? selector.indexOf('::') : selector.lastIndexOf('{');
+  const beforeCurly = selector.slice(0, lastOpenCurly);
+  const afterCurly = selector.slice(lastOpenCurly);
+  return `${beforeCurly}${pseudo}${afterCurly}`;
+}
+const styleSheet = new StyleXSheet({
+  supportsVariables: true,
+  rootTheme: {},
+  rootDarkTheme: {}
+});
+
+export { StyleXSheet, styleSheet };

package/lib/es/StyleXTypes.d.ts

@@ -0,0 +1,218 @@
+/**
+ * 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 { CSSProperties } from './StyleXCSSTypes';
+
+// Using an opaque type to declare ClassNames generated by stylex.
+declare const StyleXClassNameTag: unique symbol;
+export type StyleXClassNameFor<K, V> = string & {
+  _opaque: typeof StyleXClassNameTag;
+  _key: K;
+  _value: V;
+};
+
+export type StyleXClassNameForValue<V> = StyleXClassNameFor<any, V>;
+export type StyleXClassNameForKey<K> = StyleXClassNameFor<K, any>;
+export type StyleXClassName = StyleXClassNameFor<any, any>;
+// Type for arbitrarily nested Array.
+export type StyleXArray<T> = T | ReadonlyArray<StyleXArray<T>>;
+
+declare const StyleXVarTag: unique symbol;
+declare class _StyleXVar<out Val> {
+  private _opaque: typeof StyleXVarTag;
+  private _value: Val;
+}
+export type StyleXVar<Val> = _StyleXVar<Val> & string;
+
+type PseudoClassStr = `:${string}`;
+type AtRuleStr = `@${string}`;
+
+type CondStr = PseudoClassStr | AtRuleStr;
+
+type CSSPropertiesWithExtras = Partial<
+  Readonly<
+    CSSProperties & {
+      '::after': CSSProperties;
+      '::backdrop': CSSProperties;
+      '::before': CSSProperties;
+      '::cue': CSSProperties;
+      '::cue-region': CSSProperties;
+      '::first-letter': CSSProperties;
+      '::first-line': CSSProperties;
+      '::file-selector-button': CSSProperties;
+      '::grammar-error': CSSProperties;
+      '::marker': CSSProperties;
+      // This is a pattern and not a static key so it cannot be typed correctly.
+      // [key: `::part(${string})` | `::slotted(${string})`]: CSSProperties;
+      '::placeholder': CSSProperties;
+      '::selection': CSSProperties;
+      // This is a pattern and not a static key so it cannot be typed correctly.
+      // '::slotted()': CSSProperties;
+      '::spelling-error': CSSProperties;
+      '::target-text': CSSProperties;
+      '::-webkit-scrollbar'?: CSSProperties;
+      // webkit styles used for Search in Safari
+      '::-webkit-search-decoration'?: CSSProperties;
+      '::-webkit-search-cancel-button'?: CSSProperties;
+      '::-webkit-search-results-button'?: CSSProperties;
+      '::-webkit-search-results-decoration'?: CSSProperties;
+    }
+  >
+>;
+
+export type NestedCSSPropTypes = Partial<
+  Readonly<{
+    [Key in keyof CSSPropertiesWithExtras]: StyleXClassNameFor<
+      Key,
+      CSSPropertiesWithExtras[Key]
+    >;
+  }>
+>;
+
+type UserAuthoredStyles = CSSPropertiesWithExtras | { [key: string]: unknown };
+export type StyleXSingleStyle = false | (null | undefined | NestedCSSPropTypes);
+// NOTE: `XStyle` has been deprecated in favor of `StaticStyles` and `StyleXStyles`.
+
+export type Keyframes = Readonly<{ [name: string]: CSSProperties }>;
+export type LegacyThemeStyles = Readonly<{ [constantName: string]: string }>;
+
+type ComplexStyleValueType<T> = T extends StyleXVar<infer U>
+  ? U
+  : T extends string | number | null
+    ? T
+    : T extends ReadonlyArray<infer U>
+      ? U
+      : T extends Readonly<{ default: infer A; [cond: CondStr]: infer B }>
+        ? ComplexStyleValueType<A> | ComplexStyleValueType<B>
+        : T;
+
+export type MapNamespace<CSS> = Readonly<{
+  [Key in keyof CSS]: StyleXClassNameFor<Key, ComplexStyleValueType<CSS[Key]>>;
+}>;
+
+export type MapNamespaces<
+  S extends {
+    [key: string]: UserAuthoredStyles | ((...args: any) => UserAuthoredStyles);
+  },
+> = Readonly<{
+  [Key in keyof S]: S[Key] extends (...args: infer Args) => infer Obj
+    ? (...args: Args) => Readonly<[MapNamespace<Obj>, InlineStyles]>
+    : MapNamespace<S[Key]>;
+}>;
+
+export type Stylex$Create = <
+  const S extends {
+    [key: string]: UserAuthoredStyles | ((...args: any) => UserAuthoredStyles);
+  },
+>(
+  styles: S,
+) => MapNamespaces<S>;
+
+export type CompiledStyles =
+  | Readonly<{
+      [key: string]: StyleXClassName | null | void | never;
+    }>
+  | Readonly<{
+      theme: StyleXClassName;
+    }>;
+
+declare const StyleXInlineStylesTag: unique symbol;
+
+export type InlineStyles = typeof StyleXInlineStylesTag;
+
+type _GenStylePropType<CSS extends UserAuthoredStyles> = Readonly<{
+  [Key in keyof CSS]: StyleXClassNameFor<Key, Readonly<CSS[Key]>>;
+}>;
+type GenStylePropType<CSS extends UserAuthoredStyles> = Readonly<
+  _GenStylePropType<CSS> &
+    Partial<{
+      [Key in Exclude<keyof CSSPropertiesWithExtras, keyof CSS>]: never;
+    }>
+>;
+
+// Replace `XStyle` with this.
+export type StaticStyles<
+  CSS extends UserAuthoredStyles = CSSPropertiesWithExtras,
+> = StyleXArray<false | null | GenStylePropType<CSS>>;
+
+export type StaticStylesWithout<CSS extends UserAuthoredStyles> = StaticStyles<
+  Omit<CSSPropertiesWithExtras, keyof CSS>
+>;
+
+export type StyleXStyles<
+  CSS extends UserAuthoredStyles = CSSPropertiesWithExtras,
+> = StyleXArray<
+  | null
+  | false
+  | GenStylePropType<CSS>
+  | Readonly<[GenStylePropType<CSS>, InlineStyles]>
+>;
+export type StyleXStylesWithout<CSS extends UserAuthoredStyles> = StyleXStyles<
+  Omit<CSSPropertiesWithExtras, keyof CSS>
+>;
+
+declare const StyleXVarGroupTag: unique symbol;
+export type VarGroup<
+  Tokens extends { [key: string]: any },
+  ID extends symbol = symbol,
+> = Readonly<{
+  [Key in keyof Tokens]: StyleXVar<Tokens[Key]>;
+}> &
+  Readonly<{
+    __opaqueId: ID;
+    __tokens: Tokens;
+  }> &
+  typeof StyleXVarGroupTag;
+
+export type TokensFromVarGroup<T extends VarGroup<unknown, unknown>> =
+  T['__tokens'];
+
+export type IDFromVarGroup<T extends VarGroup<unknown, unknown>> =
+  T['__opaqueId'];
+
+type TTokens = Readonly<{
+  [key: string]: string | { [key: string]: string };
+}>;
+
+type UnwrapVars<T> = T extends StyleXVar<infer U> ? U : T;
+export type FlattenTokens<T extends TTokens> = Readonly<{
+  [Key in keyof T]: T[Key] extends { [key: string]: infer X }
+    ? UnwrapVars<X>
+    : UnwrapVars<T[Key]>;
+}>;
+
+export type StyleX$DefineVars = <
+  DefaultTokens extends TTokens,
+  ID extends symbol = symbol,
+>(
+  tokens: DefaultTokens,
+) => VarGroup<FlattenTokens<DefaultTokens>, ID>;
+
+declare class ThemeKey<out VG extends VarGroup> extends String {
+  private varGroup: VG;
+}
+export type Theme<
+  T extends VarGroup<unknown, symbol>,
+  Tag extends symbol = symbol,
+> = Tag &
+  Readonly<{
+    theme: StyleXClassNameFor<ThemeKey<T>, IDFromVarGroup<T>>;
+  }>;
+
+type OverridesForTokenType<Config extends { [key: string]: unknown }> = {
+  [Key in keyof Config]?:
+    | Config[Key]
+    | { default: Config[Key]; [atRule: AtRuleStr]: Config[Key] };
+};
+
+export type StyleX$CreateTheme = <
+  TVars extends VarGroup<unknown, unknown>,
+  ThemeID extends symbol = symbol,
+>(
+  baseTokens: TVars,
+  overrides: OverridesForTokenType<TokensFromVarGroup<TVars>>,
+) => Theme<TVars, ThemeID>;

package/lib/es/StyleXTypes.js

@@ -0,0 +1 @@
+'use strict';

package/lib/es/stylex-inject.js

@@ -0,0 +1,5 @@
+import { styleSheet } from './StyleXSheet';
+export default function inject(ltrRule, priority) {
+  let rtlRule = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+  styleSheet.insert(ltrRule, priority, rtlRule);
+}

package/lib/es/stylex.js

@@ -0,0 +1,316 @@
+var styleq$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(styleq$1, "__esModule", {
+  value: true
+});
+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++) {
+    styles[_key] = arguments[_key];
+  }
+  if (__implementations.props) {
+    return __implementations.props.call(options, styles);
+  }
+  const [className, style] = styleq_2(styles);
+  const result = {};
+  if (className != null && className !== '') {
+    result.className = className;
+  }
+  if (style != null && Object.keys(style).length > 0) {
+    result.style = style;
+  }
+  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 errorForFn('create');
+}
+function stylexDefineVars(styles) {
+  if (__implementations.defineVars) {
+    return __implementations.defineVars(styles);
+  }
+  throw errorForFn('defineVars');
+}
+const stylexCreateTheme = (baseTokens, overrides) => {
+  if (__implementations.createTheme) {
+    return __implementations.createTheme(baseTokens, overrides);
+  }
+  throw errorForFn('createTheme');
+};
+const stylexInclude = styles => {
+  if (__implementations.include) {
+    return __implementations.include(styles);
+  }
+  throw errorForFn('include');
+};
+const create = stylexCreate;
+const defineVars = stylexDefineVars;
+const createTheme = stylexCreateTheme;
+const include = stylexInclude;
+const types = {
+  angle: _v => {
+    throw errorForType('angle');
+  },
+  color: _v => {
+    throw errorForType('color');
+  },
+  url: _v => {
+    throw errorForType('url');
+  },
+  image: _v => {
+    throw errorForType('image');
+  },
+  integer: _v => {
+    throw errorForType('integer');
+  },
+  lengthPercentage: _v => {
+    throw errorForType('lengthPercentage');
+  },
+  length: _v => {
+    throw errorForType('length');
+  },
+  percentage: _v => {
+    throw errorForType('percentage');
+  },
+  number: _v => {
+    throw errorForType('number');
+  },
+  resolution: _v => {
+    throw errorForType('resolution');
+  },
+  time: _v => {
+    throw errorForType('time');
+  },
+  transformFunction: _v => {
+    throw errorForType('transformFunction');
+  },
+  transformList: _v => {
+    throw errorForType('transformList');
+  }
+};
+const keyframes = keyframes => {
+  if (__implementations.keyframes) {
+    return __implementations.keyframes(keyframes);
+  }
+  throw errorForFn('keyframes');
+};
+const firstThatWorks = function () {
+  if (__implementations.firstThatWorks) {
+    return __implementations.firstThatWorks(...arguments);
+  }
+  throw errorForFn('firstThatWorks');
+};
+function _stylex() {
+  for (var _len2 = arguments.length, styles = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    styles[_key2] = arguments[_key2];
+  }
+  const [className] = styleq_2(styles);
+  return className;
+}
+_stylex.props = props;
+_stylex.attrs = attrs;
+_stylex.create = create;
+_stylex.defineVars = defineVars;
+_stylex.createTheme = createTheme;
+_stylex.include = include;
+_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;
+  }
+}
+const legacyMerge = _stylex;
+
+export { __monkey_patch__, attrs, create, createTheme, _stylex as default, defineVars, firstThatWorks, include, keyframes, legacyMerge, props, types };

package/lib/stylex.d.ts

@@ -38,6 +38,15 @@ export declare function props(
   className?: string;
   style?: Readonly<{ [$$Key$$: string]: string | number }>;
 }>;
+export declare function attrs(
+  ...styles: ReadonlyArray<
+    StyleXArray<
+      | (null | undefined | CompiledStyles)
+      | boolean
+      | Readonly<[CompiledStyles, InlineStyles]>
+    >
+  >
+): Readonly<{ class?: string; style?: string }>;
 type Stylex$Include = <
   TStyles extends {
     readonly [$$Key$$: string]: StyleXClassNameFor<string, unknown>;
@@ -131,6 +140,15 @@ type IStyleX = {
     className?: string;
     style?: Readonly<{ [$$Key$$: string]: string | number }>;
   }>;
+  attrs: (
+    ...styles: ReadonlyArray<
+      StyleXArray<
+        | (null | undefined | CompiledStyles)
+        | boolean
+        | Readonly<[CompiledStyles, InlineStyles]>
+      >
+    >
+  ) => Readonly<{ class?: string; style?: string }>;
   create: Stylex$Create;
   defineVars: StyleX$DefineVars;
   createTheme: StyleX$CreateTheme;
@@ -142,6 +160,6 @@ type IStyleX = {
   keyframes: (keyframes: Keyframes) => string;
   __customProperties?: { [$$Key$$: string]: unknown };
 };
-export declare const stylex: IStyleX;
+export declare const legacyMerge: IStyleX;
 declare const $$EXPORT_DEFAULT_DECLARATION$$: IStyleX;
 export default $$EXPORT_DEFAULT_DECLARATION$$;

package/lib/stylex.js

@@ -4,10 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.__monkey_patch__ = __monkey_patch__;
-exports.keyframes = exports.include = exports.firstThatWorks = exports.defineVars = exports.default = exports.createTheme = exports.create = void 0;
+exports.attrs = attrs;
+exports.legacyMerge = exports.keyframes = exports.include = exports.firstThatWorks = exports.defineVars = exports.default = exports.createTheme = exports.create = void 0;
 exports.props = props;
-exports.types = exports.stylex = void 0;
+exports.types = void 0;
 var _styleq = require("styleq");
+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++) {
@@ -26,30 +29,44 @@ 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 = exports.create = stylexCreate;
 const defineVars = exports.defineVars = stylexDefineVars;
@@ -57,58 +74,57 @@ const createTheme = exports.createTheme = stylexCreateTheme;
 const include = exports.include = stylexInclude;
 const types = exports.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');
 };
 exports.keyframes = keyframes;
 const firstThatWorks = function () {
   if (__implementations.firstThatWorks) {
     return __implementations.firstThatWorks(...arguments);
   }
-  throw new Error('stylex.firstThatWorks should never be called.');
+  throw errorForFn('firstThatWorks');
 };
 exports.firstThatWorks = firstThatWorks;
 function _stylex() {
@@ -119,6 +135,7 @@ function _stylex() {
   return className;
 }
 _stylex.props = props;
+_stylex.attrs = attrs;
 _stylex.create = create;
 _stylex.defineVars = defineVars;
 _stylex.createTheme = createTheme;
@@ -134,5 +151,5 @@ function __monkey_patch__(key, implementation) {
     __implementations[key] = implementation;
   }
 }
-const stylex = exports.stylex = _stylex;
+const legacyMerge = exports.legacyMerge = _stylex;
 var _default = exports.default = _stylex;

package/lib/stylex.js.flow

@@ -38,6 +38,16 @@ declare export function props(
   className?: string,
   style?: $ReadOnly<{ [string]: string | number }>,
 }>;
+declare export function attrs(
+  ...styles: $ReadOnlyArray<
+    StyleXArray<
+      ?CompiledStyles | boolean | $ReadOnly<[CompiledStyles, InlineStyles]>,
+    >,
+  >
+): $ReadOnly<{
+  class?: string,
+  style?: string,
+}>;
 
 type Stylex$Include = <
   TStyles: { +[string]: StyleXClassNameFor<string, mixed> },
@@ -110,6 +120,7 @@ declare export const types: {
   ) => ICSSType<T>,
   transformList: <T: number | string>(_v: ValueWithDefault<T>) => ICSSType<T>,
 };
+
 declare export const keyframes: (keyframes: Keyframes) => string;
 
 declare export const firstThatWorks: <T: string | number>(
@@ -129,6 +140,16 @@ type IStyleX = {
     className?: string,
     style?: $ReadOnly<{ [string]: string | number }>,
   }>,
+  attrs: (
+    ...styles: $ReadOnlyArray<
+      StyleXArray<
+        ?CompiledStyles | boolean | $ReadOnly<[CompiledStyles, InlineStyles]>,
+      >,
+    >
+  ) => $ReadOnly<{
+    class?: string,
+    style?: string,
+  }>,
   create: Stylex$Create,
   defineVars: StyleX$DefineVars,
   createTheme: StyleX$CreateTheme,
@@ -143,5 +164,5 @@ type IStyleX = {
 };
 
 
-declare export const stylex: IStyleX;
+declare export const legacyMerge: IStyleX;
 declare export default IStyleX;

package/package.json

@@ -1,14 +1,41 @@
 {
   "name": "@stylexjs/stylex",
-  "version": "0.4.1",
+  "version": "0.5.0-alpha.1",
   "description": "A library for defining styles for optimized user interfaces.",
-  "main": "lib/stylex.js",
-  "types": "lib/stylex.d.ts",
+  "main": "./lib/stylex.js",
+  "module": "./lib/es/stylex.js",
+  "types": "./lib/stylex.d.ts",
+  "exports": {
+    ".": {
+      "import": "./lib/es/stylex.js",
+      "require": "./lib/stylex.js",
+      "types": "./lib/stylex.d.ts"
+    },
+    "./lib/StyleXTypes": {
+      "import": "./lib/StyleXTypes.js",
+      "require": "./lib/StyleXTypes.js",
+      "types": "./lib/StyleXTypes.d.ts"
+    },
+    "./lib/StyleXSheet": {
+      "import": "./lib/es/StyleXSheet.js",
+      "require": "./lib/StyleXSheet.js",
+      "types": "./lib/StyleXSheet.d.ts"
+    },
+    "./lib/stylex-inject": {
+      "import": "./lib/es/stylex-inject.js",
+      "require": "./lib/stylex-inject.js",
+      "types": "./lib/stylex-inject.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
   "repository": "https://www.github.com/facebook/stylex",
   "license": "MIT",
   "scripts": {
     "prebuild": "gen-types -i src/ -o lib/",
-    "build": "babel src/ --out-dir lib/ --copy-files",
+    "build:cjs": "BABEL_ENV=cjs babel src/ --out-dir lib/ --copy-files",
+    "build:esm": "BABEL_ENV=esm babel src/ --out-dir lib/es --copy-files",
+    "postbuild:esm": "rollup -c ./rollup.config.mjs",
+    "build": "npm run build:cjs && npm run build:esm",
     "build-haste": "rewrite-imports -i src/ -o lib/",
     "test": "jest"
   },
@@ -19,7 +46,7 @@
     "utility-types": "^3.10.0"
   },
   "devDependencies": {
-    "@stylexjs/scripts": "0.4.1"
+    "@stylexjs/scripts": "0.5.0-alpha.1"
   },
   "jest": {},
   "files": [