@stylexjs/stylex 0.10.1 → 0.11.1

package/lib/StyleXTypes.d.ts

@@ -118,7 +118,7 @@ export type MapNamespaces<
     : MapNamespace<S[Key]>;
 }>;
 
-export type Stylex$Create = <
+export type StyleX$Create = <
   const S extends {
     [key: string]: UserAuthoredStyles | ((...args: any) => UserAuthoredStyles);
   },

package/lib/StyleXTypes.js.flow

@@ -87,7 +87,7 @@ export type MapNamespaces<+S: { +[string]: mixed }> = $ReadOnly<{
     ? (...args: Args) => $ReadOnly<[MapNamespace<Obj>, InlineStyles]>
     : MapNamespace<S[Key]>,
 }>;
-export type Stylex$Create = <S: { +[string]: mixed }>(
+export type StyleX$Create = <S: { +[string]: mixed }>(
   styles: S,
 ) => MapNamespaces<S>;
 

package/lib/VarTypes.d.ts

@@ -7,12 +7,7 @@
  *
  */
 
-export type ValueWithDefault<T> =
-  | T
-  | Readonly<{
-      default: ValueWithDefault<T>;
-      [$$Key$$: string]: ValueWithDefault<T>;
-    }>;
+import type { ValueWithDefault } from './util-types';
 export type CSSSyntax =
   | '*'
   | '<length>'

package/lib/VarTypes.js.flow

@@ -7,12 +7,7 @@
  * @flow strict
  */
 
-export type ValueWithDefault<+T> =
-  | T
-  | $ReadOnly<{
-      default: ValueWithDefault<T>,
-      [string]: ValueWithDefault<T>,
-    }>;
+import type { ValueWithDefault } from './util-types';
 
 export type CSSSyntax =
   | '*'

package/lib/es/stylex.mjs

@@ -1,14 +1,5 @@
 var styleq = {};
 
-/**
- * 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.
- *
- * 
- */
-
 var hasRequiredStyleq;
 
 function requireStyleq () {
@@ -21,185 +12,130 @@ function requireStyleq () {
 	styleq.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 definedProperties = [];
 	    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 inlineStyle = null;
+	    var debugString = '';
+	    var nextCache = disableCache ? null : cache;
 	    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
-
+	      var possibleStyle = styles.pop();
 	      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 (style.$$css != null) {
+	        var classNameChunk = '';
 	        if (nextCache != null && nextCache.has(style)) {
-	          // Cache: read
 	          var cacheEntry = nextCache.get(style);
-
 	          if (cacheEntry != null) {
-	            classNameChunk = cacheEntry[0]; // $FlowIgnore
-
+	            classNameChunk = cacheEntry[0];
+	            debugString = cacheEntry[2];
 	            definedProperties.push.apply(definedProperties, cacheEntry[1]);
-	            nextCache = cacheEntry[2];
+	            nextCache = cacheEntry[3];
 	          }
-	        } // Update the chunks with data from this object
-	        else {
-	          // The properties defined by this object
+	        } else {
 	          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 (prop === compiledKey) {
+	              var compiledKeyValue = style[prop];
+	              if (compiledKeyValue !== true) {
+	                debugString = debugString ? compiledKeyValue + '; ' + debugString : compiledKeyValue;
+	              }
+	              continue;
+	            }
 	            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 {
+	            } 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.set(style, [classNameChunk, definedPropertiesChunk, debugString, 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 {
+	      } 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.
-
+	                definedProperties.push(_prop);
 	                nextCache = null;
 	              }
 	            }
 	          }
-
 	          if (subStyle != null) {
 	            inlineStyle = Object.assign(subStyle, inlineStyle);
 	          }
 	        }
 	      }
 	    }
-
-	    var styleProps = [className, inlineStyle];
+	    var styleProps = [className, inlineStyle, debugString];
 	    return styleProps;
 	  };
 	}
-
-	var styleq$1 = createStyleq();
-	styleq.styleq = styleq$1;
+	var styleq$1 = styleq.styleq = createStyleq();
 	styleq$1.factory = createStyleq;
 	return styleq;
 }
 
 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 errorForFn = name => new Error(`Unexpected 'stylex.${name}' call at runtime. Styles must be compiled by '@stylexjs/babel-plugin'.`);
 const errorForType = key => errorForFn(`types.${key}`);
