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

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("--");
 }
@@ -41,9 +42,9 @@ function preprocessPropertyValue(propValue) {
     if ((0, _CSSCustomPropertyValue.isCustomPropertyValue)(propValue)) {
       return new _CSSCustomPropertyValue.CSSCustomPropertyValue(propValue);
     }
-    const maybeViewportValue = _CSSLengthUnitValue.CSSLengthUnitValue.parse(propValue);
-    if (maybeViewportValue != null) {
-      return maybeViewportValue;
+    const maybeLengthUnitValue = _CSSLengthUnitValue.CSSLengthUnitValue.parse(propValue);
+    if (maybeLengthUnitValue != null) {
+      return new _CSSLengthUnitValue.CSSLengthUnitValue(...maybeLengthUnitValue);
     }
   }
   return propValue;
@@ -59,12 +60,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 +73,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 +82,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,24 +99,18 @@ 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;
@@ -163,6 +144,9 @@ function spread(style, _ref) {
     lineClamp,
     ...flatStyle
   } = (0, _flattenStyle.flattenStyle)(style);
+  let prevStyle = {
+    ...flatStyle
+  };
   const nativeProps = {};
   for (const styleProp in flatStyle) {
     let styleValue = flatStyle[styleProp];
@@ -190,12 +174,119 @@ function spread(style, _ref) {
       styleValue = resolvedValue;
     }
     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 +302,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/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;

package/lib/stylex.js.flow

@@ -44,6 +44,56 @@ declare export const unstable_overrideVars: StyleX$OverrideVars;
 
 declare export const include: Stylex$Include;
 
+type ValueWithDefault<+T> =
+  | T
+  | $ReadOnly<{
+      +default: T,
+      +[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: string | number> {
+  +value: ValueWithDefault<T>;
+  +syntax: CSSSyntaxType;
+}
+
+declare export const types: {
+  angle: <T: number | string>(_v: ValueWithDefault<T>) => ICSSType<T>,
+  color: <T: number | string>(_v: ValueWithDefault<T>) => ICSSType<T>,
+  url: <T: number | string>(_v: ValueWithDefault<T>) => ICSSType<T>,
+  image: <T: number | string>(_v: ValueWithDefault<T>) => ICSSType<T>,
+  integer: <T: number | string>(_v: ValueWithDefault<T>) => ICSSType<T>,
+  lengthPercentage: <T: number | string>(
+    _v: ValueWithDefault<T>,
+  ) => ICSSType<T>,
+  length: <T: number | string>(_v: ValueWithDefault<T>) => ICSSType<T>,
+  percentage: <T: number | string>(_v: ValueWithDefault<T>) => ICSSType<T>,
+  number: <T: number | string>(_v: ValueWithDefault<T>) => ICSSType<T>,
+  resolution: <T: number | string>(_v: ValueWithDefault<T>) => ICSSType<T>,
+  time: <T: number | string>(_v: ValueWithDefault<T>) => ICSSType<T>,
+  transformFunction: <T: number | string>(
+    _v: ValueWithDefault<T>,
+  ) => ICSSType<T>,
+  transformList: <T: number | string>(_v: ValueWithDefault<T>) => ICSSType<T>,
+};
 declare export const keyframes: (_keyframes: Keyframes) => string;
 
 declare export const firstThatWorks: <T: string | number>(
@@ -71,6 +121,7 @@ type IStyleX = {
   unstable_createVars: StyleX$CreateVars,
   unstable_overrideVars: StyleX$OverrideVars,
   include: Stylex$Include,
+  types: typeof types,
   firstThatWorks: <T: string | number>(
     ...v: $ReadOnlyArray<T>
   ) => $ReadOnlyArray<T>,
@@ -80,6 +131,5 @@ type IStyleX = {
   ...
 };
 
-declare export default IStyleX;
-
 declare export const stylex: IStyleX;
+declare export default IStyleX;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/stylex",
-  "version": "0.2.0-beta.19",
+  "version": "0.2.0-beta.20",
   "description": "A library for defining styles for optimized user interfaces.",
   "main": "lib/stylex.js",
   "react-native": "lib/native/stylex.js",
@@ -10,7 +10,7 @@
   "scripts": {
     "prebuild": "gen-types -i src/ -o lib/",
     "build": "babel src/ --out-dir lib/ --copy-files",
-    "build-haste": "HASTE=true babel src/ --out-dir lib/ --copy-files",
+    "build-haste": "rewrite-imports -i src/ -o lib/",
     "test": "jest"
   },
   "dependencies": {
@@ -20,7 +20,7 @@
     "utility-types": "^3.10.0"
   },
   "devDependencies": {
-    "@stylexjs/scripts": "0.2.0-beta.19"
+    "@stylexjs/scripts": "0.2.0-beta.20"
   },
   "jest": {},
   "files": [