@stylexjs/stylex 0.2.0-beta.21 → 0.2.0-beta.22

package/lib/native/fixContentBox.js

@@ -11,20 +11,20 @@ const BOTTOM = 2;
 const LEFT = 3;
 const START = LEFT;
 const END = RIGHT;
-const borderMapping = [["borderWidth", [TOP, RIGHT, BOTTOM, LEFT]], ["borderTopWidth", [TOP]], ["borderRightWidth", [RIGHT]], ["borderBottomWidth", [BOTTOM]], ["borderLeftWidth", [LEFT]], ["borderStartWidth", [START]], ["borderEndWidth", [END]]];
-const paddingMapping = [["padding", [TOP, RIGHT, BOTTOM, LEFT]], ["paddingVertical", [TOP, BOTTOM]], ["paddingHorizontal", [LEFT, RIGHT]], ["paddingTop", [TOP]], ["paddingRight", [RIGHT]], ["paddingBottom", [BOTTOM]], ["paddingLeft", [LEFT]], ["paddingStart", [START]], ["paddingEnd", [END]]];
+const borderMapping = [['borderWidth', [TOP, RIGHT, BOTTOM, LEFT]], ['borderTopWidth', [TOP]], ['borderRightWidth', [RIGHT]], ['borderBottomWidth', [BOTTOM]], ['borderLeftWidth', [LEFT]], ['borderStartWidth', [START]], ['borderEndWidth', [END]]];
+const paddingMapping = [['padding', [TOP, RIGHT, BOTTOM, LEFT]], ['paddingVertical', [TOP, BOTTOM]], ['paddingHorizontal', [LEFT, RIGHT]], ['paddingTop', [TOP]], ['paddingRight', [RIGHT]], ['paddingBottom', [BOTTOM]], ['paddingLeft', [LEFT]], ['paddingStart', [START]], ['paddingEnd', [END]]];
 function fixContentBox(flatStyle) {
   const border = [0, 0, 0, 0];
   const padding = [0, 0, 0, 0];
   for (const [styleProp, directions] of borderMapping) {
-    if (typeof flatStyle[styleProp] === "number") {
+    if (typeof flatStyle[styleProp] === 'number') {
       for (const direction of directions) {
         border[direction] = flatStyle[styleProp];
       }
     }
   }
   for (const [styleProp, directions] of paddingMapping) {
-    if (typeof flatStyle[styleProp] === "number") {
+    if (typeof flatStyle[styleProp] === 'number') {
       for (const direction of directions) {
         padding[direction] = flatStyle[styleProp];
       }
@@ -32,7 +32,7 @@ function fixContentBox(flatStyle) {
   }
   const correctionVertical = border[TOP] + padding[TOP] + padding[BOTTOM] + border[BOTTOM];
   const correctionHorizontal = border[LEFT] + padding[LEFT] + padding[RIGHT] + border[RIGHT];
-  const correctionMapping = new Map([["width", correctionHorizontal], ["minWidth", correctionHorizontal], ["maxWidth", correctionHorizontal], ["height", correctionVertical], ["minHeight", correctionVertical], ["maxHeight", correctionVertical]]);
+  const correctionMapping = new Map([['width', correctionHorizontal], ['minWidth', correctionHorizontal], ['maxWidth', correctionHorizontal], ['height', correctionVertical], ['minHeight', correctionVertical], ['maxHeight', correctionVertical]]);
   const nextStyle = {};
   for (const styleProp of Object.keys(flatStyle)) {
     const correction = correctionMapping.get(styleProp);
@@ -42,11 +42,11 @@ function fixContentBox(flatStyle) {
         nextStyle[styleProp] = null;
         continue;
       }
-      if (styleValue === "auto") {
+      if (styleValue === 'auto') {
         nextStyle[styleProp] = styleValue;
         continue;
       }
-      if (typeof styleValue !== "number") {
+      if (typeof styleValue !== 'number') {
         (0, _errorMsg.warnMsg)(`"boxSizing:'content-box'" does not support value "${String(styleValue)}" for property "${styleProp}". Expected a value that resolves to a number. Percentage values can only be used with "boxSizing:'border-box'".`);
         return flatStyle;
       }

package/lib/native/flattenStyle.js

@@ -12,7 +12,7 @@ function flattenStyle() {
   const result = {};
   for (let i = 0; i < flatArray.length; i++) {
     const style = flatArray[i];
-    if (style != null && typeof style === "object") {
+    if (style != null && typeof style === 'object') {
       Object.assign(result, style);
     }
   }

package/lib/native/parseShadow.js

@@ -8,19 +8,19 @@ const VALUES_REG = /,(?![^(]*\))/;
 const PARTS_REG = /\s(?![^(]*\))/;
 const LENGTH_REG = /^[0-9]+[a-zA-Z%]+?$/;
 function isLength(v) {
-  return v === "0" || LENGTH_REG.test(v);
+  return v === '0' || LENGTH_REG.test(v);
 }
 function toMaybeNum(v) {
-  if (!/px$/.test(v) && v !== "0") return v;
+  if (!/px$/.test(v) && v !== '0') return v;
   const n = parseFloat(v);
   return !isNaN(n) ? n : v;
 }
 function parseValue(str) {
   const parts = str.split(PARTS_REG);
-  const inset = parts.includes("inset");
+  const inset = parts.includes('inset');
   const last = parts.slice(-1)[0];
   const color = !isLength(last) ? last : null;
-  const nums = parts.filter(n => n !== "inset").filter(n => n !== color).map(toMaybeNum);
+  const nums = parts.filter(n => n !== 'inset').filter(n => n !== color).map(toMaybeNum);
   const [offsetX, offsetY, blurRadius, spreadRadius] = nums;
   return {
     inset,

package/lib/native/parseTimeValue.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.parseTimeValue = parseTimeValue;
 function parseTimeValue(timeValue) {
   const trimmedTimeValue = timeValue.trim().toLowerCase();
-  if (trimmedTimeValue.endsWith("ms")) {
-    const msVal = parseFloat(trimmedTimeValue.replace(/ms$/, ""));
+  if (trimmedTimeValue.endsWith('ms')) {
+    const msVal = parseFloat(trimmedTimeValue.replace(/ms$/, ''));
     return Number.isFinite(msVal) ? msVal : 0;
   }
-  if (trimmedTimeValue.endsWith("s")) {
-    const sVal = parseFloat(trimmedTimeValue.replace(/s$/, ""));
+  if (trimmedTimeValue.endsWith('s')) {
+    const sVal = parseFloat(trimmedTimeValue.replace(/s$/, ''));
     return Number.isFinite(sVal) ? sVal * 1000 : 0;
   }
   return 0;

package/lib/native/stylex.d.ts

@@ -8,6 +8,7 @@
  */
 
 import { type SpreadOptions } from './SpreadOptions';
+import type { StyleX$CreateTheme, StyleX$DefineVars } from '../StyleXTypes';
 /**
  * The create method shim should do initial transforms like
  * renaming/expanding/validating properties, essentially all the steps
@@ -20,21 +21,30 @@ export declare function create<S extends { [$$Key$$: string]: {} }>(
 export declare const firstThatWorks: <T extends string | number>(
   ...values: ReadonlyArray<T>
 ) => T;
-export declare function keyframes(): void;
+type Keyframes = {
+  readonly [key: string]: { readonly [k: string]: string | number };
+};
+export declare function keyframes(k: Keyframes): Keyframes;
 /**
  * The spread method shim
  */
 
-export declare function spread(
+export declare function props(
   style: null | undefined | { [key: string]: unknown },
   options: SpreadOptions,
 ): { [$$Key$$: string]: {} };
-export type IStyleX = {
+export declare const __customProperties: { [$$Key$$: string]: unknown };
+export declare const defineVars: StyleX$DefineVars;
+export declare const createTheme: any;
+export type IStyleX = Readonly<{
   create: typeof create;
   firstThatWorks: typeof firstThatWorks;
   keyframes: typeof keyframes;
-  spread: typeof spread;
-};
+  props: typeof props;
+  defineVars: StyleX$DefineVars;
+  createTheme: StyleX$CreateTheme;
+  __customProperties?: { [$$Key$$: string]: unknown };
+}>;
 export declare const stylex: IStyleX;
 declare const $$EXPORT_DEFAULT_DECLARATION$$: IStyleX;
 export default $$EXPORT_DEFAULT_DECLARATION$$;

package/lib/native/stylex.js

@@ -3,10 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.__customProperties = void 0;
 exports.create = create;
-exports.firstThatWorks = exports.default = void 0;
+exports.firstThatWorks = exports.defineVars = exports.default = exports.createTheme = void 0;
 exports.keyframes = keyframes;
-exports.spread = spread;
+exports.props = props;
 exports.stylex = void 0;
 var _CSSCustomPropertyValue = require("./CSSCustomPropertyValue");
 var _CSSLengthUnitValue = require("./CSSLengthUnitValue");
@@ -16,36 +17,36 @@ var _fixContentBox = require("./fixContentBox");
 var _flattenStyle = require("./flattenStyle");
 var _parseShadow = require("./parseShadow");
 var _parseTimeValue = require("./parseTimeValue");
-const stylePropertyAllowlistSet = new Set(["alignContent", "alignItems", "alignSelf", "animationDelay", "animationDuration", "aspectRatio", "backfaceVisibility", "backgroundColor", "borderBottomColor", "borderBottomLeftRadius", "borderBottomRightRadius", "borderBottomStyle", "borderBottomWidth", "borderColor", "borderLeftColor", "borderLeftStyle", "borderLeftWidth", "borderRadius", "borderRightColor", "borderRightStyle", "borderRightWidth", "borderStyle", "borderTopColor", "borderTopLeftRadius", "borderTopRightRadius", "borderTopStyle", "borderTopWidth", "borderWidth", "bottom", "boxSizing", "color", "direction", "display", "end", "flex", "flexBasis", "flexDirection", "flexGrow", "flexShrink", "flexWrap", "fontFamily", "fontSize", "fontStyle", "fontWeight", "fontVariant", "gap", "gapColumn", "gapRow", "height", "justifyContent", "left", "letterSpacing", "lineHeight", "margin", "marginBottom", "marginLeft", "marginRight", "marginTop", "maxHeight", "maxWidth", "minHeight", "minWidth", "objectFit", "opacity", "overflow", "padding", "paddingBottom", "paddingLeft", "paddingRight", "paddingTop", "pointerEvents", "position", "resizeMode", "right", "shadowColor", "shadowOffset", "shadowOpacity", "shadowRadius", "shadowWidth", "start", "textAlign", "textDecorationLine", "textDecorationColor", "textDecorationStyle", "textShadowColor", "textShadowOffset", "textShadowRadius", "textTransform", "tintColor", "transform", "transitionDelay", "transitionDuration", "top", "userSelect", "verticalAlign", "width", "zIndex"]);
+const stylePropertyAllowlistSet = new Set(['alignContent', 'alignItems', 'alignSelf', 'animationDelay', 'animationDuration', 'aspectRatio', 'backfaceVisibility', 'backgroundColor', 'borderBottomColor', 'borderBottomLeftRadius', 'borderBottomRightRadius', 'borderBottomStyle', 'borderBottomWidth', 'borderColor', 'borderLeftColor', 'borderLeftStyle', 'borderLeftWidth', 'borderRadius', 'borderRightColor', 'borderRightStyle', 'borderRightWidth', 'borderStyle', 'borderTopColor', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderTopStyle', 'borderTopWidth', 'borderWidth', 'bottom', 'boxSizing', 'color', 'direction', 'display', 'end', 'flex', 'flexBasis', 'flexDirection', 'flexGrow', 'flexShrink', 'flexWrap', 'fontFamily', 'fontSize', 'fontStyle', 'fontWeight', 'fontVariant', 'gap', 'gapColumn', 'gapRow', 'height', 'justifyContent', 'left', 'letterSpacing', 'lineHeight', 'margin', 'marginBottom', 'marginLeft', 'marginRight', 'marginTop', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'objectFit', 'opacity', 'overflow', 'padding', 'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop', 'pointerEvents', 'position', 'resizeMode', 'right', 'shadowColor', 'shadowOffset', 'shadowOpacity', 'shadowRadius', 'shadowWidth', 'start', 'textAlign', 'textDecorationLine', 'textDecorationColor', 'textDecorationStyle', 'textShadowColor', 'textShadowOffset', 'textShadowRadius', 'textTransform', 'tintColor', 'transform', 'transitionDelay', 'transitionDuration', 'top', 'userSelect', 'verticalAlign', 'width', 'zIndex']);
 function isReactNativeStyleProp(propName) {
-  return stylePropertyAllowlistSet.has(propName) || propName.startsWith("--");
+  return stylePropertyAllowlistSet.has(propName) || propName.startsWith('--');
 }
 function isReactNativeStyleValue(propValue) {
-  if (typeof propValue === "string") {
-    if (propValue === "inherit") {
+  if (typeof propValue === 'string') {
+    if (propValue === 'inherit') {
       return false;
     }
-    if (propValue === "initial") {
+    if (propValue === 'initial') {
       return false;
     }
-    if (propValue.endsWith("px")) {
+    if (propValue.endsWith('px')) {
       return false;
     }
-    if (propValue.includes("calc(")) {
+    if (propValue.includes('calc(')) {
       return false;
     }
   }
   return true;
 }
 function preprocessPropertyValue(propValue) {
-  if (typeof propValue === "string") {
+  if (typeof propValue === 'string') {
     const customPropValue = (0, _CSSCustomPropertyValue.createCSSCustomPropertyValue)(propValue);
     if (customPropValue != null) {
       return customPropValue;
     }
     const maybeLengthUnitValue = _CSSLengthUnitValue.CSSLengthUnitValue.parse(propValue);
     if (maybeLengthUnitValue != null) {
-      return maybeLengthUnitValue[1] === "px" ? maybeLengthUnitValue[0] : new _CSSLengthUnitValue.CSSLengthUnitValue(...maybeLengthUnitValue);
+      return maybeLengthUnitValue[1] === 'px' ? maybeLengthUnitValue[0] : new _CSSLengthUnitValue.CSSLengthUnitValue(...maybeLengthUnitValue);
     }
   }
   return propValue;
@@ -54,17 +55,17 @@ function preprocessCreate(style) {
   const processedStyle = {};
   for (const propName in style) {
     const styleValue = style[propName];
-    if (_CSSMediaQuery.CSSMediaQuery.isMediaQueryString(propName) && typeof styleValue === "object" && styleValue != null) {
+    if (_CSSMediaQuery.CSSMediaQuery.isMediaQueryString(propName) && typeof styleValue === 'object' && styleValue != null) {
       const processsedSubStyle = preprocessCreate({
         ...styleValue
       });
       processedStyle[propName] = new _CSSMediaQuery.CSSMediaQuery(propName, processsedSubStyle);
       continue;
     }
-    if (propName === "boxShadow" && typeof styleValue === "string") {
+    if (propName === 'boxShadow' && typeof styleValue === 'string') {
       const parsedShadow = (0, _parseShadow.parseShadow)(styleValue);
       if (parsedShadow.length > 1) {
-        (0, _errorMsg.warnMsg)("Multiple \"boxShadow\" values are not supported in React Native.");
+        (0, _errorMsg.warnMsg)('Multiple "boxShadow" values are not supported in React Native.');
       }
       const {
         inset,
@@ -74,7 +75,7 @@ function preprocessCreate(style) {
         color
       } = parsedShadow[0];
       if (inset) {
-        (0, _errorMsg.warnMsg)("\"boxShadow\" value of \"inset\" is not supported in React Native.");
+        (0, _errorMsg.warnMsg)('"boxShadow" value of "inset" is not supported in React Native.');
       }
       processedStyle.shadowColor = color;
       processedStyle.shadowOffset = {
@@ -83,10 +84,10 @@ function preprocessCreate(style) {
       };
       processedStyle.shadowOpacity = 1;
       processedStyle.shadowRadius = blurRadius;
-    } else if (propName === "textShadow" && typeof styleValue === "string") {
+    } else if (propName === 'textShadow' && typeof styleValue === 'string') {
       const parsedShadow = (0, _parseShadow.parseShadow)(styleValue);
       if (parsedShadow.length > 1) {
-        (0, _errorMsg.warnMsg)("Multiple \"textShadow\" values are not supported in React Native.");
+        (0, _errorMsg.warnMsg)('Multiple "textShadow" values are not supported in React Native.');
       }
       const {
         offsetX,
@@ -106,9 +107,9 @@ function preprocessCreate(style) {
   }
   for (const prop in processedStyle) {
     let value = processedStyle[prop];
-    if (prop === "lineHeight") {
-      if (typeof value === "number" || typeof value === "string" && _CSSLengthUnitValue.CSSLengthUnitValue.parse(value) == null) {
-        value = value + "em";
+    if (prop === 'lineHeight') {
+      if (typeof value === 'number' || typeof value === 'string' && _CSSLengthUnitValue.CSSLengthUnitValue.parse(value) == null) {
+        value = value + 'em';
       }
     }
     const processedStyleValue = preprocessPropertyValue(value);
@@ -118,6 +119,13 @@ function preprocessCreate(style) {
 }
 function finalizeValue(unfinalizedValue, options) {
   let styleValue = unfinalizedValue;
+  if (typeof styleValue === 'object' && styleValue != null && Object.hasOwn(styleValue, 'default')) {
+    if (options.hover === true && Object.hasOwn(styleValue, ':hover')) {
+      styleValue = styleValue[':hover'];
+    } else {
+      styleValue = styleValue.default;
+    }
+  }
   while (styleValue instanceof _CSSCustomPropertyValue.CSSCustomPropertyValue) {
     const customProperties = options.customProperties || {};
     const resolvedValue = customProperties[styleValue.name] ?? styleValue.defaultValue;
@@ -143,11 +151,12 @@ const firstThatWorks = function () {
   return arguments.length <= 0 ? undefined : arguments[0];
 };
 exports.firstThatWorks = firstThatWorks;
-function keyframes() {
-  (0, _errorMsg.errorMsg)("keyframes are not supported in React Native.");
+function keyframes(k) {
+  (0, _errorMsg.errorMsg)('keyframes are not supported in React Native.');
+  return k;
 }
-const timeValuedProperties = ["animationDelay", "animationDuration", "transitionDelay", "transitionDuration"];
-function spread(style, options) {
+const timeValuedProperties = ['animationDelay', 'animationDuration', 'transitionDelay', 'transitionDuration'];
+function props(style, options) {
   let {
     lineClamp,
     ...flatStyle
@@ -180,110 +189,110 @@ function spread(style, options) {
       continue;
     }
     if (!isReactNativeStyleProp(styleProp) && passthroughProperties.indexOf(styleProp) === -1) {
-      if (styleProp === "blockSize") {
+      if (styleProp === 'blockSize') {
         flatStyle.height = flatStyle.height ?? styleValue;
-      } else if (styleProp === "inlineSize") {
+      } else if (styleProp === 'inlineSize') {
         flatStyle.width = flatStyle.width ?? styleValue;
-      } else if (styleProp === "maxBlockSize") {
+      } else if (styleProp === 'maxBlockSize') {
         flatStyle.maxHeight = flatStyle.maxHeight ?? styleValue;
-      } else if (styleProp === "minBlockSize") {
+      } else if (styleProp === 'minBlockSize') {
         flatStyle.minHeight = flatStyle.minHeight ?? styleValue;
-      } else if (styleProp === "maxInlineSize") {
+      } else if (styleProp === 'maxInlineSize') {
         flatStyle.maxWidth = flatStyle.maxWidth ?? styleValue;
-      } else if (styleProp === "minInlineSize") {
+      } else if (styleProp === 'minInlineSize') {
         flatStyle.minWidth = flatStyle.minWidth ?? styleValue;
-      } else if (styleProp === "borderBlockColor") {
+      } else if (styleProp === 'borderBlockColor') {
         flatStyle.borderTopColor = flatStyle.borderTopColor ?? styleValue;
         flatStyle.borderBottomColor = flatStyle.borderBottomColor ?? styleValue;
-      } else if (styleProp === "borderBlockStyle") {
+      } else if (styleProp === 'borderBlockStyle') {
         flatStyle.borderTopStyle = flatStyle.borderTopStyle ?? styleValue;
         flatStyle.borderBottomStyle = flatStyle.borderBottomStyle ?? styleValue;
-      } else if (styleProp === "borderBlockWidth") {
+      } else if (styleProp === 'borderBlockWidth') {
         flatStyle.borderTopWidth = flatStyle.borderTopWidth ?? styleValue;
         flatStyle.borderBottomWidth = flatStyle.borderBottomWidth ?? styleValue;
-      } else if (styleProp === "borderBlockEndColor") {
+      } else if (styleProp === 'borderBlockEndColor') {
         flatStyle.borderBottomColor = prevStyle.borderBottomColor ?? styleValue;
-      } else if (styleProp === "borderBlockEndStyle") {
+      } else if (styleProp === 'borderBlockEndStyle') {
         flatStyle.borderBottomStyle = prevStyle.borderBottomStyle ?? styleValue;
-      } else if (styleProp === "borderBlockEndWidth") {
+      } else if (styleProp === 'borderBlockEndWidth') {
         flatStyle.borderBottomWidth = prevStyle.borderBottomWidth ?? styleValue;
-      } else if (styleProp === "borderBlockStartColor") {
+      } else if (styleProp === 'borderBlockStartColor') {
         flatStyle.borderTopColor = prevStyle.borderTopColor ?? styleValue;
-      } else if (styleProp === "borderBlockStartStyle") {
+      } else if (styleProp === 'borderBlockStartStyle') {
         flatStyle.borderTopStyle = prevStyle.borderTopStyle ?? styleValue;
-      } else if (styleProp === "borderBlockStartWidth") {
+      } else if (styleProp === 'borderBlockStartWidth') {
         flatStyle.borderTopWidth = prevStyle.borderTopWidth ?? styleValue;
-      } else if (styleProp === "borderInlineColor") {
+      } else if (styleProp === 'borderInlineColor') {
         flatStyle.borderStartColor = flatStyle.borderStartColor ?? styleValue;
         flatStyle.borderEndColor = flatStyle.borderEndColor ?? styleValue;
-      } else if (styleProp === "borderInlineStyle") {
+      } else if (styleProp === 'borderInlineStyle') {
         flatStyle.borderStartStyle = flatStyle.borderStartStyle ?? styleValue;
         flatStyle.borderEndStyle = flatStyle.borderEndStyle ?? styleValue;
-      } else if (styleProp === "borderInlineWidth") {
+      } else if (styleProp === 'borderInlineWidth') {
         flatStyle.borderStartWidth = flatStyle.borderStartWidth ?? styleValue;
         flatStyle.borderEndWidth = flatStyle.borderEndWidth ?? styleValue;
-      } else if (styleProp === "borderInlineEndColor") {
+      } else if (styleProp === 'borderInlineEndColor') {
         flatStyle.borderEndColor = styleValue;
-      } else if (styleProp === "borderInlineEndStyle") {
+      } else if (styleProp === 'borderInlineEndStyle') {
         flatStyle.borderEndStyle = styleValue;
-      } else if (styleProp === "borderInlineEndWidth") {
+      } else if (styleProp === 'borderInlineEndWidth') {
         flatStyle.borderEndWidth = styleValue;
-      } else if (styleProp === "borderInlineStartColor") {
+      } else if (styleProp === 'borderInlineStartColor') {
         flatStyle.borderStartColor = styleValue;
-      } else if (styleProp === "borderInlineStartStyle") {
+      } else if (styleProp === 'borderInlineStartStyle') {
         flatStyle.borderStartStyle = styleValue;
-      } else if (styleProp === "borderInlineStartWidth") {
+      } else if (styleProp === 'borderInlineStartWidth') {
         flatStyle.borderStartWidth = styleValue;
-      } else if (styleProp === "borderStartStartRadius") {
+      } else if (styleProp === 'borderStartStartRadius') {
         flatStyle.borderTopStartRadius = styleValue;
-      } else if (styleProp === "borderEndStartRadius") {
+      } else if (styleProp === 'borderEndStartRadius') {
         flatStyle.borderBottomStartRadius = styleValue;
-      } else if (styleProp === "borderStartEndRadius") {
+      } else if (styleProp === 'borderStartEndRadius') {
         flatStyle.borderTopEndRadius = styleValue;
-      } else if (styleProp === "borderEndEndRadius") {
+      } else if (styleProp === 'borderEndEndRadius') {
         flatStyle.borderBottomEndRadius = styleValue;
-      } else if (styleProp === "inset") {
+      } else if (styleProp === 'inset') {
         flatStyle.top = flatStyle.top ?? styleValue;
         flatStyle.start = flatStyle.start ?? styleValue;
         flatStyle.end = flatStyle.end ?? styleValue;
         flatStyle.bottom = flatStyle.bottom ?? styleValue;
-      } else if (styleProp === "insetBlock") {
+      } else if (styleProp === 'insetBlock') {
         flatStyle.top = flatStyle.top ?? styleValue;
         flatStyle.bottom = flatStyle.bottom ?? styleValue;
-      } else if (styleProp === "insetBlockEnd") {
+      } else if (styleProp === 'insetBlockEnd') {
         flatStyle.bottom = prevStyle.bottom ?? styleValue;
-      } else if (styleProp === "insetBlockStart") {
+      } else if (styleProp === 'insetBlockStart') {
         flatStyle.top = prevStyle.top ?? styleValue;
-      } else if (styleProp === "insetInline") {
+      } else if (styleProp === 'insetInline') {
         flatStyle.end = flatStyle.end ?? styleValue;
         flatStyle.start = flatStyle.start ?? styleValue;
-      } else if (styleProp === "insetInlineEnd") {
+      } else if (styleProp === 'insetInlineEnd') {
         flatStyle.end = prevStyle.end ?? styleValue;
-      } else if (styleProp === "insetInlineStart") {
+      } else if (styleProp === 'insetInlineStart') {
         flatStyle.start = prevStyle.start ?? styleValue;
-      } else if (styleProp === "marginBlock") {
+      } else if (styleProp === 'marginBlock') {
         flatStyle.marginVertical = styleValue;
-      } else if (styleProp === "marginBlockStart") {
+      } else if (styleProp === 'marginBlockStart') {
         flatStyle.marginTop = flatStyle.marginTop ?? styleValue;
-      } else if (styleProp === "marginBlockEnd") {
+      } else if (styleProp === 'marginBlockEnd') {
         flatStyle.marginBottom = flatStyle.marginBottom ?? styleValue;
-      } else if (styleProp === "marginInline") {
+      } else if (styleProp === 'marginInline') {
         flatStyle.marginHorizontal = styleValue;
-      } else if (styleProp === "marginInlineStart") {
+      } else if (styleProp === 'marginInlineStart') {
         flatStyle.marginStart = styleValue;
-      } else if (styleProp === "marginInlineEnd") {
+      } else if (styleProp === 'marginInlineEnd') {
         flatStyle.marginEnd = styleValue;
-      } else if (styleProp === "paddingBlock") {
+      } else if (styleProp === 'paddingBlock') {
         flatStyle.paddingVertical = styleValue;
-      } else if (styleProp === "paddingBlockStart") {
+      } else if (styleProp === 'paddingBlockStart') {
         flatStyle.paddingTop = flatStyle.paddingTop ?? styleValue;
-      } else if (styleProp === "paddingBlockEnd") {
+      } else if (styleProp === 'paddingBlockEnd') {
         flatStyle.paddingBottom = flatStyle.paddingBottom ?? styleValue;
-      } else if (styleProp === "paddingInline") {
+      } else if (styleProp === 'paddingInline') {
         flatStyle.paddingHorizontal = styleValue;
-      } else if (styleProp === "paddingInlineStart") {
+      } else if (styleProp === 'paddingInlineStart') {
         flatStyle.paddingStart = styleValue;
-      } else if (styleProp === "paddingInlineEnd") {
+      } else if (styleProp === 'paddingInlineEnd') {
         flatStyle.paddingEnd = styleValue;
       } else {
         (0, _errorMsg.warnMsg)(`Ignoring unsupported style property "${styleProp}"`);
@@ -304,31 +313,31 @@ function spread(style, options) {
       height: viewportHeight,
       direction: writingDirection
     });
-    if (flatStyle.borderStyle === "none") {
+    if (flatStyle.borderStyle === 'none') {
       flatStyle.borderWidth = 0;
       delete flatStyle.borderStyle;
     }
-    if (typeof flatStyle.fontWeight === "number") {
+    if (typeof flatStyle.fontWeight === 'number') {
       flatStyle.fontWeight = flatStyle.fontWeight.toString();
     }
     const boxSizingValue = flatStyle.boxSizing;
-    if (boxSizingValue === "content-box") {
+    if (boxSizingValue === 'content-box') {
       flatStyle = (0, _fixContentBox.fixContentBox)(flatStyle);
     }
     delete flatStyle.boxSizing;
     const positionValue = flatStyle.position;
-    if (positionValue === "fixed") {
-      flatStyle.position = "absolute";
-      (0, _errorMsg.warnMsg)("\"position\" value of \"fixed\" is not supported in React Native. Falling back to \"absolute\".");
-    } else if (positionValue === "static") {
-      flatStyle.position = "relative";
-      (0, _errorMsg.warnMsg)("\"position\" value of \"static\" is not supported in React Native. Falling back to \"relative\".");
-    } else if (positionValue === "sticky") {
-      flatStyle.position = "relative";
-      (0, _errorMsg.warnMsg)("\"position\" value of \"sticky\" is not supported in React Native. Falling back to \"relative\".");
+    if (positionValue === 'fixed') {
+      flatStyle.position = 'absolute';
+      (0, _errorMsg.warnMsg)('"position" value of "fixed" is not supported in React Native. Falling back to "absolute".');
+    } else if (positionValue === 'static') {
+      flatStyle.position = 'relative';
+      (0, _errorMsg.warnMsg)('"position" value of "static" is not supported in React Native. Falling back to "relative".');
+    } else if (positionValue === 'sticky') {
+      flatStyle.position = 'relative';
+      (0, _errorMsg.warnMsg)('"position" value of "sticky" is not supported in React Native. Falling back to "relative".');
     }
     for (const timeValuedProperty of timeValuedProperties) {
-      if (typeof flatStyle[timeValuedProperty] === "string") {
+      if (typeof flatStyle[timeValuedProperty] === 'string') {
         flatStyle[timeValuedProperty] = (0, _parseTimeValue.parseTimeValue)(flatStyle[timeValuedProperty]);
       }
     }
@@ -339,12 +348,34 @@ function spread(style, options) {
   }
   return nativeProps;
 }
-const stylex = {
+const __customProperties = exports.__customProperties = {};
+let count = 1;
+const defineVars = tokens => {
+  const result = {};
+  for (const key in tokens) {
+    const value = tokens[key];
+    result[key] = `var(--${key}-${count++})`;
+    __customProperties[result[key]] = value;
+  }
+  return result;
+};
+exports.defineVars = defineVars;
+const createTheme = (baseTokens, overrides) => {
+  const result = {};
+  for (const key in baseTokens) {
+    const varName = baseTokens[key];
+    result[varName] = overrides[key];
+  }
+  return result;
+};
+exports.createTheme = createTheme;
+const stylex = exports.stylex = {
   create,
   firstThatWorks,
   keyframes,
-  spread
+  props,
+  defineVars,
+  createTheme,
+  __customProperties
 };
-exports.stylex = stylex;
-var _default = stylex;
-exports.default = _default;
+var _default = exports.default = stylex;

package/lib/native/stylex.js.flow

@@ -8,6 +8,7 @@
  */
 
 import { type SpreadOptions } from './SpreadOptions';
+import type { StyleX$CreateTheme, StyleX$DefineVars } from '../StyleXTypes';
 
 /**
  * The create method shim should do initial transforms like
@@ -23,23 +24,36 @@ declare export const firstThatWorks: <T: string | number>(
   ...values: $ReadOnlyArray<T>
 ) => T;
 
-declare export function keyframes(): void;
+type Keyframes = {
+  +[key: string]: { +[k: string]: string | number },
+};
+
+declare export function keyframes(k: Keyframes): Keyframes;
 
 /**
  * The spread method shim
  */
 
-declare export function spread(
+declare export function props(
   style: ?{ [key: string]: mixed },
   options: SpreadOptions,
 ): { [string]: { ... } };
 
-export type IStyleX = {
+declare export const __customProperties: { [string]: mixed };
+
+declare export const defineVars: StyleX$DefineVars;
+
+declare export const createTheme: $FlowFixMe;
+
+export type IStyleX = $ReadOnly<{
   create: typeof create,
   firstThatWorks: typeof firstThatWorks,
   keyframes: typeof keyframes,
-  spread: typeof spread,
-};
+  props: typeof props,
+  defineVars: StyleX$DefineVars,
+  createTheme: StyleX$CreateTheme,
+  __customProperties?: { [string]: mixed },
+}>;
 
 declare export const stylex: IStyleX;