@stylexjs/stylex 0.8.0 → 0.9.0-beta.1

package/lib/StyleXCSSTypes.d.ts

@@ -111,7 +111,7 @@ type backdropFilter = 'none' | string;
 type backfaceVisibility = 'visible' | 'hidden';
 type backgroundAttachment = attachment;
 type backgroundBlendMode = blendMode;
-type backgroundClip = box;
+type backgroundClip = box | 'text';
 type backgroundColor = color;
 type backgroundImage = bgImage;
 type backgroundOrigin = box;
@@ -246,6 +246,7 @@ type display =
   | 'inherit'
   | 'inline'
   | 'block'
+  | 'flow-root'
   | 'list-item'
   | 'inline-list-item'
   | 'inline-block'
@@ -536,7 +537,7 @@ type outlineStyle = 'auto' | brStyle;
 type outlineWidth = borderWidth;
 type overflow = 'visible' | 'hidden' | 'clip' | 'scroll' | 'auto';
 type overflowAnchor = 'auto' | 'none';
-type overflowWrap = 'normal' | 'break-word';
+type overflowWrap = 'normal' | 'break-word' | 'anywhere';
 type overflowX = overflow;
 type overflowY = overflow;
 type overscrollBehavior = 'none' | 'contain' | 'auto';
@@ -575,7 +576,23 @@ type rubyMerge = 'separate' | 'collapse' | 'auto';
 type rubyPosition = 'over' | 'under' | 'inter-character';
 type scrollBehavior = 'auto' | 'smooth';
 type scrollSnapAlign = 'none' | 'start' | 'end' | 'center';
-type scrollSnapType = 'none' | 'x mandatory' | 'y mandatory';
+type scrollSnapType =
+  | 'none'
+  | 'block mandatory'
+  | 'block proximity'
+  | 'block'
+  | 'both mandatory'
+  | 'both proximity'
+  | 'both'
+  | 'inline mandatory'
+  | 'inline proximity'
+  | 'inline'
+  | 'x'
+  | 'x mandatory'
+  | 'x proximity'
+  | 'y'
+  | 'y mandatory'
+  | 'y proximity';
 type shapeImageThreshold = number | string;
 type shapeMargin = lengthPercentage;
 type shapeOutside = 'none' | shapeBox | string;
