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

package/lib/native/fixContentBox.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fixContentBox = fixContentBox;
+var _errorMsg = require("./errorMsg");
+const TOP = 0;
+const RIGHT = 1;
+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]]];
+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") {
+      for (const direction of directions) {
+        border[direction] = flatStyle[styleProp];
+      }
+    }
+  }
+  for (const [styleProp, directions] of paddingMapping) {
+    if (typeof flatStyle[styleProp] === "number") {
+      for (const direction of directions) {
+        padding[direction] = flatStyle[styleProp];
+      }
+    }
+  }
+  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 nextStyle = {};
+  for (const styleProp of Object.keys(flatStyle)) {
+    const correction = correctionMapping.get(styleProp);
+    const styleValue = flatStyle[styleProp];
+    if (correction != null) {
+      if (styleValue == null) {
+        nextStyle[styleProp] = null;
+        continue;
+      }
+      if (styleValue === "auto") {
+        nextStyle[styleProp] = styleValue;
+        continue;
+      }
+      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;
+      }
+      nextStyle[styleProp] = styleValue + correction;
+    } else {
+      nextStyle[styleProp] = styleValue;
+    }
+  }
+  return nextStyle;
+}

package/lib/native/fixContentBox.js.flow

@@ -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.
+ *
+ * @flow strict
+ */
+
+type FlatStyle = { [key: string]: mixed };
+declare export function fixContentBox(flatStyle: FlatStyle): FlatStyle;

package/lib/native/stylex.d.ts

@@ -7,6 +7,7 @@
  *
  */
 
+import { type SpreadOptions } from './SpreadOptions';
 /**
  * The create method shim should do initial transforms like
  * renaming/expanding/validating properties, essentially all the steps
@@ -23,21 +24,10 @@ export declare function keyframes(): void;
 /**
  * The spread method shim
  */
-/**
- * The spread method shim
- */
-type SpreadOptions = {
-  customProperties: {};
-  inheritedFontSize: null | undefined | number;
-  fontScale: number | void;
-  passthroughProperties: Array<string>;
-  viewportHeight: number;
-  viewportWidth: number;
-  writingDirection: 'ltr' | 'rtl';
-};
+
 export declare function spread(
   style: null | undefined | { [key: string]: unknown },
-  $$PARAM_1$$: SpreadOptions,
+  options: SpreadOptions,
 ): { [$$Key$$: string]: {} };
 export type IStyleX = {
   create: typeof create;

package/lib/native/stylex.js

@@ -12,10 +12,11 @@ var _CSSCustomPropertyValue = require("./CSSCustomPropertyValue");
 var _CSSLengthUnitValue = require("./CSSLengthUnitValue");
 var _CSSMediaQuery = require("./CSSMediaQuery");
 var _errorMsg = require("./errorMsg");
+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", "borderBlockColor", "borderBlockStyle", "borderBlockWidth", "borderBlockEndColor", "borderBlockEndStyle", "borderBlockEndWidth", "borderBlockStartColor", "borderBlockStartStyle", "borderBlockStartWidth", "borderBottomColor", "borderBottomLeftRadius", "borderBottomRightRadius", "borderBottomStyle", "borderBottomWidth", "borderEndEndRadius", "borderEndStartRadius", "borderColor", "borderInlineColor", "borderInlineStyle", "borderInlineWidth", "borderInlineEndColor", "borderInlineEndStyle", "borderInlineEndWidth", "borderInlineStartColor", "borderInlineStartStyle", "borderInlineStartWidth", "borderEndColor", "borderEndStyle", "borderEndWidth", "borderStartColor", "borderStartStyle", "borderStartWidth", "borderLeftColor", "borderLeftStyle", "borderLeftWidth", "borderRadius", "borderRightColor", "borderRightStyle", "borderRightWidth", "borderStartEndRadius", "borderStartStartRadius", "borderStyle", "borderTopColor", "borderTopLeftRadius", "borderTopRightRadius", "borderTopStyle", "borderTopWidth", "borderWidth", "bottom", "color", "direction", "display", "end", "flex", "flexBasis", "flexDirection", "flexGrow", "flexShrink", "flexWrap", "fontFamily", "fontSize", "fontStyle", "fontWeight", "fontVariant", "gap", "gapColumn", "gapRow", "height", "inset", "insetBlock", "insetBlockEnd", "insetBlockStart", "insetInline", "insetInlineEnd", "insetInlineStart", "justifyContent", "left", "letterSpacing", "lineHeight", "margin", "marginBlock", "marginBlockEnd", "marginBlockStart", "marginBottom", "marginEnd", "marginInline", "marginInlineEnd", "marginInlineStart", "marginLeft", "marginRight", "marginStart", "marginTop", "maxHeight", "maxWidth", "minHeight", "minWidth", "objectFit", "opacity", "overflow", "padding", "paddingBlock", "paddingBlockEnd", "paddingBlockStart", "paddingBottom", "paddingEnd", "paddingInline", "paddingInlineEnd", "paddingInlineStart", "paddingLeft", "paddingRight", "paddingStart", "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("--");
 }
