@stylexjs/stylex - npm Package Compare versions

Comparing version 0.2.0-beta.22 to 0.2.0-beta.23

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

@@ -25,3 +25,3 @@ "use strict";
   });
-  return _stylex.stylex.props(styles.root, mockOptions).style.color;
+  return _stylex.stylex.props.call(mockOptions, styles.root).style.color;
 }
@@ -56,3 +56,3 @@ describe('stylex CSSCustomProperty value test', () => {
     });
-    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
   });
@@ -65,3 +65,3 @@ test('falls back to a default value with spaces', () => {
     });
-    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
   });
@@ -74,3 +74,3 @@ test('parses and falls back to default value containing a variable', () => {
     });
-    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
   });
@@ -83,3 +83,3 @@ test('parses and falls back to a default value containing spaces and embedded variables', () => {
     });
-    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
   });
@@ -101,5 +101,5 @@ test('does not parse malformed vars', () => {
     });
-    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);
   });
@@ -115,5 +115,5 @@ test('value lookup with pixel prop conversion', () => {
     });
-    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);
   });
@@ -129,5 +129,5 @@ test('value lookup with em prop conversion', () => {
     });
-    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);
   });
@@ -143,5 +143,5 @@ test('prop lookup with ref', () => {
     });
-    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);
   });
@@ -154,5 +154,5 @@ test('prop lookup with ref to ref', () => {
     });
-    const rootStyle = _stylex.stylex.props(styles.root, mockOptions).style;
+    const rootStyle = _stylex.stylex.props.call(mockOptions, styles.root).style;
     expect(rootStyle.borderWidth).toEqual(10);
   });
 });

lib/native/__tests__/stylex-test.js

@@ -24,3 +24,3 @@ "use strict";
     });
-    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
   });
@@ -33,3 +33,3 @@ test('animation-duration', () => {
     });
-    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
   });
@@ -42,3 +42,3 @@ test('background-image', () => {
     });
-    _stylex.stylex.props(styles.root, mockOptions);
+    _stylex.stylex.props.call(mockOptions, styles.root);
     expect(console.warn).toHaveBeenCalled();
@@ -56,4 +56,4 @@ });
     });
-    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();
   });
@@ -66,3 +66,3 @@ test('box-shadow', () => {
     });
-    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
     const styles2 = _stylex.stylex.create({
@@ -73,3 +73,3 @@ root: {
     });
-    _stylex.stylex.props(styles2.root, mockOptions);
+    _stylex.stylex.props.call(mockOptions, styles2.root);
     expect(console.warn).toHaveBeenCalledTimes(1);
@@ -81,3 +81,3 @@ const styles3 = _stylex.stylex.create({
     });
-    _stylex.stylex.props(styles3.root, mockOptions);
+    _stylex.stylex.props.call(mockOptions, styles3.root);
     expect(console.warn).toHaveBeenCalledTimes(2);
@@ -152,11 +152,11 @@ });
     });
-    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');
   });
@@ -169,3 +169,3 @@ test('direction', () => {
     });
-    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
     const styles2 = _stylex.stylex.create({
@@ -176,3 +176,3 @@ root: {
     });
-    expect(_stylex.stylex.props(styles2.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, styles2.root)).toMatchSnapshot();
   });
@@ -185,7 +185,7 @@ test('font-size', () => {
     });
-    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');
   });
@@ -198,3 +198,3 @@ test('font-variant', () => {
     });
-    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
   });
@@ -207,3 +207,3 @@ test('font-weight', () => {
     });
-    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
     const styles2 = _stylex.stylex.create({
@@ -214,3 +214,3 @@ root: {
     });
-    expect(_stylex.stylex.props(styles2.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, styles2.root)).toMatchSnapshot();
   });
@@ -223,3 +223,3 @@ test('line-clamp', () => {
     });
-    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
   });
@@ -241,6 +241,6 @@ test('line-height', () => {
     });
-    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');
   });
@@ -265,7 +265,7 @@ test('object-fit', () => {
     });
-    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');
   });
@@ -278,3 +278,3 @@ test('pointer-events', () => {
     });
-    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
   });
@@ -299,7 +299,7 @@ test('position', () => {
     });