@@ -1078,8 +1095,8 @@ export type CSSProperties = Readonly<{
   containIntrinsicSize?: all | number | string;
   containIntrinsicBlockSize?: all | number | string;
   containIntrinsicInlineSize?: all | number | string;
-  containIntrinsicHeightSize?: all | number | string;
-  containIntrinsicWidthSize?: all | number | string;
+  containIntrinsicHeight?: all | number | string;
+  containIntrinsicWidth?: all | number | string;
   container?: all | string;
   containerName?: all | string;
   containerType?: all | 'size' | 'inline-size' | 'normal';

package/lib/StyleXCSSTypes.js.flow

@@ -113,7 +113,7 @@ type backfaceVisibility = 'visible' | 'hidden';
 // type background = string | finalBgLayer;
 type backgroundAttachment = attachment;
 type backgroundBlendMode = blendMode;
-type backgroundClip = box;
+type backgroundClip = box | 'text';
 type backgroundColor = color;
 type backgroundImage = bgImage;
 type backgroundOrigin = box;
@@ -248,6 +248,7 @@ type display =
   | 'inherit'
   | 'inline'
   | 'block'
+  | 'flow-root'
   | 'list-item'
   | 'inline-list-item'
   | 'inline-block'
@@ -542,7 +543,7 @@ type outlineStyle = 'auto' | brStyle;
 type outlineWidth = borderWidth;
 type overflow = 'visible' | 'hidden' | 'clip' | 'scroll' | 'auto';
 type overflowAnchor = 'auto' | 'none';
-type overflowWrap = 'normal' | 'break-word';
+type overflowWrap = 'normal' | 'break-word' | 'anywhere';
 type overflowX = overflow;
 type overflowY = overflow;
 type overscrollBehavior = 'none' | 'contain' | 'auto';
@@ -581,7 +582,23 @@ type rubyMerge = 'separate' | 'collapse' | 'auto';
 type rubyPosition = 'over' | 'under' | 'inter-character';
 type scrollBehavior = 'auto' | 'smooth';
 type scrollSnapAlign = 'none' | 'start' | 'end' | 'center';
-type scrollSnapType = 'none' | 'x mandatory' | 'y mandatory';
+type scrollSnapType =
+  | 'none'
+  | 'block mandatory'
+  | 'block proximity'
+  | 'block'
+  | 'both mandatory'
+  | 'both proximity'
+  | 'both'
+  | 'inline mandatory'
+  | 'inline proximity'
+  | 'inline'
+  | 'x'
+  | 'x mandatory'
+  | 'x proximity'
+  | 'y'
+  | 'y mandatory'
+  | 'y proximity';
 type shapeImageThreshold = number | string;
 type shapeMargin = lengthPercentage;
 type shapeOutside = 'none' | shapeBox | string;
@@ -1117,8 +1134,8 @@ export type CSSProperties = $ReadOnly<{
   containIntrinsicSize?: all | number | string,
   containIntrinsicBlockSize?: all | number | string,
   containIntrinsicInlineSize?: all | number | string,
-  containIntrinsicHeightSize?: all | number | string,
-  containIntrinsicWidthSize?: all | number | string,
+  containIntrinsicHeight?: all | number | string,
+  containIntrinsicWidth?: all | number | string,
 
   container?: all | string,
   containerName?: all | string,

package/lib/StyleXOpaqueTypes.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 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 declare type StyleXVar<_Val extends unknown> = string;
+export declare type StyleXClassNameFor<_K, _V> = string;

package/lib/StyleXOpaqueTypes.js

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

package/lib/StyleXOpaqueTypes.js.flow

@@ -0,0 +1,16 @@
+/**
+ * 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
+ */
+
+// declare class Var<+T> {
+//   value: T;
+// }
+// This is the type for the variables object
+declare export opaque type StyleXVar<+_Val: mixed>: string;
+
+declare export opaque type StyleXClassNameFor<+_K, +_V>: string;

package/lib/StyleXTypes.d.ts

@@ -15,13 +15,6 @@ export type StyleXClassNameFor<K, V> = string & {
   _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;
@@ -29,6 +22,12 @@ declare class _StyleXVar<out Val> {
 }
 export type StyleXVar<Val> = _StyleXVar<Val> & string;
 
+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>>;
+
 type PseudoClassStr = `:${string}`;
 type AtRuleStr = `@${string}`;
 
@@ -67,6 +66,13 @@ type CSSPropertiesWithExtras = Partial<
       '::-webkit-search-cancel-button'?: CSSProperties;
       '::-webkit-search-results-button'?: CSSProperties;
       '::-webkit-search-results-decoration'?: CSSProperties;
+      // For input ranges in Chromium
+      '::-webkit-slider-thumb'?: CSSProperties;
+      '::-webkit-slider-runnable-track'?: CSSProperties;
+      // For input ranges in Firefox
+      '::-moz-range-thumb'?: CSSProperties;
+      '::-moz-range-track'?: CSSProperties;
+      '::-moz-range-progress'?: CSSProperties;
     }
   >
 >;
@@ -93,7 +99,7 @@ type ComplexStyleValueType<T> =
     : T extends string | number | null
       ? T
       : T extends ReadonlyArray<infer U>
-        ? U
+        ? ComplexStyleValueType<U>
         : T extends Readonly<{ default: infer A; [cond: CondStr]: infer B }>
           ? ComplexStyleValueType<A> | ComplexStyleValueType<B>
           : T;
@@ -177,8 +183,7 @@ export type VarGroup<
   }> &
   typeof StyleXVarGroupTag;
 
-export type TokensFromVarGroup<T extends VarGroup<unknown, unknown>> =
-  T['__tokens'];
+export type TokensFromVarGroup<T extends VarGroup<{}>> = T['__tokens'];
 
 export type IDFromVarGroup<T extends VarGroup<unknown, unknown>> =
   T['__opaqueId'];
@@ -194,6 +199,13 @@ export type FlattenTokens<T extends TTokens> = Readonly<{
     : UnwrapVars<T[Key]>;
 }>;
 
+type NestedVarObject<T> =
+  | T
+  | Readonly<{
+      default: NestedVarObject<T>;
+      [key: `@${string}`]: NestedVarObject<T>;
+    }>;
+
 export type StyleX$DefineVars = <
   DefaultTokens extends TTokens,
   ID extends symbol = symbol,
@@ -213,9 +225,7 @@ export type Theme<
   }>;
 
 type OverridesForTokenType<Config extends { [key: string]: unknown }> = {
-  [Key in keyof Config]?:
-    | Config[Key]
-    | { default: Config[Key]; [atRule: AtRuleStr]: Config[Key] };
+  [Key in keyof Config]?: NestedVarObject<Config[Key]>;
 };
 
 export type StyleX$CreateTheme = <

