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

package/lib/StyleXCSSTypes.d.ts

@@ -858,6 +858,7 @@ export type CSSProperties = Readonly<{
   WebkitAppearance?: null | appearance;
   WebkitFontSmoothing?: null | 'antialiased';
   WebkitTapHighlightColor?: null | color;
+  aspectRatio?: null | number | string;
   alignContent?: null | alignContent;
   alignItems?: null | alignItems;
   alignSelf?: null | alignSelf;

package/lib/StyleXCSSTypes.js.flow

@@ -878,6 +878,7 @@ export type CSSProperties = $ReadOnly<{
   WebkitTapHighlightColor?: null | color,
   // ENDOF ...$Exact<SupportedVendorSpecificCSSProperties>,
 
+  aspectRatio?: null | number | string,
   alignContent?: null | alignContent,
   alignItems?: null | alignItems,
   alignSelf?: null | alignSelf,

package/lib/native/SpreadOptions.d.ts

@@ -7,7 +7,7 @@
  *
  */
 
-export type SpreadOptions = {
+export type SpreadOptions = Readonly<{
   customProperties: {};
   inheritedFontSize: null | undefined | number;
   fontScale: number | void;
@@ -16,4 +16,4 @@ export type SpreadOptions = {
   viewportHeight: number;
   viewportWidth: number;
   writingDirection: 'ltr' | 'rtl';
-};
+}>;

package/lib/native/SpreadOptions.js.flow

@@ -7,7 +7,7 @@
  * @flow strict
  */
 
-export type SpreadOptions = {|
+export type SpreadOptions = $ReadOnly<{
   customProperties: {},
   inheritedFontSize: ?number,
   fontScale: number | void,
@@ -16,4 +16,4 @@ export type SpreadOptions = {|
   viewportHeight: number,
   viewportWidth: number,
   writingDirection: 'ltr' | 'rtl',
-|};
+}>;

package/lib/native/__tests__/stylex-css-var-test.js

@@ -22,7 +22,7 @@ function resolveColorValue(colorValue) {
       color: colorValue
     }
   });
-  return _stylex.stylex.props(styles.root, mockOptions).style.color;
+  return _stylex.stylex.props.call(mockOptions, styles.root).style.color;
 }
 describe('stylex CSSCustomProperty value test', () => {
   beforeEach(() => {
@@ -52,7 +52,7 @@ describe('stylex CSSCustomProperty value test', () => {
         boxShadow: 'var(--boxShadowVar1, 0px 0px 0px black)'
       }
     });
-    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
   });
   test('falls back to a default value with spaces', () => {
     const styles = _stylex.stylex.create({
@@ -60,7 +60,7 @@ describe('stylex CSSCustomProperty value test', () => {
         boxShadow: 'var(--boxShadowVarNotFound, 0px 0px 0px black)'
       }
     });
-    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
   });
   test('parses and falls back to default value containing a variable', () => {
     const styles = _stylex.stylex.create({
@@ -68,7 +68,7 @@ describe('stylex CSSCustomProperty value test', () => {
         color: 'var(--colorNotFound, var(--testVar2))'
       }
     });
-    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
   });
   test('parses and falls back to a default value containing spaces and embedded variables', () => {
     const styles = _stylex.stylex.create({
@@ -76,7 +76,7 @@ describe('stylex CSSCustomProperty value test', () => {
         boxShadow: 'var(--boxShadowVarNotFound, 0px 0px 0px var(--testVar2))'
       }
     });
-    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
   });
   test('does not parse malformed vars', () => {
     expect(resolveColorValue('var(--testUnfinished')).toEqual('var(--testUnfinished');
@@ -93,9 +93,9 @@ describe('stylex CSSCustomProperty value test', () => {
         borderWidth: 'var(--rawNumber)'
       }
     });
-    const rootStyle = _stylex.stylex.props(styles.root, mockOptions).style;
+    const rootStyle = _stylex.stylex.props.call(mockOptions, styles.root).style;
     expect(rootStyle.borderWidth).toEqual(10);
-    expect(_stylex.stylex.props(styles.withVars, mockOptions).style.borderWidth).toEqual(rootStyle.borderWidth);
+    expect(_stylex.stylex.props.call(mockOptions, styles.withVars).style.borderWidth).toEqual(rootStyle.borderWidth);
   });
   test('value lookup with pixel prop conversion', () => {
     const styles = _stylex.stylex.create({
@@ -106,9 +106,9 @@ describe('stylex CSSCustomProperty value test', () => {
         borderWidth: 'var(--pixelNumber)'
       }
     });
-    const rootStyle = _stylex.stylex.props(styles.root, mockOptions).style;
+    const rootStyle = _stylex.stylex.props.call(mockOptions, styles.root).style;
     expect(rootStyle.borderWidth).toEqual(10);
-    expect(_stylex.stylex.props(styles.withVars, mockOptions).style.borderWidth).toEqual(rootStyle.borderWidth);
+    expect(_stylex.stylex.props.call(mockOptions, styles.withVars).style.borderWidth).toEqual(rootStyle.borderWidth);
   });
   test('value lookup with em prop conversion', () => {
     const styles = _stylex.stylex.create({
@@ -119,9 +119,9 @@ describe('stylex CSSCustomProperty value test', () => {
         fontSize: 'var(--emNumber)'
       }
     });
-    const rootStyle = _stylex.stylex.props(styles.root, mockOptions).style;
+    const rootStyle = _stylex.stylex.props.call(mockOptions, styles.root).style;
     expect(rootStyle.fontSize).toEqual(160);
-    expect(_stylex.stylex.props(styles.withVars, mockOptions).style.fontSize).toEqual(rootStyle.fontSize);
+    expect(_stylex.stylex.props.call(mockOptions, styles.withVars).style.fontSize).toEqual(rootStyle.fontSize);
   });
   test('prop lookup with ref', () => {
     const styles = _stylex.stylex.create({
@@ -132,9 +132,9 @@ describe('stylex CSSCustomProperty value test', () => {
         borderWidth: 'var(--refToPixelNumber)'
       }
     });
-    const rootStyle = _stylex.stylex.props(styles.root, mockOptions).style;
+    const rootStyle = _stylex.stylex.props.call(mockOptions, styles.root).style;
     expect(rootStyle.borderWidth).toEqual(10);
-    expect(_stylex.stylex.props(styles.withVars, mockOptions).style.borderWidth).toEqual(rootStyle.borderWidth);
+    expect(_stylex.stylex.props.call(mockOptions, styles.withVars).style.borderWidth).toEqual(rootStyle.borderWidth);
   });
   test('prop lookup with ref to ref', () => {
     const styles = _stylex.stylex.create({
@@ -142,7 +142,7 @@ describe('stylex CSSCustomProperty value test', () => {
         borderWidth: 'var(--refToRefToRawNumber)'
       }
     });
-    const rootStyle = _stylex.stylex.props(styles.root, mockOptions).style;
+    const rootStyle = _stylex.stylex.props.call(mockOptions, styles.root).style;
     expect(rootStyle.borderWidth).toEqual(10);
   });
 });

package/lib/native/__tests__/stylex-test.js

@@ -21,7 +21,7 @@ describe('styles', () => {
         animationDelay: '0.3s'
       }
     });
-    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
   });
   test('animation-duration', () => {
     const styles = _stylex.stylex.create({
@@ -29,7 +29,7 @@ describe('styles', () => {
         animationDuration: '0.5s'
       }
     });
-    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
   });
   test('background-image', () => {
     const styles = _stylex.stylex.create({
@@ -37,7 +37,7 @@ describe('styles', () => {
         backgroundImage: 'url(https://placehold.it/300/300'
       }
     });
-    _stylex.stylex.props(styles.root, mockOptions);
+    _stylex.stylex.props.call(mockOptions, styles.root);
     expect(console.warn).toHaveBeenCalled();
   });
   test('border-style', () => {
@@ -50,8 +50,8 @@ describe('styles', () => {
         borderStyle: 'solid'
       }
     });
-    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
-    expect(_stylex.stylex.props([styles.root, styles.override], mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, styles.root, styles.override)).toMatchSnapshot();
   });
   test('box-shadow', () => {
     const styles = _stylex.stylex.create({
@@ -59,20 +59,20 @@ describe('styles', () => {
         boxShadow: '1px 2px 3px 4px red'
       }
     });
-    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
     const styles2 = _stylex.stylex.create({
       root: {
         boxShadow: '1px 2px 3px 4px red, 2px 3px 4px 5px blue'
       }
     });
-    _stylex.stylex.props(styles2.root, mockOptions);
+    _stylex.stylex.props.call(mockOptions, styles2.root);
     expect(console.warn).toHaveBeenCalledTimes(1);
     const styles3 = _stylex.stylex.create({
       root: {
         boxShadow: 'inset 1px 2px 3px 4px red'
       }
     });
-    _stylex.stylex.props(styles3.root, mockOptions);
+    _stylex.stylex.props.call(mockOptions, styles3.root);
     expect(console.warn).toHaveBeenCalledTimes(2);
   });
   test('box-sizing: content-box', () => {
@@ -142,15 +142,15 @@ describe('styles', () => {
         width: 'auto'
       }
     });
-    expect(_stylex.stylex.props(styles.width, mockOptions)).toMatchSnapshot('width');
-    expect(_stylex.stylex.props(styles.height, mockOptions)).toMatchSnapshot('height');
-    expect(_stylex.stylex.props(styles.maxWidth, mockOptions)).toMatchSnapshot('maxWidth');
-    expect(_stylex.stylex.props(styles.maxHeight, mockOptions)).toMatchSnapshot('maxHeight');
-    expect(_stylex.stylex.props(styles.minWidth, mockOptions)).toMatchSnapshot('minWidth');
-    expect(_stylex.stylex.props(styles.minHeight, mockOptions)).toMatchSnapshot('minHeight');
-    expect(_stylex.stylex.props(styles.units, mockOptions)).toMatchSnapshot('units');
-    expect(_stylex.stylex.props(styles.allDifferent, mockOptions)).toMatchSnapshot('allDifferent');
-    expect(_stylex.stylex.props(styles.auto, mockOptions)).toMatchSnapshot('auto');
+    expect(_stylex.stylex.props.call(mockOptions, styles.width)).toMatchSnapshot('width');
+    expect(_stylex.stylex.props.call(mockOptions, styles.height)).toMatchSnapshot('height');
+    expect(_stylex.stylex.props.call(mockOptions, styles.maxWidth)).toMatchSnapshot('maxWidth');
+    expect(_stylex.stylex.props.call(mockOptions, styles.maxHeight)).toMatchSnapshot('maxHeight');
+    expect(_stylex.stylex.props.call(mockOptions, styles.minWidth)).toMatchSnapshot('minWidth');
+    expect(_stylex.stylex.props.call(mockOptions, styles.minHeight)).toMatchSnapshot('minHeight');
+    expect(_stylex.stylex.props.call(mockOptions, styles.units)).toMatchSnapshot('units');
+    expect(_stylex.stylex.props.call(mockOptions, styles.allDifferent)).toMatchSnapshot('allDifferent');
+    expect(_stylex.stylex.props.call(mockOptions, styles.auto)).toMatchSnapshot('auto');
   });
   test('direction', () => {
     const styles = _stylex.stylex.create({
@@ -158,13 +158,13 @@ describe('styles', () => {
         direction: 'ltr'
       }
     });
-    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
     const styles2 = _stylex.stylex.create({
       root: {
         direction: 'rtl'
       }
     });
-    expect(_stylex.stylex.props(styles2.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, styles2.root)).toMatchSnapshot();
   });
   test('font-size', () => {
     const styles = _stylex.stylex.create({
@@ -172,11 +172,11 @@ describe('styles', () => {
         fontSize: '2.5rem'
       }
     });
-    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot('default');
-    expect(_stylex.stylex.props(styles.root, {
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot('default');
+    expect(_stylex.stylex.props.call({
       ...mockOptions,
       fontScale: 2
-    })).toMatchSnapshot('fontScale:2');
+    }, styles.root)).toMatchSnapshot('fontScale:2');
   });
   test('font-variant', () => {
     const styles = _stylex.stylex.create({
@@ -184,7 +184,7 @@ describe('styles', () => {
         fontVariant: 'common-ligatures small-caps'
       }
     });
-    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
   });
   test('font-weight', () => {
     const styles = _stylex.stylex.create({
@@ -192,13 +192,13 @@ describe('styles', () => {
         fontWeight: 900
       }
     });
-    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
     const styles2 = _stylex.stylex.create({
       root: {
         fontWeight: 'bold'
       }
     });
-    expect(_stylex.stylex.props(styles2.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, styles2.root)).toMatchSnapshot();
   });
   test('line-clamp', () => {
     const styles = _stylex.stylex.create({
@@ -206,7 +206,7 @@ describe('styles', () => {
         lineClamp: 3
       }
     });
-    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
   });
   test('line-height', () => {
     const styles = _stylex.stylex.create({
@@ -223,10 +223,10 @@ describe('styles', () => {
         lineHeight: '24px'
       }
     });
-    expect(_stylex.stylex.props(styles.numeric, mockOptions)).toMatchSnapshot('unitless number');
-    expect(_stylex.stylex.props(styles.string, mockOptions)).toMatchSnapshot('unitless string');
-    expect(_stylex.stylex.props(styles.rem, mockOptions)).toMatchSnapshot('rem');
-    expect(_stylex.stylex.props(styles.px, mockOptions)).toMatchSnapshot('px');
+    expect(_stylex.stylex.props.call(mockOptions, styles.numeric)).toMatchSnapshot('unitless number');
+    expect(_stylex.stylex.props.call(mockOptions, styles.string)).toMatchSnapshot('unitless string');
+    expect(_stylex.stylex.props.call(mockOptions, styles.rem)).toMatchSnapshot('rem');
+    expect(_stylex.stylex.props.call(mockOptions, styles.px)).toMatchSnapshot('px');
   });
   test('object-fit', () => {
     const styles = _stylex.stylex.create({
@@ -246,11 +246,11 @@ describe('styles', () => {
         objectFit: 'none'
       }
     });
-    expect(_stylex.stylex.props(styles.contain, mockOptions)).toMatchSnapshot('contain');
-    expect(_stylex.stylex.props(styles.cover, mockOptions)).toMatchSnapshot('contain');
-    expect(_stylex.stylex.props(styles.fill, mockOptions)).toMatchSnapshot('fill');
-    expect(_stylex.stylex.props(styles.scaleDown, mockOptions)).toMatchSnapshot('scaleDown');
-    expect(_stylex.stylex.props(styles.none, mockOptions)).toMatchSnapshot('none');
+    expect(_stylex.stylex.props.call(mockOptions, styles.contain)).toMatchSnapshot('contain');
+    expect(_stylex.stylex.props.call(mockOptions, styles.cover)).toMatchSnapshot('contain');
+    expect(_stylex.stylex.props.call(mockOptions, styles.fill)).toMatchSnapshot('fill');
+    expect(_stylex.stylex.props.call(mockOptions, styles.scaleDown)).toMatchSnapshot('scaleDown');
+    expect(_stylex.stylex.props.call(mockOptions, styles.none)).toMatchSnapshot('none');
   });
   test('pointer-events', () => {
     const styles = _stylex.stylex.create({
@@ -258,7 +258,7 @@ describe('styles', () => {
         pointerEvents: 'none'
       }
     });
-    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
   });
   test('position', () => {
     const styles = _stylex.stylex.create({
@@ -278,11 +278,11 @@ describe('styles', () => {
         position: 'sticky'
       }
     });
-    expect(_stylex.stylex.props(styles.static, mockOptions)).toMatchSnapshot('static');
-    expect(_stylex.stylex.props(styles.relative, mockOptions)).toMatchSnapshot('relative');
-    expect(_stylex.stylex.props(styles.absolute, mockOptions)).toMatchSnapshot('absolute');
-    expect(_stylex.stylex.props(styles.fixed, mockOptions)).toMatchSnapshot('fixed');
-    expect(_stylex.stylex.props(styles.sticky, mockOptions)).toMatchSnapshot('sticky');
+    expect(_stylex.stylex.props.call(mockOptions, styles.static)).toMatchSnapshot('static');
+    expect(_stylex.stylex.props.call(mockOptions, styles.relative)).toMatchSnapshot('relative');
+    expect(_stylex.stylex.props.call(mockOptions, styles.absolute)).toMatchSnapshot('absolute');
+    expect(_stylex.stylex.props.call(mockOptions, styles.fixed)).toMatchSnapshot('fixed');
+    expect(_stylex.stylex.props.call(mockOptions, styles.sticky)).toMatchSnapshot('sticky');
     expect(console.warn).toHaveBeenCalledTimes(3);
   });
   test('text-shadow', () => {
@@ -291,13 +291,13 @@ describe('styles', () => {
         textShadow: '1px 2px 3px red'
       }
     });
-    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
     const styles2 = _stylex.stylex.create({
       root: {
         textShadow: '1px 2px 3px red, 2px 3px 4px blue'
       }
     });
-    expect(_stylex.stylex.props(styles2.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, styles2.root)).toMatchSnapshot();
     expect(console.warn).toHaveBeenCalledTimes(1);
   });
   test('transform', () => {
@@ -331,15 +331,15 @@ describe('styles', () => {
         `
       }
     });
-    expect(_stylex.stylex.props(styles.none, mockOptions)).toMatchSnapshot('none');
-    expect(_stylex.stylex.props(styles.matrix, mockOptions)).toMatchSnapshot('matrix');
-    expect(_stylex.stylex.props(styles.perspective, mockOptions)).toMatchSnapshot('perspective');
-    expect(_stylex.stylex.props(styles.rotate, mockOptions)).toMatchSnapshot('rotate');
-    expect(_stylex.stylex.props(styles.scale, mockOptions)).toMatchSnapshot('scale');
-    expect(_stylex.stylex.props(styles.skew, mockOptions)).toMatchSnapshot('skew');
-    expect(_stylex.stylex.props(styles.translate, mockOptions)).toMatchSnapshot('translate');
-    expect(_stylex.stylex.props(styles.rotate, mockOptions)).toMatchSnapshot('rotate');
-    expect(_stylex.stylex.props(styles.mixed, mockOptions)).toMatchSnapshot('mixed');
+    expect(_stylex.stylex.props.call(mockOptions, styles.none)).toMatchSnapshot('none');
+    expect(_stylex.stylex.props.call(mockOptions, styles.matrix)).toMatchSnapshot('matrix');
+    expect(_stylex.stylex.props.call(mockOptions, styles.perspective)).toMatchSnapshot('perspective');
+    expect(_stylex.stylex.props.call(mockOptions, styles.rotate)).toMatchSnapshot('rotate');
+    expect(_stylex.stylex.props.call(mockOptions, styles.scale)).toMatchSnapshot('scale');
+    expect(_stylex.stylex.props.call(mockOptions, styles.skew)).toMatchSnapshot('skew');
+    expect(_stylex.stylex.props.call(mockOptions, styles.translate)).toMatchSnapshot('translate');
+    expect(_stylex.stylex.props.call(mockOptions, styles.rotate)).toMatchSnapshot('rotate');
+    expect(_stylex.stylex.props.call(mockOptions, styles.mixed)).toMatchSnapshot('mixed');
   });
   test('transition-delay', () => {
     const styles = _stylex.stylex.create({
@@ -347,7 +347,7 @@ describe('styles', () => {
         transitionDelay: '0.3s'
       }
     });
-    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
   });
   test('transition-duration', () => {
     const styles = _stylex.stylex.create({
@@ -355,7 +355,7 @@ describe('styles', () => {
         transitionDuration: '0.5s'
       }
     });
-    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
   });
   test('user-select', () => {
     const styles = _stylex.stylex.create({
@@ -363,7 +363,7 @@ describe('styles', () => {
         userSelect: 'none'
       }
     });
-    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
   });
   test('vertical-align', () => {
     const styles = _stylex.stylex.create({
@@ -374,8 +374,8 @@ describe('styles', () => {
         verticalAlign: 'top'
       }
     });
-    expect(_stylex.stylex.props(styles.middle, mockOptions)).toMatchSnapshot('middle');
-    expect(_stylex.stylex.props(styles.top, mockOptions)).toMatchSnapshot('top');
+    expect(_stylex.stylex.props.call(mockOptions, styles.middle)).toMatchSnapshot('middle');
+    expect(_stylex.stylex.props.call(mockOptions, styles.top)).toMatchSnapshot('top');
   });
   test(':hover syntax', () => {
     const styles = _stylex.stylex.create({
@@ -386,12 +386,12 @@ describe('styles', () => {
         }
       }
     });
-    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot('not hovered');
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot('not hovered');
     const hoverOptions = {
       ...mockOptions,
       hover: true
     };
-    expect(_stylex.stylex.props(styles.root, hoverOptions)).toMatchSnapshot('hovered');
+    expect(_stylex.stylex.props.call(hoverOptions, styles.root)).toMatchSnapshot('hovered');
   });
 });
 describe('logical styles', () => {
@@ -407,18 +407,18 @@ describe('logical styles', () => {
         minBlockSize: '100px'
       }
     });
-    expect(_stylex.stylex.props(styles.blockSize, mockOptions)).toMatchSnapshot('blockSize');
-    expect(_stylex.stylex.props([{
+    expect(_stylex.stylex.props.call(mockOptions, styles.blockSize)).toMatchSnapshot('blockSize');
+    expect(_stylex.stylex.props.call(mockOptions, {
       height: 200
-    }, styles.blockSize], mockOptions)).toMatchSnapshot('blockSize after height');
-    expect(_stylex.stylex.props(styles.maxBlockSize, mockOptions)).toMatchSnapshot('maxBlockSize');
-    expect(_stylex.stylex.props([{
+    }, styles.blockSize)).toMatchSnapshot('blockSize after height');
+    expect(_stylex.stylex.props.call(mockOptions, styles.maxBlockSize)).toMatchSnapshot('maxBlockSize');
+    expect(_stylex.stylex.props.call(mockOptions, {
       maxHeight: 200
-    }, styles.maxBlockSize], mockOptions)).toMatchSnapshot('maxBlockSize after maxHeight');
-    expect(_stylex.stylex.props(styles.minBlockSize, mockOptions)).toMatchSnapshot('minBlockSize');
-    expect(_stylex.stylex.props([{
+    }, styles.maxBlockSize)).toMatchSnapshot('maxBlockSize after maxHeight');
+    expect(_stylex.stylex.props.call(mockOptions, styles.minBlockSize)).toMatchSnapshot('minBlockSize');
+    expect(_stylex.stylex.props.call(mockOptions, {
       minHeight: 200
-    }, styles.minBlockSize], mockOptions)).toMatchSnapshot('minBlockSize after minHeight');
+    }, styles.minBlockSize)).toMatchSnapshot('minBlockSize after minHeight');
   });
   test('inlineSize', () => {
     const styles = _stylex.stylex.create({
@@ -432,18 +432,18 @@ describe('logical styles', () => {
         minInlineSize: '100px'
       }
     });
-    expect(_stylex.stylex.props(styles.inlineSize, mockOptions)).toMatchSnapshot('inlineSize');
-    expect(_stylex.stylex.props([{
+    expect(_stylex.stylex.props.call(mockOptions, styles.inlineSize)).toMatchSnapshot('inlineSize');
+    expect(_stylex.stylex.props.call(mockOptions, {
       width: 200
-    }, styles.inlineSize], mockOptions)).toMatchSnapshot('inlineSize after width');
-    expect(_stylex.stylex.props(styles.maxInlineSize, mockOptions)).toMatchSnapshot('maxInlineSize');
-    expect(_stylex.stylex.props([{
+    }, styles.inlineSize)).toMatchSnapshot('inlineSize after width');
+    expect(_stylex.stylex.props.call(mockOptions, styles.maxInlineSize)).toMatchSnapshot('maxInlineSize');
+    expect(_stylex.stylex.props.call(mockOptions, {
       maxWidth: 200
-    }, styles.maxInlineSize], mockOptions)).toMatchSnapshot('maxInlineSize after maxWidth');
-    expect(_stylex.stylex.props(styles.minInlineSize, mockOptions)).toMatchSnapshot('minInlineSize');
-    expect(_stylex.stylex.props([{
+    }, styles.maxInlineSize)).toMatchSnapshot('maxInlineSize after maxWidth');
+    expect(_stylex.stylex.props.call(mockOptions, styles.minInlineSize)).toMatchSnapshot('minInlineSize');
+    expect(_stylex.stylex.props.call(mockOptions, {
       minWidth: 200
-    }, styles.minInlineSize], mockOptions)).toMatchSnapshot('minInlineSize after minWidth');
+    }, styles.minInlineSize)).toMatchSnapshot('minInlineSize after minWidth');
   });
   test('borderBlock', () => {
     const styles = _stylex.stylex.create({
@@ -463,11 +463,11 @@ describe('logical styles', () => {
         borderBlockStartWidth: 3
       }
     });
-    expect(_stylex.stylex.props(styles.borderBlock, mockOptions)).toMatchSnapshot('borderBlock');
-    expect(_stylex.stylex.props(styles.borderBlockEnd, mockOptions)).toMatchSnapshot('borderBlockEnd');
-    expect(_stylex.stylex.props(styles.borderBlockStart, mockOptions)).toMatchSnapshot('borderBlockStart');
-    expect(_stylex.stylex.props([styles.borderBlockEnd, styles.borderBlock], mockOptions)).toMatchSnapshot('borderBlock after borderBlockEnd');
-    expect(_stylex.stylex.props([styles.borderBlockStart, styles.borderBlock], mockOptions)).toMatchSnapshot('borderBlock after borderBlockStart');
+    expect(_stylex.stylex.props.call(mockOptions, styles.borderBlock)).toMatchSnapshot('borderBlock');
+    expect(_stylex.stylex.props.call(mockOptions, styles.borderBlockEnd)).toMatchSnapshot('borderBlockEnd');
+    expect(_stylex.stylex.props.call(mockOptions, styles.borderBlockStart)).toMatchSnapshot('borderBlockStart');
+    expect(_stylex.stylex.props.call(mockOptions, styles.borderBlockEnd, styles.borderBlock)).toMatchSnapshot('borderBlock after borderBlockEnd');
+    expect(_stylex.stylex.props.call(mockOptions, styles.borderBlockStart, styles.borderBlock)).toMatchSnapshot('borderBlock after borderBlockStart');
   });
   test('borderInline', () => {
     const styles = _stylex.stylex.create({
@@ -487,11 +487,11 @@ describe('logical styles', () => {
         borderInlineStartWidth: 3
       }
     });
-    expect(_stylex.stylex.props(styles.borderInline, mockOptions)).toMatchSnapshot('borderInline');
-    expect(_stylex.stylex.props(styles.borderInlineEnd, mockOptions)).toMatchSnapshot('borderInlineEnd');
-    expect(_stylex.stylex.props(styles.borderInlineStart, mockOptions)).toMatchSnapshot('borderInlineStart');
-    expect(_stylex.stylex.props([styles.borderInlineEnd, styles.borderInline], mockOptions)).toMatchSnapshot('borderInline after borderInlineEnd');
-    expect(_stylex.stylex.props([styles.borderInlineStart, styles.borderInline], mockOptions)).toMatchSnapshot('borderInline after borderInlineStart');
+    expect(_stylex.stylex.props.call(mockOptions, styles.borderInline)).toMatchSnapshot('borderInline');
+    expect(_stylex.stylex.props.call(mockOptions, styles.borderInlineEnd)).toMatchSnapshot('borderInlineEnd');
+    expect(_stylex.stylex.props.call(mockOptions, styles.borderInlineStart)).toMatchSnapshot('borderInlineStart');
+    expect(_stylex.stylex.props.call(mockOptions, styles.borderInlineEnd, styles.borderInline)).toMatchSnapshot('borderInline after borderInlineEnd');
+    expect(_stylex.stylex.props.call(mockOptions, styles.borderInlineStart, styles.borderInline)).toMatchSnapshot('borderInline after borderInlineStart');
   });
   test('borderRadius', () => {
     const styles = _stylex.stylex.create({
@@ -508,22 +508,22 @@ describe('logical styles', () => {
         borderEndEndRadius: 10
       }
     });
-    expect(_stylex.stylex.props(styles.startstart, mockOptions)).toMatchSnapshot('startstart');
-    expect(_stylex.stylex.props(styles.startend, mockOptions)).toMatchSnapshot('startend');
-    expect(_stylex.stylex.props(styles.endstart, mockOptions)).toMatchSnapshot('endstart');
-    expect(_stylex.stylex.props(styles.endend, mockOptions)).toMatchSnapshot('endend');
+    expect(_stylex.stylex.props.call(mockOptions, styles.startstart)).toMatchSnapshot('startstart');
+    expect(_stylex.stylex.props.call(mockOptions, styles.startend)).toMatchSnapshot('startend');
+    expect(_stylex.stylex.props.call(mockOptions, styles.endstart)).toMatchSnapshot('endstart');
+    expect(_stylex.stylex.props.call(mockOptions, styles.endend)).toMatchSnapshot('endend');
   });
   test.skip('borderStyle', () => {
     const styles = _stylex.stylex.create({
       root: {}
     });
-    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
   });
   test.skip('borderWidth', () => {
     const styles = _stylex.stylex.create({
       root: {}
     });
-    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
   });
   test('inset', () => {
     const styles = _stylex.stylex.create({
@@ -549,29 +549,29 @@ describe('logical styles', () => {
         insetInlineEnd: 7
       }
     });
-    expect(_stylex.stylex.props(styles.inset, mockOptions)).toMatchSnapshot('inset');
-    expect(_stylex.stylex.props(styles.insetBlock, mockOptions)).toMatchSnapshot('insetBlock');
-    expect(_stylex.stylex.props(styles.insetBlockStart, mockOptions)).toMatchSnapshot('insetBlockStart');
-    expect(_stylex.stylex.props(styles.insetBlockEnd, mockOptions)).toMatchSnapshot('insetBlockEnd');
-    expect(_stylex.stylex.props(styles.insetInline, mockOptions)).toMatchSnapshot('insetInline');
-    expect(_stylex.stylex.props(styles.insetInlineStart, mockOptions)).toMatchSnapshot('insetInlineStart');
-    expect(_stylex.stylex.props(styles.insetInlineEnd, mockOptions)).toMatchSnapshot('insetInlineEnd');
-    expect(_stylex.stylex.props([{
+    expect(_stylex.stylex.props.call(mockOptions, styles.inset)).toMatchSnapshot('inset');
+    expect(_stylex.stylex.props.call(mockOptions, styles.insetBlock)).toMatchSnapshot('insetBlock');
+    expect(_stylex.stylex.props.call(mockOptions, styles.insetBlockStart)).toMatchSnapshot('insetBlockStart');
+    expect(_stylex.stylex.props.call(mockOptions, styles.insetBlockEnd)).toMatchSnapshot('insetBlockEnd');
+    expect(_stylex.stylex.props.call(mockOptions, styles.insetInline)).toMatchSnapshot('insetInline');
+    expect(_stylex.stylex.props.call(mockOptions, styles.insetInlineStart)).toMatchSnapshot('insetInlineStart');
+    expect(_stylex.stylex.props.call(mockOptions, styles.insetInlineEnd)).toMatchSnapshot('insetInlineEnd');
+    expect(_stylex.stylex.props.call(mockOptions, {
       left: 10,
       right: 10,
       bottom: 100,
       top: 100
-    }, styles.insetBlockStart], mockOptions)).toMatchSnapshot('inset vs top');
-    expect(_stylex.stylex.props([{
+    }, styles.insetBlockStart)).toMatchSnapshot('inset vs top');
+    expect(_stylex.stylex.props.call(mockOptions, {
       bottom: 100,
       top: 100
-    }, styles.insetBlockStart], mockOptions)).toMatchSnapshot('insetBlock vs top');
-    expect(_stylex.stylex.props([{
+    }, styles.insetBlockStart)).toMatchSnapshot('insetBlock vs top');
+    expect(_stylex.stylex.props.call(mockOptions, {
       top: 100
-    }, styles.insetBlockStart], mockOptions)).toMatchSnapshot('insetBlockStart vs top');
-    expect(_stylex.stylex.props([{
+    }, styles.insetBlockStart)).toMatchSnapshot('insetBlockStart vs top');
+    expect(_stylex.stylex.props.call(mockOptions, {
       bottom: 100
-    }, styles.insetBlockEnd], mockOptions)).toMatchSnapshot('insetBlockEnd vs bottom');
+    }, styles.insetBlockEnd)).toMatchSnapshot('insetBlockEnd vs bottom');
   });
   test('margin', () => {
     const styles = _stylex.stylex.create({
@@ -594,12 +594,12 @@ describe('logical styles', () => {
         marginInlineEnd: 3
       }
     });
-    expect(_stylex.stylex.props(styles.marginBlock, mockOptions)).toMatchSnapshot('marginBlock');
-    expect(_stylex.stylex.props(styles.marginBlockStart, mockOptions)).toMatchSnapshot('marginBlockStart');
-    expect(_stylex.stylex.props(styles.marginBlockEnd, mockOptions)).toMatchSnapshot('marginBlockEnd');
-    expect(_stylex.stylex.props(styles.marginInline, mockOptions)).toMatchSnapshot('marginInline');
-    expect(_stylex.stylex.props(styles.marginInlineStart, mockOptions)).toMatchSnapshot('marginInlineStart');
-    expect(_stylex.stylex.props(styles.marginInlineEnd, mockOptions)).toMatchSnapshot('marginInlineEnd');
+    expect(_stylex.stylex.props.call(mockOptions, styles.marginBlock)).toMatchSnapshot('marginBlock');
+    expect(_stylex.stylex.props.call(mockOptions, styles.marginBlockStart)).toMatchSnapshot('marginBlockStart');
+    expect(_stylex.stylex.props.call(mockOptions, styles.marginBlockEnd)).toMatchSnapshot('marginBlockEnd');
+    expect(_stylex.stylex.props.call(mockOptions, styles.marginInline)).toMatchSnapshot('marginInline');
+    expect(_stylex.stylex.props.call(mockOptions, styles.marginInlineStart)).toMatchSnapshot('marginInlineStart');
+    expect(_stylex.stylex.props.call(mockOptions, styles.marginInlineEnd)).toMatchSnapshot('marginInlineEnd');
   });
   test('padding', () => {
     const styles = _stylex.stylex.create({
@@ -622,12 +622,12 @@ describe('logical styles', () => {
         paddingInlineEnd: 3
       }
     });
-    expect(_stylex.stylex.props(styles.paddingBlock, mockOptions)).toMatchSnapshot('paddingBlock');
-    expect(_stylex.stylex.props(styles.paddingBlockStart, mockOptions)).toMatchSnapshot('paddingBlockStart');
-    expect(_stylex.stylex.props(styles.paddingBlockEnd, mockOptions)).toMatchSnapshot('paddingBlockEnd');
-    expect(_stylex.stylex.props(styles.paddingInline, mockOptions)).toMatchSnapshot('paddingInline');
-    expect(_stylex.stylex.props(styles.paddingInlineStart, mockOptions)).toMatchSnapshot('paddingInlineStart');
-    expect(_stylex.stylex.props(styles.paddingInlineEnd, mockOptions)).toMatchSnapshot('paddingInlineEnd');
+    expect(_stylex.stylex.props.call(mockOptions, styles.paddingBlock)).toMatchSnapshot('paddingBlock');
+    expect(_stylex.stylex.props.call(mockOptions, styles.paddingBlockStart)).toMatchSnapshot('paddingBlockStart');
+    expect(_stylex.stylex.props.call(mockOptions, styles.paddingBlockEnd)).toMatchSnapshot('paddingBlockEnd');
+    expect(_stylex.stylex.props.call(mockOptions, styles.paddingInline)).toMatchSnapshot('paddingInline');
+    expect(_stylex.stylex.props.call(mockOptions, styles.paddingInlineStart)).toMatchSnapshot('paddingInlineStart');
+    expect(_stylex.stylex.props.call(mockOptions, styles.paddingInlineEnd)).toMatchSnapshot('paddingInlineEnd');
   });
   test('textAlign', () => {
     const styles = _stylex.stylex.create({
@@ -638,8 +638,8 @@ describe('logical styles', () => {
         textAlign: 'end'
       }
     });
-    expect(_stylex.stylex.props(styles.start, mockOptions)).toMatchSnapshot('start');
-    expect(_stylex.stylex.props(styles.end, mockOptions)).toMatchSnapshot('end');
+    expect(_stylex.stylex.props.call(mockOptions, styles.start)).toMatchSnapshot('start');
+    expect(_stylex.stylex.props.call(mockOptions, styles.end)).toMatchSnapshot('end');
   });
 });
 describe('length units', () => {
@@ -652,7 +652,7 @@ describe('length units', () => {
           width: `${value}${unitToTest}`
         }
       });
-      expect(_stylex.stylex.props(styles.underTest, mockOptions)).toMatchSnapshot();
+      expect(_stylex.stylex.props.call(mockOptions, styles.underTest)).toMatchSnapshot();
     });
   }
   test(`${value} "em" units based on inherited font-size`, () => {
@@ -661,10 +661,10 @@ describe('length units', () => {
         width: `${value}em`
       }
     });
-    expect(_stylex.stylex.props(styles.underTest, {
+    expect(_stylex.stylex.props.call({
       ...mockOptions,
       inheritedFontSize: 12
-    })).toMatchSnapshot();
+    }, styles.underTest)).toMatchSnapshot();
   });
 });
 describe('custom properties', () => {
@@ -683,7 +683,7 @@ describe('custom properties', () => {
         width: 'var(--unprovided)'
       }
     });
-    expect(_stylex.stylex.props(underTest, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, underTest)).toMatchSnapshot();
     expect(console.error).toHaveBeenCalledWith('stylex: Unrecognized custom property "--unprovided"');
   });
   test("resolves custom properties' values", () => {
@@ -695,13 +695,13 @@ describe('custom properties', () => {
         width: 'var(--the-best-width)'
       }
     });
-    expect(_stylex.stylex.props(underTest, {
+    expect(_stylex.stylex.props.call({
       ...mockOptions,
       customProperties: {
         slightlyDarkerBlack: '#333',
         theBestWidth: 42
       }
-    })).toMatchSnapshot();
+    }, underTest)).toMatchSnapshot();
   });
 });
 expect.extend({
@@ -720,10 +720,10 @@ expect.extend({
         }
       }
     });
-    const props = _stylex.stylex.props(underTest, {
+    const props = _stylex.stylex.props.call({
       viewportHeight: height,
       viewportWidth: width
-    });
+    }, underTest);
     const actualValue = props.style.width;
     if (actualValue === EXPECTED_MATCHED_VALUE) {
       return {
@@ -796,7 +796,7 @@ describe('unsupported style properties', () => {
         filter: 'blur(1px)'
       }
     });
-    expect(_stylex.stylex.props(underTest, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, underTest)).toMatchSnapshot();
     expect(console.warn).toHaveBeenCalled();
   });
   test('"marginStart"', () => {
@@ -807,7 +807,7 @@ describe('unsupported style properties', () => {
         marginStart: 10
       }
     });
-    expect(_stylex.stylex.props(underTest, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, underTest)).toMatchSnapshot();
     expect(console.warn).toHaveBeenCalled();
   });
   test('"marginEnd"', () => {
@@ -818,7 +818,7 @@ describe('unsupported style properties', () => {
         marginEnd: 10
       }
     });
-    expect(_stylex.stylex.props(underTest, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, underTest)).toMatchSnapshot();
     expect(console.warn).toHaveBeenCalled();
   });
   test('"marginHorizontal"', () => {
@@ -829,7 +829,7 @@ describe('unsupported style properties', () => {
         marginHorizontal: 10
       }
     });
-    expect(_stylex.stylex.props(underTest, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, underTest)).toMatchSnapshot();
     expect(console.warn).toHaveBeenCalled();
   });
   test('"marginVertical"', () => {
@@ -840,7 +840,7 @@ describe('unsupported style properties', () => {
         marginVertical: 10
       }
     });
-    expect(_stylex.stylex.props(underTest, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, underTest)).toMatchSnapshot();
     expect(console.warn).toHaveBeenCalled();
   });
   test('"paddingHorizontal"', () => {
@@ -851,7 +851,7 @@ describe('unsupported style properties', () => {
         paddingHorizontal: 10
       }
     });
-    expect(_stylex.stylex.props(underTest, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, underTest)).toMatchSnapshot();
     expect(console.warn).toHaveBeenCalled();
   });
   test('"paddingVertical"', () => {
@@ -862,7 +862,7 @@ describe('unsupported style properties', () => {
         paddingVertical: 10
       }
     });
-    expect(_stylex.stylex.props(underTest, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, underTest)).toMatchSnapshot();
     expect(console.warn).toHaveBeenCalled();
   });
   test('"transitionProperty" passthrough', () => {
@@ -873,10 +873,10 @@ describe('unsupported style properties', () => {
         transitionProperty: 'opacity'
       }
     });
-    expect(_stylex.stylex.props(underTest, {
+    expect(_stylex.stylex.props.call({
       ...mockOptions,
       passthroughProperties: ['transitionProperty']
-    })).toMatchSnapshot();
+    }, underTest)).toMatchSnapshot();
     expect(console.warn).not.toHaveBeenCalled();
   });
 });
@@ -896,7 +896,7 @@ describe('unsupported style values', () => {
         width: 'calc(2 * 1rem)'
       }
     });
-    expect(_stylex.stylex.props(underTest, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, underTest)).toMatchSnapshot();
     expect(console.warn).toHaveBeenCalled();
   });
   test('inherit', () => {
@@ -907,7 +907,7 @@ describe('unsupported style values', () => {
         fontSize: 'inherit'
       }
     });
-    expect(_stylex.stylex.props(underTest, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, underTest)).toMatchSnapshot();
     expect(console.warn).toHaveBeenCalled();
   });
   test('initial', () => {
@@ -918,7 +918,7 @@ describe('unsupported style values', () => {
         fontSize: 'initial'
       }
     });
-    expect(_stylex.stylex.props(underTest, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, underTest)).toMatchSnapshot();
     expect(console.warn).toHaveBeenCalled();
   });
 });

package/lib/native/stylex.d.ts

@@ -30,8 +30,8 @@ export declare function keyframes(k: Keyframes): Keyframes;
  */
 
 export declare function props(
-  style: null | undefined | { [key: string]: unknown },
-  options: SpreadOptions,
+  this: SpreadOptions,
+  ...style: ReadonlyArray<null | undefined | { [key: string]: unknown }>
 ): { [$$Key$$: string]: {} };
 export declare const __customProperties: { [$$Key$$: string]: unknown };
 export declare const defineVars: StyleX$DefineVars;

package/lib/native/stylex.js

@@ -143,7 +143,15 @@ function finalizeValue(unfinalizedValue, options) {
 function create(styles) {
   const result = {};
   for (const styleName in styles) {
-    result[styleName] = preprocessCreate(styles[styleName]);
+    const val = styles[styleName];
+    if (typeof val === 'function') {
+      result[styleName] = function () {
+        const style = val(...arguments);
+        return preprocessCreate(style);
+      };
+    } else {
+      result[styleName] = preprocessCreate(styles[styleName]);
+    }
   }
   return result;
 }
@@ -156,7 +164,11 @@ function keyframes(k) {
   return k;
 }
 const timeValuedProperties = ['animationDelay', 'animationDuration', 'transitionDelay', 'transitionDuration'];
-function props(style, options) {
+function props() {
+  const options = this;
+  for (var _len = arguments.length, style = new Array(_len), _key = 0; _key < _len; _key++) {
+    style[_key] = arguments[_key];
+  }
   let {
     lineClamp,
     ...flatStyle

package/lib/native/stylex.js.flow

@@ -35,8 +35,8 @@ declare export function keyframes(k: Keyframes): Keyframes;
  */
 
 declare export function props(
-  style: ?{ [key: string]: mixed },
-  options: SpreadOptions,
+  this: SpreadOptions,
+  ...style: $ReadOnlyArray<?{ [key: string]: mixed }>
 ): { [string]: { ... } };
 
 declare export const __customProperties: { [string]: mixed };

package/lib/stylex.d.ts

@@ -20,12 +20,14 @@ import type {
 export type { Theme, Variant } from './StyleXTypes';
 import injectStyle from './stylex-inject';
 export declare function props(
-  styles: StyleXArray<
-    | (null | undefined | CompiledStyles)
-    | boolean
-    | Readonly<[CompiledStyles, InlineStyles]>
-  >,
-  _options?: {},
+  this: null | undefined | unknown,
+  ...styles: ReadonlyArray<
+    StyleXArray<
+      | (null | undefined | CompiledStyles)
+      | boolean
+      | Readonly<[CompiledStyles, InlineStyles]>
+    >
+  >
 ): Readonly<{
   className?: string;
   style?: Readonly<{ [$$Key$$: string]: string | number }>;
@@ -112,12 +114,14 @@ type IStyleX = {
     >
   ): string;
   props: (
-    styles: StyleXArray<
-      | (null | undefined | CompiledStyles)
-      | boolean
-      | Readonly<[CompiledStyles, InlineStyles]>
-    >,
-    _options?: {},
+    this: null | undefined | unknown,
+    ...styles: ReadonlyArray<
+      StyleXArray<
+        | (null | undefined | CompiledStyles)
+        | boolean
+        | Readonly<[CompiledStyles, InlineStyles]>
+      >
+    >
   ) => Readonly<{
     className?: string;
     style?: Readonly<{ [$$Key$$: string]: string | number }>;

package/lib/stylex.js

@@ -10,9 +10,13 @@ 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 }; }
-function props(styles, _options) {
+function props() {
+  const options = this;
+  for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
+    styles[_key] = arguments[_key];
+  }
   if (__implementations.props) {
-    return __implementations.props(styles, _options);
+    return __implementations.props.call(options, styles);
   }
   const [className, style] = (0, _styleq.styleq)(styles);
   const result = {};
@@ -111,8 +115,8 @@ const firstThatWorks = function () {
 exports.firstThatWorks = firstThatWorks;
 const inject = exports.inject = _stylexInject.default;
 function _stylex() {
-  for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
-    styles[_key] = arguments[_key];
+  for (var _len2 = arguments.length, styles = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    styles[_key2] = arguments[_key2];
   }
   const [className] = (0, _styleq.styleq)(styles);
   return className;

package/lib/stylex.js.flow

@@ -22,10 +22,12 @@ export type { Theme, Variant } from './StyleXTypes';
 
 import injectStyle from './stylex-inject';
 declare export function props(
-  styles: StyleXArray<
-    ?CompiledStyles | boolean | $ReadOnly<[CompiledStyles, InlineStyles]>,
-  >,
-  _options?: { ... },
+  this: ?mixed,
+  ...styles: $ReadOnlyArray<
+    StyleXArray<
+      ?CompiledStyles | boolean | $ReadOnly<[CompiledStyles, InlineStyles]>,
+    >,
+  >
 ): $ReadOnly<{
   className?: string,
   style?: $ReadOnly<{ [string]: string | number }>,
@@ -113,10 +115,12 @@ declare export const inject: typeof injectStyle;
 type IStyleX = {
   (...styles: $ReadOnlyArray<StyleXArray<?CompiledStyles | boolean>>): string,
   props: (
-    styles: StyleXArray<
-      ?CompiledStyles | boolean | $ReadOnly<[CompiledStyles, InlineStyles]>,
-    >,
-    _options?: { ... },
+    this: ?mixed,
+    ...styles: $ReadOnlyArray<
+      StyleXArray<
+        ?CompiledStyles | boolean | $ReadOnly<[CompiledStyles, InlineStyles]>,
+      >,
+    >
   ) => $ReadOnly<{
     className?: string,
     style?: $ReadOnly<{ [string]: string | number }>,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/stylex",
-  "version": "0.2.0-beta.22",
+  "version": "0.2.0-beta.24",
   "description": "A library for defining styles for optimized user interfaces.",
   "main": "lib/stylex.js",
   "react-native": "lib/native/stylex.js",
@@ -20,7 +20,7 @@
     "utility-types": "^3.10.0"
   },
   "devDependencies": {
-    "@stylexjs/scripts": "0.2.0-beta.22"
+    "@stylexjs/scripts": "0.2.0-beta.24"
   },
   "jest": {},
   "files": [