-    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);
@@ -313,3 +313,3 @@ });
     });
-    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
     const styles2 = _stylex.stylex.create({
@@ -320,3 +320,3 @@ root: {
     });
-    expect(_stylex.stylex.props(styles2.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, styles2.root)).toMatchSnapshot();
     expect(console.warn).toHaveBeenCalledTimes(1);
@@ -355,11 +355,11 @@ });
     });
-    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');
   });
@@ -372,3 +372,3 @@ test('transition-delay', () => {
     });
-    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
   });
@@ -381,3 +381,3 @@ test('transition-duration', () => {
     });
-    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
   });
@@ -390,3 +390,3 @@ test('user-select', () => {
     });
-    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
   });
@@ -402,4 +402,4 @@ test('vertical-align', () => {
     });
-    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');
   });
@@ -415,3 +415,3 @@ test(':hover syntax', () => {
     });
-    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot('not hovered');
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot('not hovered');
     const hoverOptions = {
@@ -421,3 +421,3 @@ ...mockOptions,
     };
-    expect(_stylex.stylex.props(styles.root, hoverOptions)).toMatchSnapshot('hovered');
+    expect(_stylex.stylex.props.call(hoverOptions, styles.root)).toMatchSnapshot('hovered');
   });
@@ -438,14 +438,14 @@ });
     });
-    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');
   });
@@ -464,14 +464,14 @@ test('inlineSize', () => {
     });
-    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');
   });
@@ -496,7 +496,7 @@ test('borderBlock', () => {
     });
-    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');
   });
@@ -521,7 +521,7 @@ test('borderInline', () => {
     });
-    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');
   });
@@ -543,6 +543,6 @@ test('borderRadius', () => {
     });
-    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');
   });
@@ -553,3 +553,3 @@ test.skip('borderStyle', () => {
     });
-    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
   });
@@ -560,3 +560,3 @@ test.skip('borderWidth', () => {
     });
-    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
   });
@@ -587,10 +587,10 @@ test('inset', () => {
     });
-    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,
@@ -600,13 +600,13 @@ right: 10,
       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');
   });
@@ -634,8 +634,8 @@ test('margin', () => {
     });
-    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');
   });
@@ -663,8 +663,8 @@ test('padding', () => {
     });
-    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');
   });
@@ -680,4 +680,4 @@ test('textAlign', () => {
     });
-    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');
   });
@@ -695,3 +695,3 @@ });
       });
-      expect(_stylex.stylex.props(styles.underTest, mockOptions)).toMatchSnapshot();
+      expect(_stylex.stylex.props.call(mockOptions, styles.underTest)).toMatchSnapshot();
     });
@@ -705,6 +705,6 @@ }
     });
-    expect(_stylex.stylex.props(styles.underTest, {
+    expect(_stylex.stylex.props.call({
       ...mockOptions,
       inheritedFontSize: 12
-    })).toMatchSnapshot();
+    }, styles.underTest)).toMatchSnapshot();
   });
@@ -728,3 +728,3 @@ });
     });
-    expect(_stylex.stylex.props(underTest, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, underTest)).toMatchSnapshot();
     expect(console.error).toHaveBeenCalledWith('stylex: Unrecognized custom property "--unprovided"');
@@ -741,3 +741,3 @@ });
     });
-    expect(_stylex.stylex.props(underTest, {
+    expect(_stylex.stylex.props.call({
       ...mockOptions,
@@ -748,3 +748,3 @@ customProperties: {
       }
-    })).toMatchSnapshot();
+    }, underTest)).toMatchSnapshot();
   });
@@ -768,6 +768,6 @@ });
     });
-    const props = _stylex.stylex.props(underTest, {
+    const props = _stylex.stylex.props.call({
       viewportHeight: height,
       viewportWidth: width
-    });
+    }, underTest);
     const actualValue = props.style.width;
@@ -845,3 +845,3 @@ if (actualValue === EXPECTED_MATCHED_VALUE) {
     });
-    expect(_stylex.stylex.props(underTest, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, underTest)).toMatchSnapshot();
     expect(console.warn).toHaveBeenCalled();
@@ -857,3 +857,3 @@ });
     });