package/lib/StyleXTypes.js.flow

@@ -7,11 +7,13 @@
  * @flow strict
  */
 
-import type { CSSType } from './VarTypes';
 import type { CSSProperties } from './StyleXCSSTypes';
+import type { StyleXClassNameFor, StyleXVar } from './StyleXOpaqueTypes';
+import type { CSSType } from './VarTypes';
+
+export type { StyleXClassNameFor, StyleXVar } from './StyleXOpaqueTypes';
 
 // Using an opaque type to declare ClassNames generated by stylex.
-declare export opaque type StyleXClassNameFor<+_K, +_V>: string;
 export type StyleXClassNameForValue<+V> = StyleXClassNameFor<mixed, V>;
 export type StyleXClassNameForKey<+K> = StyleXClassNameFor<K, mixed>;
 export type StyleXClassName = StyleXClassNameFor<mixed, mixed>;
@@ -68,8 +70,8 @@ type ComplexStyleValueType<+T> =
     : T extends string | number | null
       ? T
       : T extends $ReadOnlyArray<infer U>
-        ? U
-        : T extends $ReadOnly<{ default: infer A, +[string]: infer B }>
+        ? ComplexStyleValueType<U>
+        : T extends { +default: infer A, +[string]: infer B }
           ? ComplexStyleValueType<A> | ComplexStyleValueType<B>
           : $ReadOnly<T>;
 
@@ -127,18 +129,12 @@ export type StyleXStylesWithout<+CSS: { +[string]: mixed }> = StyleXStyles<
   $Rest<CSSPropertiesWithExtras, $ReadOnly<CSS>>,
 >;
 
-// This is the type for the variables object
-declare export opaque type StyleXVar<+Val: mixed>;
-
-export type VarGroup<
-  +Tokens: { +[string]: mixed },
-  +_ID: string = string,
-> = $ReadOnly<{
-  [Key in keyof Tokens]: StyleXVar<Tokens[Key]>,
-}>;
+export type VarGroup<+Tokens: { +[string]: mixed }, +_ID: string = string> = {
+  +[Key in keyof Tokens]: StyleXVar<Tokens[Key]>,
+};
 
