@stylexjs/stylex 0.2.0-beta.16 → 0.2.0-beta.18

package/lib/native/errorMsg.js

@@ -5,15 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.errorMsg = errorMsg;
 exports.warnMsg = warnMsg;
-/**
- * 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.
- *
- * 
- */
-
 function errorMsg(msg) {
   console.error(`stylex: ${msg}`);
 }

package/lib/native/flattenStyle.js

@@ -4,15 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.flattenStyle = flattenStyle;
-/**
- * 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.
- *
- * 
- */
-
 function flattenStyle() {
   for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
     styles[_key] = arguments[_key];
@@ -21,8 +12,7 @@ function flattenStyle() {
   const result = {};
   for (let i = 0; i < flatArray.length; i++) {
     const style = flatArray[i];
-    if (style != null && typeof style === 'object') {
-      // $FlowFixMe
+    if (style != null && typeof style === "object") {
       Object.assign(result, style);
     }
   }

package/lib/native/parseShadow.js

@@ -4,32 +4,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.parseShadow = parseShadow;
-/**
- * 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.
- *
- * 
- */
-
 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.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+
+type Milliseconds = number;
+export declare function parseTimeValue(timeValue: string): Milliseconds;

package/lib/native/parseTimeValue.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.parseTimeValue = parseTimeValue;
+function parseTimeValue(timeValue) {
+  const trimmedTimeValue = timeValue.trim().toLowerCase();
+  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$/, ""));
+    return Number.isFinite(sVal) ? sVal * 1000 : 0;
+  }
+  return 0;
+}

package/lib/native/parseTimeValue.js.flow

@@ -0,0 +1,12 @@
+/**
+ * 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 Milliseconds = number;
+
+declare export function parseTimeValue(timeValue: string): Milliseconds;

package/lib/native/stylex.d.ts

@@ -14,9 +14,9 @@
  * compile-time in the future).
  */
 export declare function create<S extends { [$$Key$$: string]: {} }>(
-  styles: S
+  styles: S,
 ): { [$$Key$$: string]: {} };