-function props() {
-  for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
-    styles[_key] = arguments[_key];
-  }
-  const [className, style] = styleqExports.styleq(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,
+    'data-style-src': dataStyleSrc,
     style
   } = props(...arguments);
   const result = {};
@@ -209,24 +145,43 @@ function attrs() {
   if (style != null && Object.keys(style).length > 0) {
     result.style = Object.keys(style).map(key => `${key}:${style[key]};`).join('');
   }
+  if (dataStyleSrc != null && dataStyleSrc !== '') {
+    result['data-style-src'] = dataStyleSrc;
+  }
   return result;
 }
-function stylexCreate(_styles) {
+const create = function stylexCreate(_styles) {
   throw errorForFn('create');
-}
-function stylexDefineVars(_styles) {
-  throw errorForFn('defineVars');
-}
-const stylexCreateTheme = (_baseTokens, _overrides) => {
+};
+const createTheme = (_baseTokens, _overrides) => {
   throw errorForFn('createTheme');
 };
-const stylexInclude = _styles => {
-  throw errorForFn('include');
+const defineVars = function stylexDefineVars(_styles) {
+  throw errorForFn('defineVars');
+};
+const firstThatWorks = function () {
+  throw errorForFn('firstThatWorks');
+};
+const keyframes = _keyframes => {
+  throw errorForFn('keyframes');
 };
-const create = stylexCreate;
-const defineVars = stylexDefineVars;
-const createTheme = stylexCreateTheme;
-const include = stylexInclude;
+function props() {
+  for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
+    styles[_key] = arguments[_key];
+  }
+  const [className, style, dataStyleSrc] = styleqExports.styleq(styles);
+  const result = {};
+  if (className != null && className !== '') {
+    result.className = className;
+  }
+  if (style != null && Object.keys(style).length > 0) {
+    result.style = style;
+  }
+  if (dataStyleSrc != null && dataStyleSrc !== '') {
+    result['data-style-src'] = dataStyleSrc;
+  }
+  return result;
+}
 const types = {
   angle: _v => {
     throw errorForType('angle');
@@ -268,28 +223,21 @@ const types = {
     throw errorForType('transformList');
   }
 };
-const keyframes = _keyframes => {
-  throw errorForFn('keyframes');
-};
-const firstThatWorks = function () {
-  throw errorForFn('firstThatWorks');
-};
-function _stylex() {
+function _legacyMerge() {
   for (var _len2 = arguments.length, styles = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
     styles[_key2] = arguments[_key2];
   }
   const [className] = styleqExports.styleq(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 legacyMerge = _stylex;
-
-export { attrs, create, createTheme, _stylex as default, defineVars, firstThatWorks, include, keyframes, legacyMerge, props, types };
+_legacyMerge.attrs = attrs;
+_legacyMerge.create = create;
+_legacyMerge.createTheme = createTheme;
+_legacyMerge.defineVars = defineVars;
+_legacyMerge.firstThatWorks = firstThatWorks;
+_legacyMerge.keyframes = keyframes;
+_legacyMerge.props = props;
+_legacyMerge.types = types;
+const legacyMerge = _legacyMerge;
+
+export { attrs, create, createTheme, defineVars, firstThatWorks, keyframes, legacyMerge, props, types };

package/lib/stylex.d.ts

@@ -8,41 +8,32 @@
  */
 
 import type {
+  CompiledStyles,
+  InlineStyles,
   Keyframes,
-  Stylex$Create,
-  StyleX$DefineVars,
+  StaticStyles,
+  StaticStylesWithout,
+  StyleX$Create,
   StyleX$CreateTheme,
+  StyleX$DefineVars,
   StyleXArray,
-  CompiledStyles,
-  InlineStyles,
-  StyleXClassNameFor,
-} from './StyleXTypes';
-import type {
-  ValueWithDefault,
-  Angle,
-  Color,
-  Url,
-  Image,
-  Integer,
-  LengthPercentage,
-  Length,
-  Percentage,
-  Num,
-  Resolution,
-  Time,
-  TransformFunction,
-  TransformList,
-} from './VarTypes';
-export type {
-  VarGroup,
-  Theme,
   StyleXStyles,
   StyleXStylesWithout,
+  Theme,
+  VarGroup,
+} from './StyleXTypes';
+import type { ValueWithDefault } from './util-types';
+import * as Types from './VarTypes';
+export type {
   StaticStyles,
   StaticStylesWithout,
-} from './StyleXTypes';
-export declare function props(
-  this: null | undefined | unknown,
+  StyleXStyles,
+  StyleXStylesWithout,
+  Theme,
+  Types,
+  VarGroup,
+};
+export declare function attrs(
   ...styles: ReadonlyArray<
     StyleXArray<
       | (null | undefined | CompiledStyles)
@@ -50,11 +41,16 @@ export declare function props(
       | Readonly<[CompiledStyles, InlineStyles]>
     >
   >
-): Readonly<{
-  className?: string;
-  style?: Readonly<{ [$$Key$$: string]: string | number }>;
-}>;
-export declare function attrs(
+): Readonly<{ class?: string; 'data-style-src'?: string; style?: string }>;
+export declare const create: StyleX$Create;
+export declare const createTheme: StyleX$CreateTheme;
+export declare const defineVars: StyleX$DefineVars;
+export declare const firstThatWorks: <T extends string | number>(
+  ..._styles: ReadonlyArray<T>
+) => ReadonlyArray<T>;
+export declare const keyframes: (_keyframes: Keyframes) => string;
+export declare function props(
+  this: null | undefined | unknown,
   ...styles: ReadonlyArray<
     StyleXArray<
       | (null | undefined | CompiledStyles)
@@ -62,70 +58,61 @@ export declare function attrs(
       | Readonly<[CompiledStyles, InlineStyles]>
     >
   >
-): Readonly<{ class?: string; style?: string }>;
-type Stylex$Include = <
-  TStyles extends {
-    readonly [$$Key$$: string]: StyleXClassNameFor<string, unknown>;
-  },
->(
-  styles: TStyles,
-) => {
-  readonly [Key in keyof TStyles]: TStyles[Key] extends StyleXClassNameFor<
-    unknown,
-    infer V
-  >
-    ? V
-    : string;
-};
-export declare const create: Stylex$Create;
-export declare const defineVars: StyleX$DefineVars;
-export declare const createTheme: StyleX$CreateTheme;
-export declare const include: Stylex$Include;
+): Readonly<{
+  className?: string;
+  'data-style-src'?: string;
+  style?: Readonly<{ [$$Key$$: string]: string | number }>;
+}>;
 export declare const types: {
   angle: <T extends string | 0 = string | 0>(
     _v: ValueWithDefault<T>,
-  ) => Angle<T>;
-  color: <T extends string = string>(_v: ValueWithDefault<T>) => Color<T>;
-  url: <T extends string = string>(_v: ValueWithDefault<T>) => Url<T>;
-  image: <T extends string = string>(_v: ValueWithDefault<T>) => Image<T>;
+  ) => Types.Angle<T>;
+  color: <T extends string = string>(_v: ValueWithDefault<T>) => Types.Color<T>;
+  url: <T extends string = string>(_v: ValueWithDefault<T>) => Types.Url<T>;
+  image: <T extends string = string>(_v: ValueWithDefault<T>) => Types.Image<T>;
   integer: <T extends number | string = number | string>(
     _v: ValueWithDefault<T>,
-  ) => Integer<T>;
+  ) => Types.Integer<T>;
   lengthPercentage: <T extends number | string = number | string>(
     _v: ValueWithDefault<T>,
-  ) => LengthPercentage<T>;
+  ) => Types.LengthPercentage<T>;
   length: <T extends number | string = number | string>(
     _v: ValueWithDefault<T>,
-  ) => Length<T>;
+  ) => Types.Length<T>;
   percentage: <T extends number | string = number | string>(
     _v: ValueWithDefault<T>,
-  ) => Percentage<T>;
+  ) => Types.Percentage<T>;
   number: <T extends number | string = number | string>(
     _v: ValueWithDefault<T>,
-  ) => Num<T>;
+  ) => Types.Num<T>;
   resolution: <T extends string = string>(
     _v: ValueWithDefault<T>,
-  ) => Resolution<T>;
-  time: <T extends string | 0 = string | 0>(_v: ValueWithDefault<T>) => Time<T>;
+  ) => Types.Resolution<T>;
+  time: <T extends string | 0 = string | 0>(
+    _v: ValueWithDefault<T>,
+  ) => Types.Time<T>;
   transformFunction: <T extends string = string>(
     _v: ValueWithDefault<T>,
-  ) => TransformFunction<T>;
+  ) => Types.TransformFunction<T>;
   transformList: <T extends string = string>(
     _v: ValueWithDefault<T>,
-  ) => TransformList<T>;
+  ) => Types.TransformList<T>;
 };