-    expect(_stylex.stylex.props(underTest, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, underTest)).toMatchSnapshot();
     expect(console.warn).toHaveBeenCalled();
@@ -869,3 +869,3 @@ });
     });
-    expect(_stylex.stylex.props(underTest, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, underTest)).toMatchSnapshot();
     expect(console.warn).toHaveBeenCalled();
@@ -881,3 +881,3 @@ });
     });
-    expect(_stylex.stylex.props(underTest, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, underTest)).toMatchSnapshot();
     expect(console.warn).toHaveBeenCalled();
@@ -893,3 +893,3 @@ });
     });
-    expect(_stylex.stylex.props(underTest, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, underTest)).toMatchSnapshot();
     expect(console.warn).toHaveBeenCalled();
@@ -905,3 +905,3 @@ });
     });
-    expect(_stylex.stylex.props(underTest, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, underTest)).toMatchSnapshot();
     expect(console.warn).toHaveBeenCalled();
@@ -917,3 +917,3 @@ });
     });
-    expect(_stylex.stylex.props(underTest, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, underTest)).toMatchSnapshot();
     expect(console.warn).toHaveBeenCalled();
@@ -929,6 +929,6 @@ });
     });
-    expect(_stylex.stylex.props(underTest, {
+    expect(_stylex.stylex.props.call({
       ...mockOptions,
       passthroughProperties: ['transitionProperty']
-    })).toMatchSnapshot();
+    }, underTest)).toMatchSnapshot();
     expect(console.warn).not.toHaveBeenCalled();
@@ -953,3 +953,3 @@ });
     });
-    expect(_stylex.stylex.props(underTest, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, underTest)).toMatchSnapshot();
     expect(console.warn).toHaveBeenCalled();
@@ -965,3 +965,3 @@ });
     });
-    expect(_stylex.stylex.props(underTest, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, underTest)).toMatchSnapshot();
     expect(console.warn).toHaveBeenCalled();
@@ -977,5 +977,5 @@ });
     });
-    expect(_stylex.stylex.props(underTest, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, underTest)).toMatchSnapshot();
     expect(console.warn).toHaveBeenCalled();
   });
 });

lib/native/SpreadOptions.d.ts

@@ -10,3 +10,3 @@ /**
 
-export type SpreadOptions = {
+export type SpreadOptions = Readonly<{
   customProperties: {};
@@ -20,2 +20,2 @@ inheritedFontSize: null | undefined | number;
   writingDirection: 'ltr' | 'rtl';
-};
+}>;

lib/native/stylex.d.ts

@@ -33,4 +33,4 @@ /**
 export declare function props(
-  style: null | undefined | { [key: string]: unknown },
-  options: SpreadOptions,
+  this: SpreadOptions,
+  ...style: ReadonlyArray<null | undefined | { [key: string]: unknown }>
 ): { [$$Key$$: string]: {} };
@@ -37,0 +37,0 @@ export declare const __customProperties: { [$$Key$$: string]: unknown };

lib/native/stylex.js

@@ -159,3 +159,7 @@ "use strict";
 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 {
@@ -162,0 +166,0 @@ lineClamp,

lib/stylex.d.ts

@@ -23,8 +23,10 @@ /**
 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<{
@@ -116,8 +118,10 @@ className?: 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<{
@@ -124,0 +128,0 @@ className?: string;

lib/stylex.js

@@ -13,5 +13,9 @@ 'use strict';
 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);
   }
@@ -115,4 +119,4 @@ const [className, style] = (0, _styleq.styleq)(styles);
 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];
   }
@@ -119,0 +123,0 @@ const [className] = (0, _styleq.styleq)(styles);

package.json

 {
   "name": "@stylexjs/stylex",
-  "version": "0.2.0-beta.22",
+  "version": "0.2.0-beta.23",
   "description": "A library for defining styles for optimized user interfaces.",
@@ -23,3 +23,3 @@ "main": "lib/stylex.js",
   "devDependencies": {
-    "@stylexjs/scripts": "0.2.0-beta.22"
+    "@stylexjs/scripts": "0.2.0-beta.23"
   },
@@ -26,0 +26,0 @@ "jest": {},

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

211045

increased by0.56%

Lines of code

3882

increased by0.31%

No dependency changes