-export declare var firstThatWorks: <T extends string | number>(
+export declare const firstThatWorks: <T extends string | number>(
   ...values: ReadonlyArray<T>
 ) => T;
 export declare function keyframes(): void;
@@ -37,7 +37,7 @@ type SpreadOptions = {
 };
 export declare function spread(
   style: null | undefined | { [key: string]: unknown },
-  $$PARAM_1$$: SpreadOptions
+  $$PARAM_1$$: SpreadOptions,
 ): { [$$Key$$: string]: {} };
 export type IStyleX = {
   create: typeof create;
@@ -45,5 +45,6 @@ export type IStyleX = {
   keyframes: typeof keyframes;
   spread: typeof spread;
 };
-export declare var stylex: IStyleX;
-export default stylex;
+export declare const stylex: IStyleX;
+declare const $$EXPORT_DEFAULT_DECLARATION$$: IStyleX;
+export default $$EXPORT_DEFAULT_DECLARATION$$;

package/lib/native/stylex.js

@@ -14,58 +14,30 @@ var _CSSMediaQuery = require("./CSSMediaQuery");
 var _errorMsg = require("./errorMsg");
 var _flattenStyle = require("./flattenStyle");
 var _parseShadow = require("./parseShadow");
-/**
- * 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.
- *
- * 
- */
-
-const stylePropertyAllowlistSet = new Set(['alignContent', 'alignItems', 'alignSelf', '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',
-// 'includeFontPadding', Android Only
-'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',
-// iOS Only
-'textDecorationStyle',
-// iOS Only
-'textShadowColor', 'textShadowOffset', 'textShadowRadius', 'textTransform', 'tintColor', 'transform', 'top', 'userSelect', 'verticalAlign',
-// Android Only
-'width',
-// 'writingDirection', // iOS Only
-'zIndex']);
+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"]);
 function isReactNativeStyleProp(propName) {
-  return stylePropertyAllowlistSet.has(propName) || propName.startsWith('--');
+  return stylePropertyAllowlistSet.has(propName) || propName.startsWith("--");
 }
 function isReactNativeStyleValue(propValue) {
-  if (typeof propValue === 'string') {
-    // RN doesn't have an inherit keyword
-    if (propValue === 'inherit') {
+  if (typeof propValue === "string") {
+    if (propValue === "inherit") {
       return false;
     }
-    // RN doesn't have an inherit keyword
-    if (propValue === 'initial') {
+    if (propValue === "initial") {
       return false;
     }
-    //if (propValue.endsWith('em')) {
-    //  return false;
-    //}
-    //if (propValue.endsWith('rem')) {
-    //  return false;
-    //}
-    // RN on android doesn't like explicitly specified px units
-    if (propValue.endsWith('px')) {
+    if (propValue.endsWith("px")) {
       return false;
     }
-    // RN doesn't support calc functions
-    if (propValue.includes('calc(')) {
+    if (propValue.includes("calc(")) {
       return false;
     }
   }
   return true;
 }
 function preprocessPropertyValue(propValue) {
-  if (typeof propValue === 'string') {
+  if (typeof propValue === "string") {
     if ((0, _CSSCustomPropertyValue.isCustomPropertyValue)(propValue)) {
       return new _CSSCustomPropertyValue.CSSCustomPropertyValue(propValue);
     }
@@ -77,26 +49,22 @@ function preprocessPropertyValue(propValue) {
   return propValue;
 }
 function preprocessCreate(style) {
-  // eslint-disable-next-line flowtype/no-flow-fix-me-comments
   const processedStyle = {};
   for (const propName in style) {
     const styleValue = style[propName];
-    if (_CSSMediaQuery.CSSMediaQuery.isMediaQueryString(propName) && typeof styleValue === 'object' && styleValue != null) {
-      // have to spread styleValue into a copied object to appease flow
+    if (_CSSMediaQuery.CSSMediaQuery.isMediaQueryString(propName) && typeof styleValue === "object" && styleValue != null) {
       const processsedSubStyle = preprocessCreate({
         ...styleValue
       });
       processedStyle[propName] = new _CSSMediaQuery.CSSMediaQuery(propName, processsedSubStyle);
       continue;
     }
-    if (propName === 'backgroundImage') {
-      (0, _errorMsg.errorMsg)('"backgroundImage" is not supported in React Native.');
-    }
-    // React Native only supports non-standard box-shadow styles
-    else if (propName === 'boxShadow' && typeof styleValue === 'string') {
+    if (propName === "backgroundImage") {
+      (0, _errorMsg.errorMsg)("\"backgroundImage\" is not supported in React Native.");
+    } else 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.errorMsg)("Multiple \"boxShadow\" values are not supported in React Native.");
       }
       const {
         inset,
@@ -105,10 +73,8 @@ function preprocessCreate(style) {
         blurRadius,
         color
       } = parsedShadow[0];
-      // TODO: parse alpha color inputs => alpha + color
-      // errorMsg('"boxShadow" opacity is not implemented in React Native.');
       if (inset) {
-        (0, _errorMsg.errorMsg)('"boxShadow" value of "inset" is not supported in React Native.');
+        (0, _errorMsg.errorMsg)("\"boxShadow\" value of \"inset\" is not supported in React Native.");
       }
       processedStyle.shadowColor = color;
       processedStyle.shadowOffset = {
@@ -117,27 +83,22 @@ function preprocessCreate(style) {
       };
       processedStyle.shadowOpacity = 1;
       processedStyle.shadowRadius = blurRadius;
-    }
-    // Needed by React Native for Desktop
-    else if (propName === 'fontWeight' && typeof styleValue === 'number') {
-      // $FlowFixMe
+    } 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 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;
       }
-    }
-    // React Native only supports non-standard text-shadow styles
-    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.errorMsg)('Multiple "textShadow" values are not supported in React Native.');
+        (0, _errorMsg.errorMsg)("Multiple \"textShadow\" values are not supported in React Native.");
       }
       const {
         offsetX,
@@ -151,37 +112,28 @@ function preprocessCreate(style) {
         width: offsetX
       };
       processedStyle.textShadowRadius = blurRadius;
-    } else if (propName === 'marginHorizontal') {
-      (0, _errorMsg.warnMsg)('"marginHorizontal" is deprecated. Use "marginInline".');
+    } 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".');
+    } 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".');
+    } 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".');
+    } else if (propName === "paddingVertical") {
+      (0, _errorMsg.warnMsg)("\"paddingVertical\" is deprecated. Use \"paddingBlock\".");
       processedStyle.paddingBlock = styleValue;
     } else {
       processedStyle[propName] = styleValue;
     }
   }
-
-  // Process values that need to be resolved during render
   for (const prop in processedStyle) {
     const processedStyleValue = preprocessPropertyValue(processedStyle[prop]);
     processedStyle[prop] = processedStyleValue;
   }
   return processedStyle;
 }
-
-/**
- * The create method shim should do initial transforms like
- * renaming/expanding/validating properties, essentially all the steps
- * which can be done at initialization-time (could potentially be done at
- * compile-time in the future).
- */
 function create(styles) {
   const result = {};
   for (const styleName in styles) {
@@ -194,13 +146,9 @@ const firstThatWorks = function () {
 };
 exports.firstThatWorks = firstThatWorks;
 function keyframes() {
-  (0, _errorMsg.errorMsg)('keyframes are not supported in React Native.');
+  (0, _errorMsg.errorMsg)("keyframes are not supported in React Native.");
 }
-
-/**
- * The spread method shim
- */
-
+const timeValuedProperties = ["animationDelay", "animationDuration", "transitionDelay", "transitionDuration"];
 function spread(style, _ref) {
   let {
     customProperties = {},
@@ -211,18 +159,13 @@ function spread(style, _ref) {
     viewportWidth,
     writingDirection
   } = _ref;
-  /* eslint-disable prefer-const */
   let {
     lineClamp,
     ...flatStyle
   } = (0, _flattenStyle.flattenStyle)(style);
-  /* eslint-enable prefer-const */
-
   const nativeProps = {};
   for (const styleProp in flatStyle) {
     let styleValue = flatStyle[styleProp];
-
-    // resolve media queries
     if (styleValue instanceof _CSSMediaQuery.CSSMediaQuery) {
       const maybeExistingMediaQuery = flatStyle[styleProp];
       if (maybeExistingMediaQuery instanceof _CSSMediaQuery.CSSMediaQuery) {
@@ -233,7 +176,6 @@ function spread(style, _ref) {
         continue;
       }
     }
-    // resolve custom property references
     if (styleValue instanceof _CSSCustomPropertyValue.CSSCustomPropertyValue) {
       const resolvedValue = customProperties[styleValue.name];
       if (resolvedValue == null) {
@@ -243,26 +185,15 @@ function spread(style, _ref) {
       }
       styleValue = resolvedValue;
     }
-    // resolve viewport units
     if (styleValue instanceof _CSSLengthUnitValue.CSSLengthUnitValue) {
       const resolvedValue = styleValue.resolvePixelValue(viewportWidth, viewportHeight, fontScale, inheritedFontSize);
       styleValue = resolvedValue;
     }
-
-    // Filter out any unexpected style property names so RN doesn't crash but give
-    // the developer a warning to let them know that there's a new prop we should either
-    // explicitly ignore or process in some way.
-    // NOTE: Any kind of prop name transformations should happen before this check.
     if (!isReactNativeStyleProp(styleProp) && passthroughProperties.indexOf(styleProp) === -1) {
       (0, _errorMsg.errorMsg)(`Encountered unsupported style property "${styleProp}"`);
       delete flatStyle[styleProp];
       continue;
     }
-
-    // Similar filter to the prop name one above but instead operates on the property's
-    // value. Similarly, any sort of prop value transformations should happen before this
-    // filter.
-    // We check this at resolve time to ensure the render-time styles are safe.
     if (!isReactNativeStyleValue(styleValue)) {
       (0, _errorMsg.errorMsg)(`Encounted unsupported style value "${String(styleValue)}" for property "${styleProp}"`);
       delete flatStyle[styleProp];
@@ -276,11 +207,34 @@ function spread(style, _ref) {
       height: viewportHeight,
       direction: writingDirection
     });
-    // $FlowFixMe
+    if (flatStyle.borderStyle === "none") {
+      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 (flatStyle.borderStartEndRadius != null) {
+      flatStyle.borderTopEndRadius = flatStyle.borderStartEndRadius;
+      delete flatStyle.borderStartEndRadius;
+    }
+    if (flatStyle.borderEndEndRadius != null) {
+      flatStyle.borderBottomEndRadius = flatStyle.borderEndEndRadius;
+      delete flatStyle.borderEndEndRadius;
+    }
+    for (const timeValuedProperty of timeValuedProperties) {
+      if (typeof flatStyle[timeValuedProperty] === "string") {
+        flatStyle[timeValuedProperty] = (0, _parseTimeValue.parseTimeValue)(flatStyle[timeValuedProperty]);
+      }
+    }
     nativeProps.style = flatStyle;
   }
   if (lineClamp != null) {
-    // $FlowFixMe
     nativeProps.numberOfLines = lineClamp;
   }
   return nativeProps;

package/lib/native/stylex.js.flow

@@ -17,7 +17,7 @@ declare export function create<S: { [string]: { ... } }>(styles: S): {
   [string]: { ... },
 };
 
-declare export var firstThatWorks: <T: string | number>(
+declare export const firstThatWorks: <T: string | number>(
   ...values: $ReadOnlyArray<T>
 ) => T;
 
@@ -38,7 +38,7 @@ type SpreadOptions = {|
 
 declare export function spread(
   style: ?{ [key: string]: mixed },
-  SpreadOptions
+  SpreadOptions,
 ): { [string]: { ... } };
 
 export type IStyleX = {
@@ -48,6 +48,6 @@ export type IStyleX = {
   spread: typeof spread,
 };
 
-declare export var stylex: IStyleX;
+declare export const stylex: IStyleX;
 
-declare export default stylex;
+declare export default IStyleX;

package/lib/stylex-inject.d.ts

@@ -10,6 +10,6 @@
 declare function inject(
   ltrRule: string,
   priority: number,
-  rtlRule: null | undefined | string
+  rtlRule: null | undefined | string,
 ): void;
 export default inject;

package/lib/stylex-inject.js

@@ -5,15 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = inject;
 var _StyleXSheet = require("./StyleXSheet");
-/**
- * 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.
- *
- * 
- */
-
 function inject(ltrRule, priority) {
   let rtlRule = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
   _StyleXSheet.styleSheet.insert(ltrRule, priority, rtlRule);

package/lib/stylex-inject.js.flow

@@ -10,5 +10,5 @@
 declare export default function inject(
   ltrRule: string,
   priority: number,
-  rtlRule: ?string
+  rtlRule: ?string,
 ): void;

package/lib/stylex.d.ts

@@ -10,62 +10,60 @@
 import type {
   Keyframes,
   Stylex$Create,
-  Stylex$CreateVars,
-  Stylex$OverrideVars,
+  StyleX$CreateVars,
+  StyleX$OverrideVars,
   StyleXArray,
   MapNamespace,
+  CompiledStyles,
 } from './StyleXTypes';
+export type { Theme, Variant } from './StyleXTypes';
 import injectStyle from './stylex-inject';
-type DedupeStyles = Readonly<{
-  $$css: true;
-  [key: string]: string | Readonly<{ [key: string]: string }>;
-}>;
 export declare function spread(
   styles: StyleXArray<
-    | (null | undefined | DedupeStyles)
+    | (null | undefined | CompiledStyles)
     | boolean
     | Readonly<{ $$css?: void; [$$Key$$: string]: string | number }>
   >,
-  _options?: {}
+  _options?: {},
 ): Readonly<{
   className: string;
   style: Readonly<{ $$css?: void; [$$Key$$: string]: string | number }>;
 }>;
 type Stylex$Include = <
-  TStyles extends { readonly [$$Key$$: string]: string | number }
+  TStyles extends { readonly [$$Key$$: string]: string | number },
 >(
-  _styles: MapNamespace<TStyles>
+  _styles: MapNamespace<TStyles>,
 ) => TStyles;
-export declare var create: Stylex$Create;
-export declare var unstable_createVars: Stylex$CreateVars;
-export declare var unstable_overrideVars: Stylex$OverrideVars;
-export declare var include: Stylex$Include;
-export declare var keyframes: (_keyframes: Keyframes) => string;
-export declare var firstThatWorks: <T extends string | number>(
+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;
+export declare const keyframes: (_keyframes: Keyframes) => string;
+export declare const firstThatWorks: <T extends string | number>(
   ..._styles: ReadonlyArray<T>
 ) => ReadonlyArray<T>;
-export declare var inject: typeof injectStyle;
-export declare var UNSUPPORTED_PROPERTY: <T>(_props: T) => T;
+export declare const inject: typeof injectStyle;
+export declare const UNSUPPORTED_PROPERTY: <T>(_props: T) => T;
 type IStyleX = {
   (
     ...styles: ReadonlyArray<
-      StyleXArray<(null | undefined | DedupeStyles) | boolean>
+      StyleXArray<(null | undefined | CompiledStyles) | boolean>
     >
   ): string;
   spread: (
     styles: StyleXArray<
-      | (null | undefined | DedupeStyles)
+      | (null | undefined | CompiledStyles)
       | boolean
       | Readonly<{ $$css?: void; [$$Key$$: string]: string | number }>
     >,
-    _options?: {}
+    _options?: {},
   ) => Readonly<{
     className: string;
     style: Readonly<{ $$css?: void; [$$Key$$: string]: string | number }>;
   }>;
   create: Stylex$Create;
-  unstable_createVars: Stylex$CreateVars;
-  unstable_overrideVars: Stylex$OverrideVars;
+  unstable_createVars: StyleX$CreateVars;
+  unstable_overrideVars: StyleX$OverrideVars;
   include: Stylex$Include;
   firstThatWorks: <T extends string | number>(
     ...v: ReadonlyArray<T>
@@ -73,11 +71,11 @@ type IStyleX = {
   inject: (
     ltrRule: string,
     priority: number,
-    rtlRule: null | undefined | string
+    rtlRule: null | undefined | string,
   ) => void;
   keyframes: (keyframes: Keyframes) => string;
   UNSUPPORTED_PROPERTY: <T>(props: T) => T;
 };
 declare const $$EXPORT_DEFAULT_DECLARATION$$: IStyleX;
 export default $$EXPORT_DEFAULT_DECLARATION$$;
-export declare var stylex: IStyleX;
+export declare const stylex: IStyleX;