-export declare const keyframes: (_keyframes: Keyframes) => string;
-export declare const firstThatWorks: <T extends string | number>(
-  ..._styles: ReadonlyArray<T>
-) => ReadonlyArray<T>;
+/**
+ * DO NOT USE. Legacy export for Meta
+ */
+
+/**
+ * DO NOT USE. Legacy export for Meta
+ */
+
 type IStyleX = {
   (
     ...styles: ReadonlyArray<
       StyleXArray<(null | undefined | CompiledStyles) | boolean>
     >
   ): string;
-  props: (
-    this: null | undefined | unknown,
+  attrs: (
     ...styles: ReadonlyArray<
       StyleXArray<
         | (null | undefined | CompiledStyles)
@@ -133,11 +120,16 @@ type IStyleX = {
         | Readonly<[CompiledStyles, InlineStyles]>
       >
     >
-  ) => Readonly<{
-    className?: string;
-    style?: Readonly<{ [$$Key$$: string]: string | number }>;
-  }>;
-  attrs: (
+  ) => Readonly<{ class?: string; 'data-style-src'?: string; style?: string }>;
+  create: StyleX$Create;
+  createTheme: StyleX$CreateTheme;
+  defineVars: StyleX$DefineVars;
+  firstThatWorks: <T extends string | number>(
+    ...v: ReadonlyArray<T>
+  ) => ReadonlyArray<T>;
+  keyframes: (keyframes: Keyframes) => string;
+  props: (
+    this: null | undefined | unknown,
     ...styles: ReadonlyArray<
       StyleXArray<
         | (null | undefined | CompiledStyles)
@@ -145,18 +137,12 @@ type IStyleX = {
         | Readonly<[CompiledStyles, InlineStyles]>
       >
     >
-  ) => Readonly<{ class?: string; style?: string }>;
-  create: Stylex$Create;
-  defineVars: StyleX$DefineVars;
-  createTheme: StyleX$CreateTheme;
-  include: Stylex$Include;
+  ) => Readonly<{
+    className?: string;
+    'data-style-src'?: string;
+    style?: Readonly<{ [$$Key$$: string]: string | number }>;
+  }>;
   types: typeof types;
-  firstThatWorks: <T extends string | number>(
-    ...v: ReadonlyArray<T>
-  ) => ReadonlyArray<T>;
-  keyframes: (keyframes: Keyframes) => string;
   __customProperties?: { [$$Key$$: string]: unknown };
 };
 export declare const legacyMerge: IStyleX;
-declare const $$EXPORT_DEFAULT_DECLARATION$$: IStyleX;
-export default $$EXPORT_DEFAULT_DECLARATION$$;

package/lib/stylex.js

@@ -4,29 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.attrs = attrs;
-exports.legacyMerge = exports.keyframes = exports.include = exports.firstThatWorks = exports.defineVars = exports.default = exports.createTheme = exports.create = void 0;
+exports.legacyMerge = exports.keyframes = exports.firstThatWorks = exports.defineVars = exports.createTheme = exports.create = void 0;
 exports.props = props;
 exports.types = void 0;
+var Types = _interopRequireWildcard(require("./VarTypes"));
 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'`);
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const errorForFn = name => new Error(`Unexpected 'stylex.${name}' call at runtime. Styles must be compiled by '@stylexjs/babel-plugin'.`);
 const errorForType = key => errorForFn(`types.${key}`);
-function props() {
-  for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
-    styles[_key] = arguments[_key];
-  }
-  const [className, style] = (0, _styleq.styleq)(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,
+    'data-style-src': dataStyleSrc,
     style
   } = props(...arguments);
   const result = {};
@@ -36,24 +26,46 @@ function attrs() {
   if (style != null && Object.keys(style).length > 0) {
     result.style = Object.keys(style).map(key => `${key}:${style[key]};`).join('');
   }
+  if (dataStyleSrc != null && dataStyleSrc !== '') {
+    result['data-style-src'] = dataStyleSrc;
+  }
   return result;
 }
-function stylexCreate(_styles) {
+const create = exports.create = function stylexCreate(_styles) {
   throw errorForFn('create');
-}
-function stylexDefineVars(_styles) {
-  throw errorForFn('defineVars');
-}
-const stylexCreateTheme = (_baseTokens, _overrides) => {
+};
+const createTheme = (_baseTokens, _overrides) => {
   throw errorForFn('createTheme');
 };
-const stylexInclude = _styles => {
-  throw errorForFn('include');
+exports.createTheme = createTheme;
+const defineVars = exports.defineVars = function stylexDefineVars(_styles) {
+  throw errorForFn('defineVars');
+};
+const firstThatWorks = function () {
+  throw errorForFn('firstThatWorks');
 };
-const create = exports.create = stylexCreate;
-const defineVars = exports.defineVars = stylexDefineVars;
-const createTheme = exports.createTheme = stylexCreateTheme;
-const include = exports.include = stylexInclude;
+exports.firstThatWorks = firstThatWorks;
+const keyframes = _keyframes => {
+  throw errorForFn('keyframes');
+};
+exports.keyframes = keyframes;
+function props() {
+  for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
+    styles[_key] = arguments[_key];
+  }
+  const [className, style, dataStyleSrc] = (0, _styleq.styleq)(styles);
+  const result = {};
+  if (className != null && className !== '') {
+    result.className = className;
+  }
+  if (style != null && Object.keys(style).length > 0) {
+    result.style = style;
+  }
+  if (dataStyleSrc != null && dataStyleSrc !== '') {
+    result['data-style-src'] = dataStyleSrc;
+  }
+  return result;
+}
 const types = exports.types = {
   angle: _v => {
     throw errorForType('angle');
@@ -95,29 +107,19 @@ const types = exports.types = {
     throw errorForType('transformList');
   }
 };
-const keyframes = _keyframes => {
-  throw errorForFn('keyframes');
-};
-exports.keyframes = keyframes;
-const firstThatWorks = function () {
-  throw errorForFn('firstThatWorks');
-};
-exports.firstThatWorks = firstThatWorks;
-function _stylex() {
+function _legacyMerge() {
   for (var _len2 = arguments.length, styles = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
     styles[_key2] = arguments[_key2];
   }
   const [className] = (0, _styleq.styleq)(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 legacyMerge = exports.legacyMerge = _stylex;
-var _default = exports.default = _stylex;
+_legacyMerge.attrs = attrs;
+_legacyMerge.create = create;
+_legacyMerge.createTheme = createTheme;
+_legacyMerge.defineVars = defineVars;
+_legacyMerge.firstThatWorks = firstThatWorks;
+_legacyMerge.keyframes = keyframes;
+_legacyMerge.props = props;
+_legacyMerge.types = types;
+const legacyMerge = exports.legacyMerge = _legacyMerge;

package/lib/stylex.js.flow

@@ -8,52 +8,33 @@
  */
 
 import type {
+  CompiledStyles,
+  InlineStyles,
   Keyframes,
-  Stylex$Create,
-  StyleX$DefineVars,
+  StaticStyles,
+  StaticStylesWithout,
+  StyleX$Create,
   StyleX$CreateTheme,
+  StyleX$DefineVars,
   StyleXArray,
-  CompiledStyles,
-  InlineStyles,
-  StyleXClassNameFor,
+  StyleXStyles,
+  StyleXStylesWithout,
+  Theme,
+  VarGroup,
 } from './StyleXTypes';
-import type {
-  ValueWithDefault,
-  Angle,
-  Color,
-  Url,
-  Image,
-  Integer,
-  LengthPercentage,
-  Length,
-  Percentage,
-  Num,
-  Resolution,
-  Time,
-  TransformFunction,
-  TransformList,
-} from './VarTypes';
+import type { ValueWithDefault } from './util-types';
+import * as Types from './VarTypes';
 
 export type {
-  VarGroup,
-  Theme,
-  StyleXStyles,
-  StyleXStylesWithout,
   StaticStyles,
   StaticStylesWithout,
-} from './StyleXTypes';
+  StyleXStyles,
+  StyleXStylesWithout,
+  Theme,
+  Types,
+  VarGroup,
+};
 
-declare export function props(
-  this: ?mixed,
-  ...styles: $ReadOnlyArray<
-    StyleXArray<
-      ?CompiledStyles | boolean | $ReadOnly<[CompiledStyles, InlineStyles]>,
-    >,
-  >
-): $ReadOnly<{
-  className?: string,
-  style?: $ReadOnly<{ [string]: string | number }>,
-}>;
 declare export function attrs(
   ...styles: $ReadOnlyArray<
     StyleXArray<
@@ -62,79 +43,75 @@ declare export function attrs(
   >
 ): $ReadOnly<{
   class?: string,
+  'data-style-src'?: string,
   style?: string,
 }>;
 
-type Stylex$Include = <
-  TStyles: { +[string]: StyleXClassNameFor<string, mixed> },
->(
-  styles: TStyles,
-) => {
-  +[Key in keyof TStyles]: TStyles[Key] extends StyleXClassNameFor<
-    mixed,
-    infer V,
-  >
-    ? V
-    : string,
-};
+declare export const create: StyleX$Create;
 
-declare export const create: Stylex$Create;
+declare export const createTheme: StyleX$CreateTheme;
 
 declare export const defineVars: StyleX$DefineVars;
 
-declare export const createTheme: StyleX$CreateTheme;
+declare export const firstThatWorks: <T: string | number>(
+  ..._styles: $ReadOnlyArray<T>
+) => $ReadOnlyArray<T>;
 
-declare export const include: Stylex$Include;
+declare export const keyframes: (_keyframes: Keyframes) => string;
+
+declare export function props(
+  this: ?mixed,
+  ...styles: $ReadOnlyArray<
+    StyleXArray<
+      ?CompiledStyles | boolean | $ReadOnly<[CompiledStyles, InlineStyles]>,
+    >,
+  >
+): $ReadOnly<{
+  className?: string,
+  'data-style-src'?: string,
+  style?: $ReadOnly<{ [string]: string | number }>,
+}>;
 
 declare export const types: {
-  angle: <T: string | 0 = string | 0>(_v: ValueWithDefault<T>) => Angle<T>,
-  color: <T: string = string>(_v: ValueWithDefault<T>) => Color<T>,
-  url: <T: string = string>(_v: ValueWithDefault<T>) => Url<T>,
-  image: <T: string = string>(_v: ValueWithDefault<T>) => Image<T>,
+  angle: <T: string | 0 = string | 0>(
+    _v: ValueWithDefault<T>,
+  ) => Types.Angle<T>,
+  color: <T: string = string>(_v: ValueWithDefault<T>) => Types.Color<T>,
+  url: <T: string = string>(_v: ValueWithDefault<T>) => Types.Url<T>,
+  image: <T: string = string>(_v: ValueWithDefault<T>) => Types.Image<T>,
   integer: <T: number | string = number | string>(
     _v: ValueWithDefault<T>,
-  ) => Integer<T>,
+  ) => Types.Integer<T>,
   lengthPercentage: <T: number | string = number | string>(
     _v: ValueWithDefault<T>,
-  ) => LengthPercentage<T>,
+  ) => Types.LengthPercentage<T>,
   length: <T: number | string = number | string>(
     _v: ValueWithDefault<T>,
-  ) => Length<T>,
+  ) => Types.Length<T>,
   percentage: <T: number | string = number | string>(
     _v: ValueWithDefault<T>,
-  ) => Percentage<T>,
+  ) => Types.Percentage<T>,
   number: <T: number | string = number | string>(
     _v: ValueWithDefault<T>,
-  ) => Num<T>,
-  resolution: <T: string = string>(_v: ValueWithDefault<T>) => Resolution<T>,
-  time: <T: string | 0 = string | 0>(_v: ValueWithDefault<T>) => Time<T>,
+  ) => Types.Num<T>,
+  resolution: <T: string = string>(
+    _v: ValueWithDefault<T>,
+  ) => Types.Resolution<T>,
+  time: <T: string | 0 = string | 0>(_v: ValueWithDefault<T>) => Types.Time<T>,
   transformFunction: <T: string = string>(
     _v: ValueWithDefault<T>,
-  ) => TransformFunction<T>,
+  ) => Types.TransformFunction<T>,
   transformList: <T: string = string>(
     _v: ValueWithDefault<T>,
-  ) => TransformList<T>,
+  ) => Types.TransformList<T>,
 };
 