-export type TokensFromVarGroup<T: VarGroup<{ +[string]: mixed }>> = $ReadOnly<{
-  [Key in keyof T]: T[Key] extends StyleXVar<infer U> ? U : empty,
+export type TokensFromVarGroup<+T: VarGroup<{ +[string]: mixed }>> = $ReadOnly<{
+  [Key in keyof T]: UnwrapVar<T[Key]>,
 }>;
 
 type IDFromVarGroup<+T: VarGroup<{ +[string]: mixed }>> =
@@ -153,18 +149,18 @@ type NestedVarObject<+T> =
 
 type TTokens = $ReadOnly<{
   [string]:
-    | NestedVarObject<string | number>
-    | StyleXVar<string | number>
-    | CSSType<string | number>,
+    | NestedVarObject<null | string | number>
+    | StyleXVar<null | string | number>
+    | CSSType<null | string | number>,
 }>;
 
-type UnwrapVars<T> = T extends StyleXVar<infer U> ? U : T;
-export type FlattenTokens<T: TTokens> = {
+type UnwrapVar<+T> = T extends StyleXVar<infer U> ? U : T;
+export type FlattenTokens<+T: TTokens> = {
   +[Key in keyof T]: T[Key] extends CSSType<string | number>
-    ? UnwrapVars<T[Key]>
+    ? UnwrapVar<T[Key]>
     : T[Key] extends { +default: infer X, +[string]: infer Y }
-      ? UnwrapVars<X | Y>
-      : UnwrapVars<T[Key]>,
+      ? UnwrapVar<X | Y>
+      : UnwrapVar<T[Key]>,
 };
 
 export type StyleX$DefineVars = <DefaultTokens: TTokens, ID: string = string>(
@@ -177,13 +173,11 @@ declare export opaque type Theme<
   +_Tag: string = string,
 >: $ReadOnly<{
   $$css: true,
-  [string]: StyleXClassNameFor<string, IDFromVarGroup<T>>,
+  theme: StyleXClassNameFor<'theme', IDFromVarGroup<T>>,
 }>;
 
-export type OverridesForTokenType<Config: { +[string]: mixed }> = {
-  [Key in keyof Config]?:
-    | Config[Key]
-    | { +default: Config[Key], +[string]: Config[Key] },
+export type OverridesForTokenType<+Config: { +[string]: mixed }> = {
+  [Key in keyof Config]?: NestedVarObject<Config[Key]>,
 };
 
 export type StyleX$CreateTheme = <

package/lib/VarTypes.d.ts

@@ -92,7 +92,7 @@ export declare class TransformList<T extends string> implements ICSSType<T> {
   readonly value: ValueWithDefault<string>;
   readonly syntax: CSSSyntaxType;
 }
-export type CSSType<T extends string | number> =
+export type CSSType<T extends null | string | number> =
   | Angle<T>
   | Color<T>
   | Url<T>

package/lib/VarTypes.js.flow

@@ -93,7 +93,7 @@ declare export class TransformList<+T: string> implements ICSSType<T> {
   +syntax: CSSSyntaxType;
 }
 
-export type CSSType<+T: string | number> =
+export type CSSType<+T: null | string | number> =
   | Angle<T>
   | Color<T>
   | Url<T>

package/lib/es/StyleXSheet.mjs

@@ -9,50 +9,60 @@ function getDefaultExportFromCjs (x) {
  * 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 invariant_1;
+var hasRequiredInvariant;
 
-var NODE_ENV = process.env.NODE_ENV;
+function requireInvariant () {
+	if (hasRequiredInvariant) return invariant_1;
+	hasRequiredInvariant = 1;
 
-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');
-    }
-  }
+	/**
+	 * 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.
+	 */
 
-  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';
-    }
+	var NODE_ENV = process.env.NODE_ENV;
 
-    error.framesToPop = 1; // we don't care about invariant's own frame
-    throw error;
-  }
-};
+	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';
+	    }
 
-var invariant_1 = invariant;
+	    error.framesToPop = 1; // we don't care about invariant's own frame
+	    throw error;
+	  }
+	};
+
+	invariant_1 = invariant;
+	return invariant_1;
+}
 
-var invariant$1 = /*@__PURE__*/getDefaultExportFromCjs(invariant_1);
+var invariantExports = requireInvariant();
+var invariant = /*@__PURE__*/getDefaultExportFromCjs(invariantExports);
 
 const LIGHT_MODE_CLASS_NAME = '__fb-light-mode';
 const DARK_MODE_CLASS_NAME = '__fb-dark-mode';
@@ -71,7 +81,7 @@ function makeStyleTag() {
   tag.setAttribute('type', 'text/css');
   tag.setAttribute('data-stylex', 'true');
   const head = document.head || document.getElementsByTagName('head')[0];
-  invariant$1(head, 'expected head');
+  invariant(head, 'expected head');
   head.appendChild(tag);
   return tag;
 }