@@ -38,12 +39,13 @@ function isReactNativeStyleValue(propValue) {
 }
 function preprocessPropertyValue(propValue) {
   if (typeof propValue === "string") {
-    if ((0, _CSSCustomPropertyValue.isCustomPropertyValue)(propValue)) {
-      return new _CSSCustomPropertyValue.CSSCustomPropertyValue(propValue);
+    const customPropValue = (0, _CSSCustomPropertyValue.createCSSCustomPropertyValue)(propValue);
+    if (customPropValue != null) {
+      return customPropValue;
     }
-    const maybeViewportValue = _CSSLengthUnitValue.CSSLengthUnitValue.parse(propValue);
-    if (maybeViewportValue != null) {
-      return maybeViewportValue;
+    const maybeLengthUnitValue = _CSSLengthUnitValue.CSSLengthUnitValue.parse(propValue);
+    if (maybeLengthUnitValue != null) {
+      return maybeLengthUnitValue[1] === "px" ? maybeLengthUnitValue[0] : new _CSSLengthUnitValue.CSSLengthUnitValue(...maybeLengthUnitValue);
     }
   }
   return propValue;
@@ -59,12 +61,10 @@ function preprocessCreate(style) {
       processedStyle[propName] = new _CSSMediaQuery.CSSMediaQuery(propName, processsedSubStyle);
       continue;
     }
-    if (propName === "backgroundImage") {
-      (0, _errorMsg.errorMsg)("\"backgroundImage\" is not supported in React Native.");
-    } else if (propName === "boxShadow" && typeof styleValue === "string") {
+    if (propName === "boxShadow" && typeof styleValue === "string") {
       const parsedShadow = (0, _parseShadow.parseShadow)(styleValue);
       if (parsedShadow.length > 1) {
-        (0, _errorMsg.errorMsg)("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 +74,7 @@ function preprocessCreate(style) {
         color
       } = parsedShadow[0];
       if (inset) {
-        (0, _errorMsg.errorMsg)("\"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,22 +83,10 @@ function preprocessCreate(style) {
       };
       processedStyle.shadowOpacity = 1;
       processedStyle.shadowRadius = blurRadius;
-    } else if (propName === "fontWeight" && typeof styleValue === "number") {
-      processedStyle[propName] = styleValue.toString();
-    } else if (propName === "position") {
-      if (styleValue === "fixed") {
-        processedStyle[propName] = "absolute";
-        (0, _errorMsg.errorMsg)("\"position\" value of \"fixed\" is not supported in React Native. Falling back to \"absolute\".");
-      } else if (styleValue === "sticky") {
-        processedStyle[propName] = "relative";
-        (0, _errorMsg.errorMsg)("\"position\" value of \"sticky\" is not supported in React Native. Falling back to \"relative\".");
-      } else {
-        processedStyle[propName] = styleValue;
-      }
     } else if (propName === "textShadow" && typeof styleValue === "string") {
       const parsedShadow = (0, _parseShadow.parseShadow)(styleValue);
       if (parsedShadow.length > 1) {
-        (0, _errorMsg.errorMsg)("Multiple \"textShadow\" values are not supported in React Native.");
+        (0, _errorMsg.warnMsg)("Multiple \"textShadow\" values are not supported in React Native.");
       }
       const {
         offsetX,
@@ -112,28 +100,38 @@ function preprocessCreate(style) {
         width: offsetX
       };
       processedStyle.textShadowRadius = blurRadius;
-    } else if (propName === "marginHorizontal") {
-      (0, _errorMsg.warnMsg)("\"marginHorizontal\" is deprecated. Use \"marginInline\".");
-      processedStyle.marginInline = styleValue;
-    } else if (propName === "marginVertical") {
-      (0, _errorMsg.warnMsg)("\"marginVertical\" is deprecated. Use \"marginBlock\".");
-      processedStyle.marginBlock = styleValue;
-    } else if (propName === "paddingHorizontal") {
-      (0, _errorMsg.warnMsg)("\"paddingHorizontal\" is deprecated. Use \"paddingInline\".");
-      processedStyle.paddingInline = styleValue;
-    } else if (propName === "paddingVertical") {
-      (0, _errorMsg.warnMsg)("\"paddingVertical\" is deprecated. Use \"paddingBlock\".");
-      processedStyle.paddingBlock = styleValue;
     } else {
       processedStyle[propName] = styleValue;
     }
   }
   for (const prop in processedStyle) {
-    const processedStyleValue = preprocessPropertyValue(processedStyle[prop]);
+    let value = processedStyle[prop];
+    if (prop === "lineHeight") {
+      if (typeof value === "number" || typeof value === "string" && _CSSLengthUnitValue.CSSLengthUnitValue.parse(value) == null) {
+        value = value + "em";
+      }
+    }
+    const processedStyleValue = preprocessPropertyValue(value);
     processedStyle[prop] = processedStyleValue;
   }
   return processedStyle;
 }
+function finalizeValue(unfinalizedValue, options) {
+  let styleValue = unfinalizedValue;
+  while (styleValue instanceof _CSSCustomPropertyValue.CSSCustomPropertyValue) {
+    const customProperties = options.customProperties || {};
+    const resolvedValue = customProperties[styleValue.name] ?? styleValue.defaultValue;
+    if (resolvedValue == null) {
+      (0, _errorMsg.errorMsg)(`Unrecognized custom property "--${styleValue.name}"`);
+      return null;
+    }
+    styleValue = preprocessPropertyValue(resolvedValue);
+  }
+  if (styleValue instanceof _CSSLengthUnitValue.CSSLengthUnitValue) {
+    styleValue = styleValue.resolvePixelValue(options);
+  }
+  return styleValue;
+}
 function create(styles) {
   const result = {};
   for (const styleName in styles) {
@@ -149,20 +147,20 @@ function keyframes() {
   (0, _errorMsg.errorMsg)("keyframes are not supported in React Native.");
 }
 const timeValuedProperties = ["animationDelay", "animationDuration", "transitionDelay", "transitionDuration"];
-function spread(style, _ref) {
+function spread(style, options) {
   let {
-    customProperties = {},
-    inheritedFontSize,
-    fontScale = 1,
+    lineClamp,
+    ...flatStyle
+  } = (0, _flattenStyle.flattenStyle)(style);
+  let prevStyle = {
+    ...flatStyle
+  };
+  const {
     passthroughProperties = [],
     viewportHeight,
     viewportWidth,
     writingDirection
-  } = _ref;
-  let {
-    lineClamp,
-    ...flatStyle
-  } = (0, _flattenStyle.flattenStyle)(style);
+  } = options;
   const nativeProps = {};
   for (const styleProp in flatStyle) {
     let styleValue = flatStyle[styleProp];
@@ -176,26 +174,125 @@ function spread(style, _ref) {
         continue;
       }
     }
-    if (styleValue instanceof _CSSCustomPropertyValue.CSSCustomPropertyValue) {
-      const resolvedValue = customProperties[styleValue.name];
-      if (resolvedValue == null) {
-        (0, _errorMsg.errorMsg)(`Unrecognized custom property "--${styleValue.name}"`);
-        delete flatStyle[styleProp];
-        continue;
-      }
-      styleValue = resolvedValue;
-    }
-    if (styleValue instanceof _CSSLengthUnitValue.CSSLengthUnitValue) {
-      const resolvedValue = styleValue.resolvePixelValue(viewportWidth, viewportHeight, fontScale, inheritedFontSize);
-      styleValue = resolvedValue;
+    styleValue = finalizeValue(styleValue, options);
+    if (styleValue == null) {
+      delete flatStyle[styleProp];
+      continue;
     }
     if (!isReactNativeStyleProp(styleProp) && passthroughProperties.indexOf(styleProp) === -1) {
-      (0, _errorMsg.errorMsg)(`Encountered unsupported style property "${styleProp}"`);
+      if (styleProp === "blockSize") {
+        flatStyle.height = flatStyle.height ?? styleValue;
+      } else if (styleProp === "inlineSize") {
+        flatStyle.width = flatStyle.width ?? styleValue;
+      } else if (styleProp === "maxBlockSize") {
+        flatStyle.maxHeight = flatStyle.maxHeight ?? styleValue;
+      } else if (styleProp === "minBlockSize") {
+        flatStyle.minHeight = flatStyle.minHeight ?? styleValue;
+      } else if (styleProp === "maxInlineSize") {
+        flatStyle.maxWidth = flatStyle.maxWidth ?? styleValue;
+      } else if (styleProp === "minInlineSize") {
+        flatStyle.minWidth = flatStyle.minWidth ?? styleValue;
+      } else if (styleProp === "borderBlockColor") {
+        flatStyle.borderTopColor = flatStyle.borderTopColor ?? styleValue;
+        flatStyle.borderBottomColor = flatStyle.borderBottomColor ?? styleValue;
+      } else if (styleProp === "borderBlockStyle") {
+        flatStyle.borderTopStyle = flatStyle.borderTopStyle ?? styleValue;
+        flatStyle.borderBottomStyle = flatStyle.borderBottomStyle ?? styleValue;
+      } else if (styleProp === "borderBlockWidth") {
+        flatStyle.borderTopWidth = flatStyle.borderTopWidth ?? styleValue;
+        flatStyle.borderBottomWidth = flatStyle.borderBottomWidth ?? styleValue;
+      } else if (styleProp === "borderBlockEndColor") {
+        flatStyle.borderBottomColor = prevStyle.borderBottomColor ?? styleValue;
+      } else if (styleProp === "borderBlockEndStyle") {
+        flatStyle.borderBottomStyle = prevStyle.borderBottomStyle ?? styleValue;
+      } else if (styleProp === "borderBlockEndWidth") {
+        flatStyle.borderBottomWidth = prevStyle.borderBottomWidth ?? styleValue;
+      } else if (styleProp === "borderBlockStartColor") {
+        flatStyle.borderTopColor = prevStyle.borderTopColor ?? styleValue;
+      } else if (styleProp === "borderBlockStartStyle") {
+        flatStyle.borderTopStyle = prevStyle.borderTopStyle ?? styleValue;
+      } else if (styleProp === "borderBlockStartWidth") {
+        flatStyle.borderTopWidth = prevStyle.borderTopWidth ?? styleValue;
+      } else if (styleProp === "borderInlineColor") {
+        flatStyle.borderStartColor = flatStyle.borderStartColor ?? styleValue;
+        flatStyle.borderEndColor = flatStyle.borderEndColor ?? styleValue;
+      } else if (styleProp === "borderInlineStyle") {
+        flatStyle.borderStartStyle = flatStyle.borderStartStyle ?? styleValue;
+        flatStyle.borderEndStyle = flatStyle.borderEndStyle ?? styleValue;
+      } else if (styleProp === "borderInlineWidth") {
+        flatStyle.borderStartWidth = flatStyle.borderStartWidth ?? styleValue;
+        flatStyle.borderEndWidth = flatStyle.borderEndWidth ?? styleValue;
+      } else if (styleProp === "borderInlineEndColor") {
+        flatStyle.borderEndColor = styleValue;
+      } else if (styleProp === "borderInlineEndStyle") {
+        flatStyle.borderEndStyle = styleValue;
+      } else if (styleProp === "borderInlineEndWidth") {
+        flatStyle.borderEndWidth = styleValue;
+      } else if (styleProp === "borderInlineStartColor") {
+        flatStyle.borderStartColor = styleValue;
+      } else if (styleProp === "borderInlineStartStyle") {
+        flatStyle.borderStartStyle = styleValue;
+      } else if (styleProp === "borderInlineStartWidth") {
+        flatStyle.borderStartWidth = styleValue;
+      } else if (styleProp === "borderStartStartRadius") {
+        flatStyle.borderTopStartRadius = styleValue;
+      } else if (styleProp === "borderEndStartRadius") {
+        flatStyle.borderBottomStartRadius = styleValue;
+      } else if (styleProp === "borderStartEndRadius") {
+        flatStyle.borderTopEndRadius = styleValue;
+      } else if (styleProp === "borderEndEndRadius") {
+        flatStyle.borderBottomEndRadius = styleValue;
+      } 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") {
+        flatStyle.top = flatStyle.top ?? styleValue;
+        flatStyle.bottom = flatStyle.bottom ?? styleValue;
+      } else if (styleProp === "insetBlockEnd") {
+        flatStyle.bottom = prevStyle.bottom ?? styleValue;
+      } else if (styleProp === "insetBlockStart") {
+        flatStyle.top = prevStyle.top ?? styleValue;
+      } else if (styleProp === "insetInline") {
+        flatStyle.end = flatStyle.end ?? styleValue;
+        flatStyle.start = flatStyle.start ?? styleValue;
+      } else if (styleProp === "insetInlineEnd") {
+        flatStyle.end = prevStyle.end ?? styleValue;
+      } else if (styleProp === "insetInlineStart") {
+        flatStyle.start = prevStyle.start ?? styleValue;
+      } else if (styleProp === "marginBlock") {
+        flatStyle.marginVertical = styleValue;
+      } else if (styleProp === "marginBlockStart") {
+        flatStyle.marginTop = flatStyle.marginTop ?? styleValue;
+      } else if (styleProp === "marginBlockEnd") {
+        flatStyle.marginBottom = flatStyle.marginBottom ?? styleValue;
+      } else if (styleProp === "marginInline") {
+        flatStyle.marginHorizontal = styleValue;
+      } else if (styleProp === "marginInlineStart") {
+        flatStyle.marginStart = styleValue;
+      } else if (styleProp === "marginInlineEnd") {
+        flatStyle.marginEnd = styleValue;
+      } else if (styleProp === "paddingBlock") {
+        flatStyle.paddingVertical = styleValue;
+      } else if (styleProp === "paddingBlockStart") {
+        flatStyle.paddingTop = flatStyle.paddingTop ?? styleValue;
+      } else if (styleProp === "paddingBlockEnd") {
+        flatStyle.paddingBottom = flatStyle.paddingBottom ?? styleValue;
+      } else if (styleProp === "paddingInline") {
+        flatStyle.paddingHorizontal = styleValue;
+      } else if (styleProp === "paddingInlineStart") {
+        flatStyle.paddingStart = styleValue;
+      } else if (styleProp === "paddingInlineEnd") {
+        flatStyle.paddingEnd = styleValue;
+      } else {
+        (0, _errorMsg.warnMsg)(`Ignoring unsupported style property "${styleProp}"`);
+      }
       delete flatStyle[styleProp];
       continue;
     }
     if (!isReactNativeStyleValue(styleValue)) {
-      (0, _errorMsg.errorMsg)(`Encounted unsupported style value "${String(styleValue)}" for property "${styleProp}"`);
+      (0, _errorMsg.warnMsg)(`Ignoring unsupported style value "${String(styleValue)}" for property "${styleProp}"`);
       delete flatStyle[styleProp];
       continue;
     }
@@ -211,21 +308,24 @@ function spread(style, _ref) {
       flatStyle.borderWidth = 0;
       delete flatStyle.borderStyle;
     }
-    if (flatStyle.borderStartStartRadius != null) {
-      flatStyle.borderTopStartRadius = flatStyle.borderStartStartRadius;
-      delete flatStyle.borderStartStartRadius;
-    }
-    if (flatStyle.borderEndStartRadius != null) {
-      flatStyle.borderBottomStartRadius = flatStyle.borderEndStartRadius;
-      delete flatStyle.borderEndStartRadius;
+    if (typeof flatStyle.fontWeight === "number") {
+      flatStyle.fontWeight = flatStyle.fontWeight.toString();
     }
-    if (flatStyle.borderStartEndRadius != null) {
-      flatStyle.borderTopEndRadius = flatStyle.borderStartEndRadius;
-      delete flatStyle.borderStartEndRadius;
+    const boxSizingValue = flatStyle.boxSizing;
+    if (boxSizingValue === "content-box") {
+      flatStyle = (0, _fixContentBox.fixContentBox)(flatStyle);
     }
-    if (flatStyle.borderEndEndRadius != null) {
-      flatStyle.borderBottomEndRadius = flatStyle.borderEndEndRadius;
-      delete flatStyle.borderEndEndRadius;
+    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\".");
     }
     for (const timeValuedProperty of timeValuedProperties) {
       if (typeof flatStyle[timeValuedProperty] === "string") {

package/lib/native/stylex.js.flow

@@ -7,6 +7,8 @@
  * @flow strict
  */
 
+import { type SpreadOptions } from './SpreadOptions';
+
 /**
  * The create method shim should do initial transforms like
  * renaming/expanding/validating properties, essentially all the steps
@@ -26,19 +28,10 @@ declare export function keyframes(): void;
 /**
  * The spread method shim
  */
-type SpreadOptions = {|
-  customProperties: {},
-  inheritedFontSize: ?number,
-  fontScale: number | void,
-  passthroughProperties: Array<string>,
-  viewportHeight: number,
-  viewportWidth: number,
-  writingDirection: 'ltr' | 'rtl',
-|};
 
 declare export function spread(
   style: ?{ [key: string]: mixed },
-  SpreadOptions,
+  options: SpreadOptions,
 ): { [string]: { ... } };
 
 export type IStyleX = {

package/lib/stylex.d.ts

@@ -38,6 +38,58 @@ export declare const create: Stylex$Create;
 export declare const unstable_createVars: StyleX$CreateVars;
 export declare const unstable_overrideVars: StyleX$OverrideVars;
 export declare const include: Stylex$Include;
+type ValueWithDefault<T> =
+  | T
+  | Readonly<{
+      readonly default: T;
+      readonly [$$Key$$: string]: ValueWithDefault<T>;
+    }>;
+type CSSSyntax =
+  | '*'
+  | '<length>'
+  | '<number>'
+  | '<percentage>'
+  | '<length-percentage>'
+  | '<color>'
+  | '<image>'
+  | '<url>'
+  | '<integer>'
+  | '<angle>'
+  | '<time>'
+  | '<resolution>'
+  | '<transform-function>'
+  | '<custom-ident>'
+  | '<transform-list>';
+type CSSSyntaxType = CSSSyntax | ReadonlyArray<CSSSyntax>;
+interface ICSSType<T extends string | number> {
+  readonly value: ValueWithDefault<T>;
+  readonly syntax: CSSSyntaxType;
+}
+export declare const types: {
+  angle: <T extends number | string>(_v: ValueWithDefault<T>) => ICSSType<T>;
+  color: <T extends number | string>(_v: ValueWithDefault<T>) => ICSSType<T>;
+  url: <T extends number | string>(_v: ValueWithDefault<T>) => ICSSType<T>;
+  image: <T extends number | string>(_v: ValueWithDefault<T>) => ICSSType<T>;
+  integer: <T extends number | string>(_v: ValueWithDefault<T>) => ICSSType<T>;
+  lengthPercentage: <T extends number | string>(
+    _v: ValueWithDefault<T>,
+  ) => ICSSType<T>;
+  length: <T extends number | string>(_v: ValueWithDefault<T>) => ICSSType<T>;
+  percentage: <T extends number | string>(
+    _v: ValueWithDefault<T>,
+  ) => ICSSType<T>;
+  number: <T extends number | string>(_v: ValueWithDefault<T>) => ICSSType<T>;
+  resolution: <T extends number | string>(
+    _v: ValueWithDefault<T>,
+  ) => ICSSType<T>;
+  time: <T extends number | string>(_v: ValueWithDefault<T>) => ICSSType<T>;
+  transformFunction: <T extends number | string>(
+    _v: ValueWithDefault<T>,
+  ) => ICSSType<T>;
+  transformList: <T extends number | string>(
+    _v: ValueWithDefault<T>,
+  ) => ICSSType<T>;
+};
 export declare const keyframes: (_keyframes: Keyframes) => string;
 export declare const firstThatWorks: <T extends string | number>(
   ..._styles: ReadonlyArray<T>
@@ -65,6 +117,7 @@ type IStyleX = {
   unstable_createVars: StyleX$CreateVars;
   unstable_overrideVars: StyleX$OverrideVars;
   include: Stylex$Include;
+  types: typeof types;
   firstThatWorks: <T extends string | number>(
     ...v: ReadonlyArray<T>
   ) => ReadonlyArray<T>;
@@ -76,6 +129,6 @@ type IStyleX = {
   keyframes: (keyframes: Keyframes) => string;
   UNSUPPORTED_PROPERTY: <T>(props: T) => T;
 };
+export declare const stylex: IStyleX;
 declare const $$EXPORT_DEFAULT_DECLARATION$$: IStyleX;
 export default $$EXPORT_DEFAULT_DECLARATION$$;
-export declare const stylex: IStyleX;

package/lib/stylex.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.keyframes = exports.inject = exports.include = exports.firstThatWorks = exports.default = exports.create = exports.UNSUPPORTED_PROPERTY = void 0;
 exports.spread = spread;
-exports.unstable_overrideVars = exports.unstable_createVars = exports.stylex = void 0;
+exports.unstable_overrideVars = exports.unstable_createVars = exports.types = exports.stylex = void 0;
 var _stylexInject = _interopRequireDefault(require("./stylex-inject"));
 var _styleq = require("styleq");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -36,6 +36,49 @@ const unstable_overrideVars = stylexOverrideVars;
 exports.unstable_overrideVars = unstable_overrideVars;
 const include = stylexIncludes;
 exports.include = include;
+const types = {
+  angle: _v => {
+    throw new Error(errorForType("angle"));
+  },
+  color: _v => {
+    throw new Error(errorForType("color"));
+  },
+  url: _v => {
+    throw new Error(errorForType("url"));
+  },
+  image: _v => {
+    throw new Error(errorForType("image"));
+  },
+  integer: _v => {
+    throw new Error(errorForType("integer"));
+  },
+  lengthPercentage: _v => {
+    throw new Error(errorForType("lengthPercentage"));
+  },
+  length: _v => {
+    throw new Error(errorForType("length"));
+  },
+  percentage: _v => {
+    throw new Error(errorForType("percentage"));
+  },
+  number: _v => {
+    throw new Error(errorForType("number"));
+  },
+  resolution: _v => {
+    throw new Error(errorForType("resolution"));
+  },
+  time: _v => {
+    throw new Error(errorForType("time"));
+  },
+  transformFunction: _v => {
+    throw new Error(errorForType("transformFunction"));
+  },
+  transformList: _v => {
+    throw new Error(errorForType("transformList"));
+  }
+};
+exports.types = types;
+const errorForType = type => `stylex.types.${type} should be compiled away by @stylexjs/babel-plugin`;
 const keyframes = _keyframes => {
   throw new Error("stylex.keyframes should never be called");
 };
@@ -66,7 +109,8 @@ _stylex.keyframes = keyframes;
 _stylex.firstThatWorks = firstThatWorks;
 _stylex.inject = inject;
 _stylex.UNSUPPORTED_PROPERTY = UNSUPPORTED_PROPERTY;
-var _default = _stylex;
-exports.default = _default;
+_stylex.types = types;
 const stylex = _stylex;
-exports.stylex = stylex;
+exports.stylex = stylex;
+var _default = _stylex;
+exports.default = _default;