-declare export const keyframes: (_keyframes: Keyframes) => string;
-
-declare export const firstThatWorks: <T: string | number>(
-  ..._styles: $ReadOnlyArray<T>
-) => $ReadOnlyArray<T>;
+/**
+ * DO NOT USE. Legacy export for Meta
+ */
 
 type IStyleX = {
   (...styles: $ReadOnlyArray<StyleXArray<?CompiledStyles | boolean>>): string,
-  props: (
-    this: ?mixed,
-    ...styles: $ReadOnlyArray<
-      StyleXArray<
-        ?CompiledStyles | boolean | $ReadOnly<[CompiledStyles, InlineStyles]>,
-      >,
-    >
-  ) => $ReadOnly<{
-    className?: string,
-    style?: $ReadOnly<{ [string]: string | number }>,
-  }>,
   attrs: (
     ...styles: $ReadOnlyArray<
       StyleXArray<
@@ -143,20 +120,31 @@ type IStyleX = {
     >
   ) => $ReadOnly<{
     class?: string,
+    'data-style-src'?: string,
     style?: string,
   }>,
-  create: Stylex$Create,
-  defineVars: StyleX$DefineVars,
+  create: StyleX$Create,
   createTheme: StyleX$CreateTheme,
-  include: Stylex$Include,
-  types: typeof types,
+  defineVars: StyleX$DefineVars,
   firstThatWorks: <T: string | number>(
     ...v: $ReadOnlyArray<T>
   ) => $ReadOnlyArray<T>,
   keyframes: (keyframes: Keyframes) => string,
+  props: (
+    this: ?mixed,
+    ...styles: $ReadOnlyArray<
+      StyleXArray<
+        ?CompiledStyles | boolean | $ReadOnly<[CompiledStyles, InlineStyles]>,
+      >,
+    >
+  ) => $ReadOnly<{
+    className?: string,
+    'data-style-src'?: string,
+    style?: $ReadOnly<{ [string]: string | number }>,
+  }>,
+  types: typeof types,
   __customProperties?: { [string]: mixed },
   ...
 };
 
 declare export const legacyMerge: IStyleX;
-declare export default IStyleX;

package/lib/util-types.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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 ValueWithDefault<T> =
+  | T
+  | Readonly<{
+      default: ValueWithDefault<T>;
+      [$$Key$$: string]: ValueWithDefault<T>;
+    }>;

package/lib/util-types.js

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

package/lib/util-types.js.flow

@@ -0,0 +1,15 @@
+/**
+ * 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 ValueWithDefault<+T> =
+  | T
+  | $ReadOnly<{
+      default: ValueWithDefault<T>,
+      [string]: ValueWithDefault<T>,
+    }>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/stylex",
-  "version": "0.10.1",
+  "version": "0.11.1",
   "description": "A library for defining styles for optimized user interfaces.",
   "main": "./lib/stylex.js",
   "module": "./lib/es/stylex.mjs",
@@ -42,11 +42,28 @@
   "dependencies": {
     "css-mediaquery": "^0.1.2",
     "invariant": "^2.2.4",
-    "styleq": "0.1.3"
+    "styleq": "0.2.1"
   },
   "devDependencies": {
-    "@stylexjs/scripts": "0.10.1",
-    "cross-env": "^7.0.3"
+    "@babel/cli": "^7.26.4",
+    "@babel/core": "^7.26.8",
+    "@babel/eslint-parser": "^7.26.8",
+    "@babel/plugin-syntax-flow": "^7.26.0",
+    "@babel/preset-env": "^7.26.8",
+    "@babel/preset-flow": "^7.25.9",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/preset-typescript": "^7.26.0",
+    "@babel/types": "^7.26.8",
+    "@rollup/plugin-alias": "^5.1.1",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-replace": "^6.0.1",
+    "@stylexjs/scripts": "0.11.1",
+    "babel-plugin-syntax-hermes-parser": "^0.26.0",
+    "cross-env": "^7.0.3",
+    "rollup": "^4.24.0"
   },
   "jest": {},
   "files": [