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

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

@@ -3,125 +3,126 @@
 var _stylex = require("../stylex");
 const mockOptions = {
   customProperties: {},
+  hover: false,
   viewportHeight: 600,
   viewportWidth: 320
 };
-describe("styles", () => {
+describe('styles', () => {
   beforeEach(() => {
-    jest.spyOn(console, "warn");
+    jest.spyOn(console, 'warn');
     console.warn.mockImplementation(() => {});
   });
   afterEach(() => {
     console.warn.mockRestore();
   });
-  test("animation-delay", () => {
+  test('animation-delay', () => {
     const styles = _stylex.stylex.create({
       root: {
-        animationDelay: "0.3s"
+        animationDelay: '0.3s'
       }
     });
-    expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
   });
-  test("animation-duration", () => {
+  test('animation-duration', () => {
     const styles = _stylex.stylex.create({
       root: {
-        animationDuration: "0.5s"
+        animationDuration: '0.5s'
       }
     });
-    expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
   });
-  test("background-image", () => {
+  test('background-image', () => {
     const styles = _stylex.stylex.create({
       root: {
-        backgroundImage: "url(https://placehold.it/300/300"
+        backgroundImage: 'url(https://placehold.it/300/300'
       }
     });
-    _stylex.stylex.spread(styles.root, mockOptions);
+    _stylex.stylex.props(styles.root, mockOptions);
     expect(console.warn).toHaveBeenCalled();
   });
-  test("border-style", () => {
+  test('border-style', () => {
     const styles = _stylex.stylex.create({
       root: {
-        borderStyle: "none",
+        borderStyle: 'none',
         borderWidth: 10
       },
       override: {
-        borderStyle: "solid"
+        borderStyle: 'solid'
       }
     });
-    expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot();
-    expect(_stylex.stylex.spread([styles.root, styles.override], mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props([styles.root, styles.override], mockOptions)).toMatchSnapshot();
   });
-  test("box-shadow", () => {
+  test('box-shadow', () => {
     const styles = _stylex.stylex.create({
       root: {
-        boxShadow: "1px 2px 3px 4px red"
+        boxShadow: '1px 2px 3px 4px red'
       }
     });
-    expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
     const styles2 = _stylex.stylex.create({
       root: {
-        boxShadow: "1px 2px 3px 4px red, 2px 3px 4px 5px blue"
+        boxShadow: '1px 2px 3px 4px red, 2px 3px 4px 5px blue'
       }
     });
-    _stylex.stylex.spread(styles2.root, mockOptions);
+    _stylex.stylex.props(styles2.root, mockOptions);
     expect(console.warn).toHaveBeenCalledTimes(1);
     const styles3 = _stylex.stylex.create({
       root: {
-        boxShadow: "inset 1px 2px 3px 4px red"
+        boxShadow: 'inset 1px 2px 3px 4px red'
       }
     });
-    _stylex.stylex.spread(styles3.root, mockOptions);
+    _stylex.stylex.props(styles3.root, mockOptions);
     expect(console.warn).toHaveBeenCalledTimes(2);
   });
-  test("box-sizing: content-box", () => {
+  test('box-sizing: content-box', () => {
     const styles = _stylex.stylex.create({
       width: {
-        boxSizing: "content-box",
+        boxSizing: 'content-box',
         borderWidth: 2,
         padding: 10,
         width: 100,
-        overflow: "hidden"
+        overflow: 'hidden'
       },
       height: {
-        boxSizing: "content-box",
+        boxSizing: 'content-box',
         borderWidth: 2,
         padding: 10,
         height: 50
       },
       maxWidth: {
-        boxSizing: "content-box",
+        boxSizing: 'content-box',
         borderWidth: 2,
         padding: 10,
         maxWidth: 100
       },
       minWidth: {
-        boxSizing: "content-box",
+        boxSizing: 'content-box',
         borderWidth: 2,
         padding: 10,
         minWidth: 100
       },
       maxHeight: {
-        boxSizing: "content-box",
+        boxSizing: 'content-box',
         borderWidth: 2,
         padding: 10,
         maxHeight: 50
       },
       minHeight: {
-        boxSizing: "content-box",
+        boxSizing: 'content-box',
         borderWidth: 2,
         padding: 10,
         minHeight: 50
       },
       units: {
-        boxSizing: "content-box",
+        boxSizing: 'content-box',
         borderWidth: 2,
-        padding: "1rem",
-        width: "100px",
+        padding: '1rem',
+        width: '100px',
         height: 50
       },
       allDifferent: {
-        boxSizing: "content-box",
+        boxSizing: 'content-box',
         borderTopWidth: 1,
         borderRightWidth: 2,
         borderBottomWidth: 3,
@@ -134,193 +135,193 @@ describe("styles", () => {
         height: 100
       },
       auto: {
-        boxSizing: "content-box",
+        boxSizing: 'content-box',
         borderWidth: 2,
         padding: 10,
         height: 50,
-        width: "auto"
+        width: 'auto'
       }
     });
-    expect(_stylex.stylex.spread(styles.width, mockOptions)).toMatchSnapshot("width");
-    expect(_stylex.stylex.spread(styles.height, mockOptions)).toMatchSnapshot("height");
-    expect(_stylex.stylex.spread(styles.maxWidth, mockOptions)).toMatchSnapshot("maxWidth");
-    expect(_stylex.stylex.spread(styles.maxHeight, mockOptions)).toMatchSnapshot("maxHeight");
-    expect(_stylex.stylex.spread(styles.minWidth, mockOptions)).toMatchSnapshot("minWidth");
-    expect(_stylex.stylex.spread(styles.minHeight, mockOptions)).toMatchSnapshot("minHeight");
-    expect(_stylex.stylex.spread(styles.units, mockOptions)).toMatchSnapshot("units");
-    expect(_stylex.stylex.spread(styles.allDifferent, mockOptions)).toMatchSnapshot("allDifferent");
-    expect(_stylex.stylex.spread(styles.auto, mockOptions)).toMatchSnapshot("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');
   });
-  test("direction", () => {
+  test('direction', () => {
     const styles = _stylex.stylex.create({
       root: {
-        direction: "ltr"
+        direction: 'ltr'
       }
     });
-    expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
     const styles2 = _stylex.stylex.create({
       root: {
-        direction: "rtl"
+        direction: 'rtl'
       }
     });
-    expect(_stylex.stylex.spread(styles2.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props(styles2.root, mockOptions)).toMatchSnapshot();
   });
-  test("font-size", () => {
+  test('font-size', () => {
     const styles = _stylex.stylex.create({
       root: {
-        fontSize: "2.5rem"
+        fontSize: '2.5rem'
       }
     });
-    expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot("default");
-    expect(_stylex.stylex.spread(styles.root, {
+    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot('default');
+    expect(_stylex.stylex.props(styles.root, {
       ...mockOptions,
       fontScale: 2
-    })).toMatchSnapshot("fontScale:2");
+    })).toMatchSnapshot('fontScale:2');
   });
-  test("font-variant", () => {
+  test('font-variant', () => {
     const styles = _stylex.stylex.create({
       root: {
-        fontVariant: "common-ligatures small-caps"
+        fontVariant: 'common-ligatures small-caps'
       }
     });
-    expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
   });
-  test("font-weight", () => {
+  test('font-weight', () => {
     const styles = _stylex.stylex.create({
       root: {
         fontWeight: 900
       }
     });
-    expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
     const styles2 = _stylex.stylex.create({
       root: {
-        fontWeight: "bold"
+        fontWeight: 'bold'
       }
     });
-    expect(_stylex.stylex.spread(styles2.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props(styles2.root, mockOptions)).toMatchSnapshot();
   });
-  test("line-clamp", () => {
+  test('line-clamp', () => {
     const styles = _stylex.stylex.create({
       root: {
         lineClamp: 3
       }
     });
-    expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
   });
-  test("line-height", () => {
+  test('line-height', () => {
     const styles = _stylex.stylex.create({
       numeric: {
         lineHeight: 1.5
       },
       string: {
-        lineHeight: "1.5"
+        lineHeight: '1.5'
       },
       rem: {
-        lineHeight: "1.5rem"
+        lineHeight: '1.5rem'
       },
       px: {
-        lineHeight: "24px"
+        lineHeight: '24px'
       }
     });
-    expect(_stylex.stylex.spread(styles.numeric, mockOptions)).toMatchSnapshot("unitless number");
-    expect(_stylex.stylex.spread(styles.string, mockOptions)).toMatchSnapshot("unitless string");
-    expect(_stylex.stylex.spread(styles.rem, mockOptions)).toMatchSnapshot("rem");
-    expect(_stylex.stylex.spread(styles.px, mockOptions)).toMatchSnapshot("px");
+    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');
   });
-  test("object-fit", () => {
+  test('object-fit', () => {
     const styles = _stylex.stylex.create({
       contain: {
-        objectFit: "contain"
+        objectFit: 'contain'
       },
       cover: {
-        objectFit: "cover"
+        objectFit: 'cover'
       },
       fill: {
-        objectFit: "fill"
+        objectFit: 'fill'
       },
       scaleDown: {
-        objectFit: "scale-down"
+        objectFit: 'scale-down'
       },
       none: {
-        objectFit: "none"
+        objectFit: 'none'
       }
     });
-    expect(_stylex.stylex.spread(styles.contain, mockOptions)).toMatchSnapshot("contain");
-    expect(_stylex.stylex.spread(styles.cover, mockOptions)).toMatchSnapshot("contain");
-    expect(_stylex.stylex.spread(styles.fill, mockOptions)).toMatchSnapshot("fill");
-    expect(_stylex.stylex.spread(styles.scaleDown, mockOptions)).toMatchSnapshot("scaleDown");
-    expect(_stylex.stylex.spread(styles.none, mockOptions)).toMatchSnapshot("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');
   });
-  test("pointer-events", () => {
+  test('pointer-events', () => {
     const styles = _stylex.stylex.create({
       root: {
-        pointerEvents: "none"
+        pointerEvents: 'none'
       }
     });
-    expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
   });
-  test("position", () => {
+  test('position', () => {
     const styles = _stylex.stylex.create({
       static: {
-        position: "static"
+        position: 'static'
       },
       relative: {
-        position: "relative"
+        position: 'relative'
       },
       absolute: {
-        position: "absolute"
+        position: 'absolute'
       },
       fixed: {
-        position: "fixed"
+        position: 'fixed'
       },
       sticky: {
-        position: "sticky"
+        position: 'sticky'
       }
     });
-    expect(_stylex.stylex.spread(styles.static, mockOptions)).toMatchSnapshot("static");
-    expect(_stylex.stylex.spread(styles.relative, mockOptions)).toMatchSnapshot("relative");
-    expect(_stylex.stylex.spread(styles.absolute, mockOptions)).toMatchSnapshot("absolute");
-    expect(_stylex.stylex.spread(styles.fixed, mockOptions)).toMatchSnapshot("fixed");
-    expect(_stylex.stylex.spread(styles.sticky, mockOptions)).toMatchSnapshot("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(console.warn).toHaveBeenCalledTimes(3);
   });
-  test("text-shadow", () => {
+  test('text-shadow', () => {
     const styles = _stylex.stylex.create({
       root: {
-        textShadow: "1px 2px 3px red"
+        textShadow: '1px 2px 3px red'
       }
     });
-    expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
     const styles2 = _stylex.stylex.create({
       root: {
-        textShadow: "1px 2px 3px red, 2px 3px 4px blue"
+        textShadow: '1px 2px 3px red, 2px 3px 4px blue'
       }
     });
-    expect(_stylex.stylex.spread(styles2.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props(styles2.root, mockOptions)).toMatchSnapshot();
     expect(console.warn).toHaveBeenCalledTimes(1);
   });
-  test("transform", () => {
+  test('transform', () => {
     const styles = _stylex.stylex.create({
       none: {
-        transform: "none"
+        transform: 'none'
       },
       matrix: {
-        transform: "matrix(0.1, 1, -0.3, 1, 0, 0)"
+        transform: 'matrix(0.1, 1, -0.3, 1, 0, 0)'
       },
       perspective: {
-        transform: "perspective(10px)"
+        transform: 'perspective(10px)'
       },
       rotate: {
-        transform: "rotate(10deg) rotateX(20deg) rotateY(30deg) rotateZ(40deg) rotate3d(0, 0.5, 1, 90deg)"
+        transform: 'rotate(10deg) rotateX(20deg) rotateY(30deg) rotateZ(40deg) rotate3d(0, 0.5, 1, 90deg)'
       },
       scale: {
-        transform: "scale(1, 2) scaleX(1) scaleY(2) scaleZ(3) scale3d(1, 2, 3)"
+        transform: 'scale(1, 2) scaleX(1) scaleY(2) scaleZ(3) scale3d(1, 2, 3)'
       },
       skew: {
-        transform: "skew(10deg, 15deg) skewX(20deg) skewY(30deg)"
+        transform: 'skew(10deg, 15deg) skewX(20deg) skewY(30deg)'
       },
       translate: {
-        transform: "translate(10px, 20px) translateX(11px) translateY(12px) translateZ(13px) translate3d(20px, 30px, 40px)"
+        transform: 'translate(10px, 20px) translateX(11px) translateY(12px) translateZ(13px) translate3d(20px, 30px, 40px)'
       },
       mixed: {
         transform: `
@@ -330,153 +331,169 @@ describe("styles", () => {
         `
       }
     });
-    expect(_stylex.stylex.spread(styles.none, mockOptions)).toMatchSnapshot("none");
-    expect(_stylex.stylex.spread(styles.matrix, mockOptions)).toMatchSnapshot("matrix");
-    expect(_stylex.stylex.spread(styles.perspective, mockOptions)).toMatchSnapshot("perspective");
-    expect(_stylex.stylex.spread(styles.rotate, mockOptions)).toMatchSnapshot("rotate");
-    expect(_stylex.stylex.spread(styles.scale, mockOptions)).toMatchSnapshot("scale");
-    expect(_stylex.stylex.spread(styles.skew, mockOptions)).toMatchSnapshot("skew");
-    expect(_stylex.stylex.spread(styles.translate, mockOptions)).toMatchSnapshot("translate");
-    expect(_stylex.stylex.spread(styles.rotate, mockOptions)).toMatchSnapshot("rotate");
-    expect(_stylex.stylex.spread(styles.mixed, mockOptions)).toMatchSnapshot("mixed");
+    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');
   });
-  test("transition-delay", () => {
+  test('transition-delay', () => {
     const styles = _stylex.stylex.create({
       root: {
-        transitionDelay: "0.3s"
+        transitionDelay: '0.3s'
       }
     });
-    expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
   });
-  test("transition-duration", () => {
+  test('transition-duration', () => {
     const styles = _stylex.stylex.create({
       root: {
-        transitionDuration: "0.5s"
+        transitionDuration: '0.5s'
       }
     });
-    expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
   });
-  test("user-select", () => {
+  test('user-select', () => {
     const styles = _stylex.stylex.create({
       root: {
-        userSelect: "none"
+        userSelect: 'none'
       }
     });
-    expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
   });
-  test("vertical-align", () => {
+  test('vertical-align', () => {
     const styles = _stylex.stylex.create({
       middle: {
-        verticalAlign: "middle"
+        verticalAlign: 'middle'
       },
       top: {
-        verticalAlign: "top"
+        verticalAlign: 'top'
       }
     });
-    expect(_stylex.stylex.spread(styles.middle, mockOptions)).toMatchSnapshot("middle");
-    expect(_stylex.stylex.spread(styles.top, mockOptions)).toMatchSnapshot("top");
+    expect(_stylex.stylex.props(styles.middle, mockOptions)).toMatchSnapshot('middle');
+    expect(_stylex.stylex.props(styles.top, mockOptions)).toMatchSnapshot('top');
+  });
+  test(':hover syntax', () => {
+    const styles = _stylex.stylex.create({
+      root: {
+        backgroundColor: {
+          default: 'red',
+          ':hover': 'blue'
+        }
+      }
+    });
+    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot('not hovered');
+    const hoverOptions = {
+      ...mockOptions,
+      hover: true
+    };
+    expect(_stylex.stylex.props(styles.root, hoverOptions)).toMatchSnapshot('hovered');
   });
 });
-describe("logical styles", () => {
-  test("blockSize", () => {
+describe('logical styles', () => {
+  test('blockSize', () => {
     const styles = _stylex.stylex.create({
       blockSize: {
-        blockSize: "100px"
+        blockSize: '100px'
       },
       maxBlockSize: {
-        maxBlockSize: "100px"
+        maxBlockSize: '100px'
       },
       minBlockSize: {
-        minBlockSize: "100px"
+        minBlockSize: '100px'
       }
     });
-    expect(_stylex.stylex.spread(styles.blockSize, mockOptions)).toMatchSnapshot("blockSize");
-    expect(_stylex.stylex.spread([{
+    expect(_stylex.stylex.props(styles.blockSize, mockOptions)).toMatchSnapshot('blockSize');
+    expect(_stylex.stylex.props([{
       height: 200
-    }, styles.blockSize], mockOptions)).toMatchSnapshot("blockSize after height");
-    expect(_stylex.stylex.spread(styles.maxBlockSize, mockOptions)).toMatchSnapshot("maxBlockSize");
-    expect(_stylex.stylex.spread([{
+    }, styles.blockSize], mockOptions)).toMatchSnapshot('blockSize after height');
+    expect(_stylex.stylex.props(styles.maxBlockSize, mockOptions)).toMatchSnapshot('maxBlockSize');
+    expect(_stylex.stylex.props([{
       maxHeight: 200
-    }, styles.maxBlockSize], mockOptions)).toMatchSnapshot("maxBlockSize after maxHeight");
-    expect(_stylex.stylex.spread(styles.minBlockSize, mockOptions)).toMatchSnapshot("minBlockSize");
-    expect(_stylex.stylex.spread([{
+    }, styles.maxBlockSize], mockOptions)).toMatchSnapshot('maxBlockSize after maxHeight');
+    expect(_stylex.stylex.props(styles.minBlockSize, mockOptions)).toMatchSnapshot('minBlockSize');
+    expect(_stylex.stylex.props([{
       minHeight: 200
-    }, styles.minBlockSize], mockOptions)).toMatchSnapshot("minBlockSize after minHeight");
+    }, styles.minBlockSize], mockOptions)).toMatchSnapshot('minBlockSize after minHeight');
   });
-  test("inlineSize", () => {
+  test('inlineSize', () => {
     const styles = _stylex.stylex.create({
       inlineSize: {
-        inlineSize: "100px"
+        inlineSize: '100px'
       },
       maxInlineSize: {
-        maxInlineSize: "100px"
+        maxInlineSize: '100px'
       },
       minInlineSize: {
-        minInlineSize: "100px"
+        minInlineSize: '100px'
       }
     });
-    expect(_stylex.stylex.spread(styles.inlineSize, mockOptions)).toMatchSnapshot("inlineSize");
-    expect(_stylex.stylex.spread([{
+    expect(_stylex.stylex.props(styles.inlineSize, mockOptions)).toMatchSnapshot('inlineSize');
+    expect(_stylex.stylex.props([{
       width: 200
-    }, styles.inlineSize], mockOptions)).toMatchSnapshot("inlineSize after width");
-    expect(_stylex.stylex.spread(styles.maxInlineSize, mockOptions)).toMatchSnapshot("maxInlineSize");
-    expect(_stylex.stylex.spread([{
+    }, styles.inlineSize], mockOptions)).toMatchSnapshot('inlineSize after width');
+    expect(_stylex.stylex.props(styles.maxInlineSize, mockOptions)).toMatchSnapshot('maxInlineSize');
+    expect(_stylex.stylex.props([{
       maxWidth: 200
-    }, styles.maxInlineSize], mockOptions)).toMatchSnapshot("maxInlineSize after maxWidth");
-    expect(_stylex.stylex.spread(styles.minInlineSize, mockOptions)).toMatchSnapshot("minInlineSize");
-    expect(_stylex.stylex.spread([{
+    }, styles.maxInlineSize], mockOptions)).toMatchSnapshot('maxInlineSize after maxWidth');
+    expect(_stylex.stylex.props(styles.minInlineSize, mockOptions)).toMatchSnapshot('minInlineSize');
+    expect(_stylex.stylex.props([{
       minWidth: 200
-    }, styles.minInlineSize], mockOptions)).toMatchSnapshot("minInlineSize after minWidth");
+    }, styles.minInlineSize], mockOptions)).toMatchSnapshot('minInlineSize after minWidth');
   });
-  test("borderBlock", () => {
+  test('borderBlock', () => {
     const styles = _stylex.stylex.create({
       borderBlock: {
-        borderBlockColor: "black",
-        borderBlockStyle: "solid",
+        borderBlockColor: 'black',
+        borderBlockStyle: 'solid',
         borderBlockWidth: 1
       },
       borderBlockEnd: {
-        borderBlockEndColor: "red",
-        borderBlockEndStyle: "dotted",
+        borderBlockEndColor: 'red',
+        borderBlockEndStyle: 'dotted',
         borderBlockEndWidth: 2
       },
       borderBlockStart: {
-        borderBlockStartColor: "green",
-        borderBlockStartStyle: "dashed",
+        borderBlockStartColor: 'green',
+        borderBlockStartStyle: 'dashed',
         borderBlockStartWidth: 3
       }
     });
-    expect(_stylex.stylex.spread(styles.borderBlock, mockOptions)).toMatchSnapshot("borderBlock");
-    expect(_stylex.stylex.spread(styles.borderBlockEnd, mockOptions)).toMatchSnapshot("borderBlockEnd");
-    expect(_stylex.stylex.spread(styles.borderBlockStart, mockOptions)).toMatchSnapshot("borderBlockStart");
-    expect(_stylex.stylex.spread([styles.borderBlockEnd, styles.borderBlock], mockOptions)).toMatchSnapshot("borderBlock after borderBlockEnd");
-    expect(_stylex.stylex.spread([styles.borderBlockStart, styles.borderBlock], mockOptions)).toMatchSnapshot("borderBlock after borderBlockStart");
+    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');
   });
-  test("borderInline", () => {
+  test('borderInline', () => {
     const styles = _stylex.stylex.create({
       borderInline: {
-        borderInlineColor: "black",
-        borderInlineStyle: "solid",
+        borderInlineColor: 'black',
+        borderInlineStyle: 'solid',
         borderInlineWidth: 1
       },
       borderInlineEnd: {
-        borderInlineEndColor: "red",
-        borderInlineEndStyle: "dotted",
+        borderInlineEndColor: 'red',
+        borderInlineEndStyle: 'dotted',
         borderInlineEndWidth: 2
       },
       borderInlineStart: {
-        borderInlineStartColor: "green",
-        borderInlineStartStyle: "dashed",
+        borderInlineStartColor: 'green',
+        borderInlineStartStyle: 'dashed',
         borderInlineStartWidth: 3
       }
     });
-    expect(_stylex.stylex.spread(styles.borderInline, mockOptions)).toMatchSnapshot("borderInline");
-    expect(_stylex.stylex.spread(styles.borderInlineEnd, mockOptions)).toMatchSnapshot("borderInlineEnd");
-    expect(_stylex.stylex.spread(styles.borderInlineStart, mockOptions)).toMatchSnapshot("borderInlineStart");
-    expect(_stylex.stylex.spread([styles.borderInlineEnd, styles.borderInline], mockOptions)).toMatchSnapshot("borderInline after borderInlineEnd");
-    expect(_stylex.stylex.spread([styles.borderInlineStart, styles.borderInline], mockOptions)).toMatchSnapshot("borderInline after borderInlineStart");
+    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');
   });
-  test("borderRadius", () => {
+  test('borderRadius', () => {
     const styles = _stylex.stylex.create({
       startstart: {
         borderStartStartRadius: 10
@@ -491,24 +508,24 @@ describe("logical styles", () => {
         borderEndEndRadius: 10
       }
     });
-    expect(_stylex.stylex.spread(styles.startstart, mockOptions)).toMatchSnapshot("startstart");
-    expect(_stylex.stylex.spread(styles.startend, mockOptions)).toMatchSnapshot("startend");
-    expect(_stylex.stylex.spread(styles.endstart, mockOptions)).toMatchSnapshot("endstart");
-    expect(_stylex.stylex.spread(styles.endend, mockOptions)).toMatchSnapshot("endend");
+    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');
   });
-  test.skip("borderStyle", () => {
+  test.skip('borderStyle', () => {
     const styles = _stylex.stylex.create({
       root: {}
     });
-    expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
   });
-  test.skip("borderWidth", () => {
+  test.skip('borderWidth', () => {
     const styles = _stylex.stylex.create({
       root: {}
     });
-    expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props(styles.root, mockOptions)).toMatchSnapshot();
   });
-  test("inset", () => {
+  test('inset', () => {
     const styles = _stylex.stylex.create({
       inset: {
         inset: 1
@@ -532,31 +549,31 @@ describe("logical styles", () => {
         insetInlineEnd: 7
       }
     });
-    expect(_stylex.stylex.spread(styles.inset, mockOptions)).toMatchSnapshot("inset");
-    expect(_stylex.stylex.spread(styles.insetBlock, mockOptions)).toMatchSnapshot("insetBlock");
-    expect(_stylex.stylex.spread(styles.insetBlockStart, mockOptions)).toMatchSnapshot("insetBlockStart");
-    expect(_stylex.stylex.spread(styles.insetBlockEnd, mockOptions)).toMatchSnapshot("insetBlockEnd");
-    expect(_stylex.stylex.spread(styles.insetInline, mockOptions)).toMatchSnapshot("insetInline");
-    expect(_stylex.stylex.spread(styles.insetInlineStart, mockOptions)).toMatchSnapshot("insetInlineStart");
-    expect(_stylex.stylex.spread(styles.insetInlineEnd, mockOptions)).toMatchSnapshot("insetInlineEnd");
-    expect(_stylex.stylex.spread([{
+    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([{
       left: 10,
       right: 10,
       bottom: 100,
       top: 100
-    }, styles.insetBlockStart], mockOptions)).toMatchSnapshot("inset vs top");
-    expect(_stylex.stylex.spread([{
+    }, styles.insetBlockStart], mockOptions)).toMatchSnapshot('inset vs top');
+    expect(_stylex.stylex.props([{
       bottom: 100,
       top: 100
-    }, styles.insetBlockStart], mockOptions)).toMatchSnapshot("insetBlock vs top");
-    expect(_stylex.stylex.spread([{
+    }, styles.insetBlockStart], mockOptions)).toMatchSnapshot('insetBlock vs top');
+    expect(_stylex.stylex.props([{
       top: 100
-    }, styles.insetBlockStart], mockOptions)).toMatchSnapshot("insetBlockStart vs top");
-    expect(_stylex.stylex.spread([{
+    }, styles.insetBlockStart], mockOptions)).toMatchSnapshot('insetBlockStart vs top');
+    expect(_stylex.stylex.props([{
       bottom: 100
-    }, styles.insetBlockEnd], mockOptions)).toMatchSnapshot("insetBlockEnd vs bottom");
+    }, styles.insetBlockEnd], mockOptions)).toMatchSnapshot('insetBlockEnd vs bottom');
   });
-  test("margin", () => {
+  test('margin', () => {
     const styles = _stylex.stylex.create({
       marginBlock: {
         marginBlock: 1
@@ -577,14 +594,14 @@ describe("logical styles", () => {
         marginInlineEnd: 3
       }
     });
-    expect(_stylex.stylex.spread(styles.marginBlock, mockOptions)).toMatchSnapshot("marginBlock");
-    expect(_stylex.stylex.spread(styles.marginBlockStart, mockOptions)).toMatchSnapshot("marginBlockStart");
-    expect(_stylex.stylex.spread(styles.marginBlockEnd, mockOptions)).toMatchSnapshot("marginBlockEnd");
-    expect(_stylex.stylex.spread(styles.marginInline, mockOptions)).toMatchSnapshot("marginInline");
-    expect(_stylex.stylex.spread(styles.marginInlineStart, mockOptions)).toMatchSnapshot("marginInlineStart");
-    expect(_stylex.stylex.spread(styles.marginInlineEnd, mockOptions)).toMatchSnapshot("marginInlineEnd");
+    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');
   });
-  test("padding", () => {
+  test('padding', () => {
     const styles = _stylex.stylex.create({
       paddingBlock: {
         paddingBlock: 1
@@ -605,28 +622,28 @@ describe("logical styles", () => {
         paddingInlineEnd: 3
       }
     });
-    expect(_stylex.stylex.spread(styles.paddingBlock, mockOptions)).toMatchSnapshot("paddingBlock");
-    expect(_stylex.stylex.spread(styles.paddingBlockStart, mockOptions)).toMatchSnapshot("paddingBlockStart");
-    expect(_stylex.stylex.spread(styles.paddingBlockEnd, mockOptions)).toMatchSnapshot("paddingBlockEnd");
-    expect(_stylex.stylex.spread(styles.paddingInline, mockOptions)).toMatchSnapshot("paddingInline");
-    expect(_stylex.stylex.spread(styles.paddingInlineStart, mockOptions)).toMatchSnapshot("paddingInlineStart");
-    expect(_stylex.stylex.spread(styles.paddingInlineEnd, mockOptions)).toMatchSnapshot("paddingInlineEnd");
+    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');
   });
-  test("textAlign", () => {
+  test('textAlign', () => {
     const styles = _stylex.stylex.create({
       start: {
-        textAlign: "start"
+        textAlign: 'start'
       },
       end: {
-        textAlign: "end"
+        textAlign: 'end'
       }
     });
-    expect(_stylex.stylex.spread(styles.start, mockOptions)).toMatchSnapshot("start");
-    expect(_stylex.stylex.spread(styles.end, mockOptions)).toMatchSnapshot("end");
+    expect(_stylex.stylex.props(styles.start, mockOptions)).toMatchSnapshot('start');
+    expect(_stylex.stylex.props(styles.end, mockOptions)).toMatchSnapshot('end');
   });
 });
-describe("length units", () => {
-  const unitsToTest = ["em", "px", "rem", "vh", "vmax", "vmin", "vw"];
+describe('length units', () => {
+  const unitsToTest = ['em', 'px', 'rem', 'vh', 'vmax', 'vmin', 'vw'];
   const value = 10;
   for (const unitToTest of unitsToTest) {
     test(`${value} "${unitToTest}" units are resolved to pixels`, () => {
@@ -635,7 +652,7 @@ describe("length units", () => {
           width: `${value}${unitToTest}`
         }
       });
-      expect(_stylex.stylex.spread(styles.underTest, mockOptions)).toMatchSnapshot();
+      expect(_stylex.stylex.props(styles.underTest, mockOptions)).toMatchSnapshot();
     });
   }
   test(`${value} "em" units based on inherited font-size`, () => {
@@ -644,44 +661,44 @@ describe("length units", () => {
         width: `${value}em`
       }
     });
-    expect(_stylex.stylex.spread(styles.underTest, {
+    expect(_stylex.stylex.props(styles.underTest, {
       ...mockOptions,
       inheritedFontSize: 12
     })).toMatchSnapshot();
   });
 });
-describe("custom properties", () => {
+describe('custom properties', () => {
   beforeEach(() => {
-    jest.spyOn(console, "error");
+    jest.spyOn(console, 'error');
     console.error.mockImplementation(() => {});
   });
   afterEach(() => {
     console.error.mockRestore();
   });
-  test("filters out the property and emits a warning when encountering a variable name which has not been provided", () => {
+  test('filters out the property and emits a warning when encountering a variable name which has not been provided', () => {
     const {
       underTest
     } = _stylex.stylex.create({
       underTest: {
-        width: "var(--unprovided)"
+        width: 'var(--unprovided)'
       }
     });
-    expect(_stylex.stylex.spread(underTest, mockOptions)).toMatchSnapshot();
-    expect(console.error).toHaveBeenCalledWith("stylex: Unrecognized custom property \"--unprovided\"");
+    expect(_stylex.stylex.props(underTest, mockOptions)).toMatchSnapshot();
+    expect(console.error).toHaveBeenCalledWith('stylex: Unrecognized custom property "--unprovided"');
   });
   test("resolves custom properties' values", () => {
     const {
       underTest
     } = _stylex.stylex.create({
       underTest: {
-        color: "var(--slightly-darker-black)",
-        width: "var(--the-best-width)"
+        color: 'var(--slightly-darker-black)',
+        width: 'var(--the-best-width)'
       }
     });
-    expect(_stylex.stylex.spread(underTest, {
+    expect(_stylex.stylex.props(underTest, {
       ...mockOptions,
       customProperties: {
-        slightlyDarkerBlack: "#333",
+        slightlyDarkerBlack: '#333',
         theBestWidth: 42
       }
     })).toMatchSnapshot();
@@ -703,7 +720,7 @@ expect.extend({
         }
       }
     });
-    const props = _stylex.stylex.spread(underTest, {
+    const props = _stylex.stylex.props(underTest, {
       viewportHeight: height,
       viewportWidth: width
     });
@@ -721,68 +738,68 @@ expect.extend({
     }
   }
 });
-describe("media queries", () => {
-  test("matches a \"min-width\" query", () => {
-    expect("(min-width: 400px)").toMatchWindowDimensions({
+describe('media queries', () => {
+  test('matches a "min-width" query', () => {
+    expect('(min-width: 400px)').toMatchWindowDimensions({
       width: 450,
       height: 0
     });
-    expect("(min-width: 400px)").not.toMatchWindowDimensions({
+    expect('(min-width: 400px)').not.toMatchWindowDimensions({
       width: 350,
       height: 0
     });
   });
-  test("matches a \"max-width\" query", () => {
-    expect("(max-width: 400px)").toMatchWindowDimensions({
+  test('matches a "max-width" query', () => {
+    expect('(max-width: 400px)').toMatchWindowDimensions({
       width: 350,
       height: 0
     });
-    expect("(max-width: 400px)").not.toMatchWindowDimensions({
+    expect('(max-width: 400px)').not.toMatchWindowDimensions({
       width: 450,
       height: 0
     });
   });
-  test("matches a \"min-height\" query", () => {
-    expect("(min-height: 400px)").toMatchWindowDimensions({
+  test('matches a "min-height" query', () => {
+    expect('(min-height: 400px)').toMatchWindowDimensions({
       width: 0,
       height: 450
     });
-    expect("(min-height: 400px)").not.toMatchWindowDimensions({
+    expect('(min-height: 400px)').not.toMatchWindowDimensions({
       width: 0,
       height: 350
     });
   });
-  test("matches a \"max-height\" query", () => {
-    expect("(max-height: 400px)").toMatchWindowDimensions({
+  test('matches a "max-height" query', () => {
+    expect('(max-height: 400px)').toMatchWindowDimensions({
       width: 0,
       height: 350
     });
-    expect("(max-height: 400px)").not.toMatchWindowDimensions({
+    expect('(max-height: 400px)').not.toMatchWindowDimensions({
       width: 0,
       height: 450
     });
   });
 });
-describe("unsupported style properties", () => {
+describe('unsupported style properties', () => {
   beforeEach(() => {
-    jest.spyOn(console, "warn");
+    jest.spyOn(console, 'warn');
     console.warn.mockImplementation(() => {});
   });
   afterEach(() => {
     console.warn.mockRestore();
   });
-  test("\"filter\"", () => {
+  test('"filter"', () => {
     const {
       underTest
     } = _stylex.stylex.create({
       underTest: {
-        filter: "blur(1px)"
+        filter: 'blur(1px)'
       }
     });
-    expect(_stylex.stylex.spread(underTest, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props(underTest, mockOptions)).toMatchSnapshot();
     expect(console.warn).toHaveBeenCalled();
   });
-  test("\"marginStart\"", () => {
+  test('"marginStart"', () => {
     const {
       underTest
     } = _stylex.stylex.create({
@@ -790,10 +807,10 @@ describe("unsupported style properties", () => {
         marginStart: 10
       }
     });
-    expect(_stylex.stylex.spread(underTest, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props(underTest, mockOptions)).toMatchSnapshot();
     expect(console.warn).toHaveBeenCalled();
   });
-  test("\"marginEnd\"", () => {
+  test('"marginEnd"', () => {
     const {
       underTest
     } = _stylex.stylex.create({
@@ -801,10 +818,10 @@ describe("unsupported style properties", () => {
         marginEnd: 10
       }
     });
-    expect(_stylex.stylex.spread(underTest, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props(underTest, mockOptions)).toMatchSnapshot();
     expect(console.warn).toHaveBeenCalled();
   });
-  test("\"marginHorizontal\"", () => {
+  test('"marginHorizontal"', () => {
     const {
       underTest
     } = _stylex.stylex.create({
@@ -812,10 +829,10 @@ describe("unsupported style properties", () => {
         marginHorizontal: 10
       }
     });
-    expect(_stylex.stylex.spread(underTest, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props(underTest, mockOptions)).toMatchSnapshot();
     expect(console.warn).toHaveBeenCalled();
   });
-  test("\"marginVertical\"", () => {
+  test('"marginVertical"', () => {
     const {
       underTest
     } = _stylex.stylex.create({
@@ -823,10 +840,10 @@ describe("unsupported style properties", () => {
         marginVertical: 10
       }
     });
-    expect(_stylex.stylex.spread(underTest, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props(underTest, mockOptions)).toMatchSnapshot();
     expect(console.warn).toHaveBeenCalled();
   });
-  test("\"paddingHorizontal\"", () => {
+  test('"paddingHorizontal"', () => {
     const {
       underTest
     } = _stylex.stylex.create({
@@ -834,10 +851,10 @@ describe("unsupported style properties", () => {
         paddingHorizontal: 10
       }
     });
-    expect(_stylex.stylex.spread(underTest, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props(underTest, mockOptions)).toMatchSnapshot();
     expect(console.warn).toHaveBeenCalled();
   });
-  test("\"paddingVertical\"", () => {
+  test('"paddingVertical"', () => {
     const {
       underTest
     } = _stylex.stylex.create({
@@ -845,63 +862,63 @@ describe("unsupported style properties", () => {
         paddingVertical: 10
       }
     });
-    expect(_stylex.stylex.spread(underTest, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props(underTest, mockOptions)).toMatchSnapshot();
     expect(console.warn).toHaveBeenCalled();
   });
-  test("\"transitionProperty\" passthrough", () => {
+  test('"transitionProperty" passthrough', () => {
     const {
       underTest
     } = _stylex.stylex.create({
       underTest: {
-        transitionProperty: "opacity"
+        transitionProperty: 'opacity'
       }
     });
-    expect(_stylex.stylex.spread(underTest, {
+    expect(_stylex.stylex.props(underTest, {
       ...mockOptions,
-      passthroughProperties: ["transitionProperty"]
+      passthroughProperties: ['transitionProperty']
     })).toMatchSnapshot();
     expect(console.warn).not.toHaveBeenCalled();
   });
 });
-describe("unsupported style values", () => {
+describe('unsupported style values', () => {
   beforeEach(() => {
-    jest.spyOn(console, "warn");
+    jest.spyOn(console, 'warn');
     console.warn.mockImplementation(() => {});
   });
   afterEach(() => {
     console.warn.mockRestore();
   });
-  test("calc", () => {
+  test('calc', () => {
     const {
       underTest
     } = _stylex.stylex.create({
       underTest: {
-        width: "calc(2 * 1rem)"
+        width: 'calc(2 * 1rem)'
       }
     });
-    expect(_stylex.stylex.spread(underTest, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props(underTest, mockOptions)).toMatchSnapshot();
     expect(console.warn).toHaveBeenCalled();
   });
-  test("inherit", () => {
+  test('inherit', () => {
     const {
       underTest
     } = _stylex.stylex.create({
       underTest: {
-        fontSize: "inherit"
+        fontSize: 'inherit'
       }
     });
-    expect(_stylex.stylex.spread(underTest, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props(underTest, mockOptions)).toMatchSnapshot();
     expect(console.warn).toHaveBeenCalled();
   });
-  test("initial", () => {
+  test('initial', () => {
     const {
       underTest
     } = _stylex.stylex.create({
       underTest: {
-        fontSize: "initial"
+        fontSize: 'initial'
       }
     });
-    expect(_stylex.stylex.spread(underTest, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props(underTest, mockOptions)).toMatchSnapshot();
     expect(console.warn).toHaveBeenCalled();
   });
 });