@@ -101,7 +111,7 @@ class StyleXSheet {
     const {
       tag
     } = this;
-    invariant$1(tag != null, 'expected tag');
+    invariant(tag != null, 'expected tag');
     return tag;
   }
   getCSS() {
@@ -140,14 +150,14 @@ class StyleXSheet {
   }
   delete(rule) {
     const index = this.rules.indexOf(rule);
-    invariant$1(index >= 0, "Couldn't find the index for rule %s", rule);
+    invariant(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');
+    invariant(sheet, 'expected sheet');
     sheet.deleteRule(index);
   }
   normalizeRule(rule) {

package/lib/es/stylex.mjs

@@ -1,4 +1,4 @@
-var styleq$1 = {};
+var styleq = {};
 
 /**
  * Copyright (c) Nicolas Gallagher
@@ -9,179 +9,185 @@ var styleq$1 = {};
  * 
  */
 
-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 hasRequiredStyleq;
 
-      var style = transform != null ? transform(possibleStyle) : possibleStyle;
+function requireStyleq () {
+	if (hasRequiredStyleq) return styleq;
+	hasRequiredStyleq = 1;
 
-      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
+	Object.defineProperty(styleq, "__esModule", {
+	  value: true
+	});
+	styleq.styleq = void 0;
+	var cache = new WeakMap();
+	var compiledKey = '$$css';
 
-        if (nextCache != null && nextCache.has(style)) {
-          // Cache: read
-          var cacheEntry = nextCache.get(style);
+	function createStyleq(options) {
+	  var disableCache;
+	  var disableMix;
+	  var transform;
 
-          if (cacheEntry != null) {
-            classNameChunk = cacheEntry[0]; // $FlowIgnore
+	  if (options != null) {
+	    disableCache = options.disableCache === true;
+	    disableMix = options.disableMix === true;
+	    transform = options.transform;
+	  }
 
-            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 = [];
+	  return function styleq() {
+	    // Keep track of property commits to the className
+	    var definedProperties = []; // The className and inline style to build up
 
-          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' }
+	    var className = '';
+	    var inlineStyle = null; // The current position in the cache graph
 
-            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);
+	    var nextCache = disableCache ? null : cache; // This way of creating an array from arguments is fastest
 
-                if (nextCache != null) {
-                  definedPropertiesChunk.push(prop);
-                }
+	    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 (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 (Array.isArray(possibleStyle)) {
+	        for (var _i = 0; _i < possibleStyle.length; _i++) {
+	          styles.push(possibleStyle[_i]);
+	        }
 
-          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;
-  };
+	        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$1 = createStyleq();
+	styleq.styleq = styleq$1;
+	styleq$1.factory = createStyleq;
+	return styleq;
 }
 
-var styleq = createStyleq();
-styleq_2 = styleq$1.styleq = styleq;
-styleq.factory = createStyleq;
+var styleqExports = /*@__PURE__*/ requireStyleq();
 
 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 [className, style] = styleqExports.styleq(styles);
   const result = {};
   if (className != null && className !== '') {
     result.className = className;
@@ -205,29 +211,16 @@ function attrs() {
   }
   return result;
 }
-function stylexCreate(styles) {
-  if (__implementations.create != null) {
-    const create = __implementations.create;
-    return create(styles);
-  }
+function stylexCreate(_styles) {
   throw errorForFn('create');
 }
-function stylexDefineVars(styles) {
-  if (__implementations.defineVars) {
-    return __implementations.defineVars(styles);
-  }
+function stylexDefineVars(_styles) {
   throw errorForFn('defineVars');
 }
-const stylexCreateTheme = (baseTokens, overrides) => {
-  if (__implementations.createTheme) {
-    return __implementations.createTheme(baseTokens, overrides);
-  }
+const stylexCreateTheme = (_baseTokens, _overrides) => {
   throw errorForFn('createTheme');
 };
-const stylexInclude = styles => {
-  if (__implementations.include) {
-    return __implementations.include(styles);
-  }
+const stylexInclude = _styles => {
   throw errorForFn('include');
 };
 const create = stylexCreate;
@@ -275,23 +268,17 @@ const types = {
     throw errorForType('transformList');
   }
 };
-const keyframes = keyframes => {
-  if (__implementations.keyframes) {
-    return __implementations.keyframes(keyframes);
-  }
+const 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);
+  const [className] = styleqExports.styleq(styles);
   return className;
 }
 _stylex.props = props;
@@ -303,14 +290,6 @@ _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 };
+export { attrs, create, createTheme, _stylex as default, defineVars, firstThatWorks, include, keyframes, legacyMerge, props, types };

package/lib/stylex.d.ts

@@ -114,9 +114,9 @@ export declare const types: {
     _v: ValueWithDefault<T>,
   ) => TransformList<T>;
 };
-export declare const keyframes: (keyframes: Keyframes) => string;
+export declare const keyframes: (_keyframes: Keyframes) => string;
 export declare const firstThatWorks: <T extends string | number>(
-  ...styles: ReadonlyArray<T>
+  ..._styles: ReadonlyArray<T>
 ) => ReadonlyArray<T>;
 type IStyleX = {
   (

package/lib/stylex.js

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.__monkey_patch__ = __monkey_patch__;
 exports.attrs = attrs;
 exports.legacyMerge = exports.keyframes = exports.include = exports.firstThatWorks = exports.defineVars = exports.default = exports.createTheme = exports.create = void 0;
 exports.props = props;
@@ -12,13 +11,9 @@ 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++) {
     styles[_key] = arguments[_key];
   }
-  if (__implementations.props) {
-    return __implementations.props.call(options, styles);
-  }
   const [className, style] = (0, _styleq.styleq)(styles);
   const result = {};
   if (className != null && className !== '') {
@@ -43,29 +38,16 @@ function attrs() {
   }
   return result;
 }
-function stylexCreate(styles) {
-  if (__implementations.create != null) {
-    const create = __implementations.create;
-    return create(styles);
-  }
+function stylexCreate(_styles) {
   throw errorForFn('create');
 }
-function stylexDefineVars(styles) {
-  if (__implementations.defineVars) {
-    return __implementations.defineVars(styles);
-  }
+function stylexDefineVars(_styles) {
   throw errorForFn('defineVars');
 }
-const stylexCreateTheme = (baseTokens, overrides) => {
-  if (__implementations.createTheme) {
-    return __implementations.createTheme(baseTokens, overrides);
-  }
+const stylexCreateTheme = (_baseTokens, _overrides) => {
   throw errorForFn('createTheme');
 };
-const stylexInclude = styles => {
-  if (__implementations.include) {
-    return __implementations.include(styles);
-  }
+const stylexInclude = _styles => {
   throw errorForFn('include');
 };
 const create = exports.create = stylexCreate;
@@ -113,17 +95,11 @@ const types = exports.types = {
     throw errorForType('transformList');
   }
 };
-const keyframes = keyframes => {
-  if (__implementations.keyframes) {
-    return __implementations.keyframes(keyframes);
-  }
+const keyframes = _keyframes => {
   throw errorForFn('keyframes');
 };
 exports.keyframes = keyframes;
 const firstThatWorks = function () {
-  if (__implementations.firstThatWorks) {
-    return __implementations.firstThatWorks(...arguments);
-  }
   throw errorForFn('firstThatWorks');
 };
 exports.firstThatWorks = firstThatWorks;
@@ -143,13 +119,5 @@ _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 = exports.legacyMerge = _stylex;
 var _default = exports.default = _stylex;

package/lib/stylex.js.flow

@@ -116,10 +116,10 @@ declare export const types: {
   ) => TransformList<T>,
 };
 
-declare export const keyframes: (keyframes: Keyframes) => string;
+declare export const keyframes: (_keyframes: Keyframes) => string;
 
 declare export const firstThatWorks: <T: string | number>(
-  ...styles: $ReadOnlyArray<T>
+  ..._styles: $ReadOnlyArray<T>
 ) => $ReadOnlyArray<T>;
 
 type IStyleX = {
@@ -158,6 +158,5 @@ type IStyleX = {
   ...
 };
 
-
 declare export const legacyMerge: IStyleX;
 declare export default IStyleX;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/stylex",
-  "version": "0.8.0",
+  "version": "0.9.0-beta.1",
   "description": "A library for defining styles for optimized user interfaces.",
   "main": "./lib/stylex.js",
   "module": "./lib/es/stylex.mjs",
@@ -45,7 +45,7 @@
     "styleq": "0.1.3"
   },
   "devDependencies": {
-    "@stylexjs/scripts": "0.8.0",
+    "@stylexjs/scripts": "0.9.0-beta.1",
     "cross-env": "^7.0.3"
   },
   "jest": {},