@stylexjs/stylex 0.2.0-beta.8 → 0.3.0

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

@@ -0,0 +1,924 @@
+"use strict";
+
+var _stylex = require("../stylex");
+const mockOptions = {
+  customProperties: {},
+  hover: false,
+  viewportHeight: 600,
+  viewportWidth: 320
+};
+describe('styles', () => {
+  beforeEach(() => {
+    jest.spyOn(console, 'warn');
+    console.warn.mockImplementation(() => {});
+  });
+  afterEach(() => {
+    console.warn.mockRestore();
+  });
+  test('animation-delay', () => {
+    const styles = _stylex.stylex.create({
+      root: {
+        animationDelay: '0.3s'
+      }
+    });
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
+  });
+  test('animation-duration', () => {
+    const styles = _stylex.stylex.create({
+      root: {
+        animationDuration: '0.5s'
+      }
+    });
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
+  });
+  test('background-image', () => {
+    const styles = _stylex.stylex.create({
+      root: {
+        backgroundImage: 'url(https://placehold.it/300/300'
+      }
+    });
+    _stylex.stylex.props.call(mockOptions, styles.root);
+    expect(console.warn).toHaveBeenCalled();
+  });
+  test('border-style', () => {
+    const styles = _stylex.stylex.create({
+      root: {
+        borderStyle: 'none',
+        borderWidth: 10
+      },
+      override: {
+        borderStyle: 'solid'
+      }
+    });
+    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({
+      root: {
+        boxShadow: '1px 2px 3px 4px red'
+      }
+    });
+    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.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.call(mockOptions, styles3.root);
+    expect(console.warn).toHaveBeenCalledTimes(2);
+  });
+  test('box-sizing: content-box', () => {
+    const styles = _stylex.stylex.create({
+      width: {
+        boxSizing: 'content-box',
+        borderWidth: 2,
+        padding: 10,
+        width: 100,
+        overflow: 'hidden'
+      },
+      height: {
+        boxSizing: 'content-box',
+        borderWidth: 2,
+        padding: 10,
+        height: 50
+      },
+      maxWidth: {
+        boxSizing: 'content-box',
+        borderWidth: 2,
+        padding: 10,
+        maxWidth: 100
+      },
+      minWidth: {
+        boxSizing: 'content-box',
+        borderWidth: 2,
+        padding: 10,
+        minWidth: 100
+      },
+      maxHeight: {
+        boxSizing: 'content-box',
+        borderWidth: 2,
+        padding: 10,
+        maxHeight: 50
+      },
+      minHeight: {
+        boxSizing: 'content-box',
+        borderWidth: 2,
+        padding: 10,
+        minHeight: 50
+      },
+      units: {
+        boxSizing: 'content-box',
+        borderWidth: 2,
+        padding: '1rem',
+        width: '100px',
+        height: 50
+      },
+      allDifferent: {
+        boxSizing: 'content-box',
+        borderTopWidth: 1,
+        borderRightWidth: 2,
+        borderBottomWidth: 3,
+        borderLeftWidth: 4,
+        paddingTop: 10,
+        paddingRight: 20,
+        paddingBottom: 30,
+        paddingLeft: 40,
+        width: 100,
+        height: 100
+      },
+      auto: {
+        boxSizing: 'content-box',
+        borderWidth: 2,
+        padding: 10,
+        height: 50,
+        width: '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({
+      root: {
+        direction: 'ltr'
+      }
+    });
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
+    const styles2 = _stylex.stylex.create({
+      root: {
+        direction: 'rtl'
+      }
+    });
+    expect(_stylex.stylex.props.call(mockOptions, styles2.root)).toMatchSnapshot();
+  });
+  test('font-size', () => {
+    const styles = _stylex.stylex.create({
+      root: {
+        fontSize: '2.5rem'
+      }
+    });
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot('default');
+    expect(_stylex.stylex.props.call({
+      ...mockOptions,
+      fontScale: 2
+    }, styles.root)).toMatchSnapshot('fontScale:2');
+  });
+  test('font-variant', () => {
+    const styles = _stylex.stylex.create({
+      root: {
+        fontVariant: 'common-ligatures small-caps'
+      }
+    });
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
+  });
+  test('font-weight', () => {
+    const styles = _stylex.stylex.create({
+      root: {
+        fontWeight: 900
+      }
+    });
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
+    const styles2 = _stylex.stylex.create({
+      root: {
+        fontWeight: 'bold'
+      }
+    });
+    expect(_stylex.stylex.props.call(mockOptions, styles2.root)).toMatchSnapshot();
+  });
+  test('line-clamp', () => {
+    const styles = _stylex.stylex.create({
+      root: {
+        lineClamp: 3
+      }
+    });
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
+  });
+  test('line-height', () => {
+    const styles = _stylex.stylex.create({
+      numeric: {
+        lineHeight: 1.5
+      },
+      string: {
+        lineHeight: '1.5'
+      },
+      rem: {
+        lineHeight: '1.5rem'
+      },
+      px: {
+        lineHeight: '24px'
+      }
+    });
+    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({
+      contain: {
+        objectFit: 'contain'
+      },
+      cover: {
+        objectFit: 'cover'
+      },
+      fill: {
+        objectFit: 'fill'
+      },
+      scaleDown: {
+        objectFit: 'scale-down'
+      },
+      none: {
+        objectFit: '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({
+      root: {
+        pointerEvents: 'none'
+      }
+    });
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
+  });
+  test('position', () => {
+    const styles = _stylex.stylex.create({
+      static: {
+        position: 'static'
+      },
+      relative: {
+        position: 'relative'
+      },
+      absolute: {
+        position: 'absolute'
+      },
+      fixed: {
+        position: 'fixed'
+      },
+      sticky: {
+        position: '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', () => {
+    const styles = _stylex.stylex.create({
+      root: {
+        textShadow: '1px 2px 3px red'
+      }
+    });
+    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.call(mockOptions, styles2.root)).toMatchSnapshot();
+    expect(console.warn).toHaveBeenCalledTimes(1);
+  });
+  test('transform', () => {
+    const styles = _stylex.stylex.create({
+      none: {
+        transform: 'none'
+      },
+      matrix: {
+        transform: 'matrix(0.1, 1, -0.3, 1, 0, 0)'
+      },
+      perspective: {
+        transform: 'perspective(10px)'
+      },
+      rotate: {
+        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)'
+      },
+      skew: {
+        transform: 'skew(10deg, 15deg) skewX(20deg) skewY(30deg)'
+      },
+      translate: {
+        transform: 'translate(10px, 20px) translateX(11px) translateY(12px) translateZ(13px) translate3d(20px, 30px, 40px)'
+      },
+      mixed: {
+        transform: `
+          rotateX(1deg) rotateY(2deg) rotateZ(3deg) rotate3d(1deg, 2deg, 3deg)
+          scale(1) scaleX(2) scaleY(3) scaleZ(4) scale3d(1,2,3)
+          translateX(1px) translateY(1em) translateZ(1rem) translate3d(1px, 1em, 1rem)
+        `
+      }
+    });
+    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({
+      root: {
+        transitionDelay: '0.3s'
+      }
+    });
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
+  });
+  test('transition-duration', () => {
+    const styles = _stylex.stylex.create({
+      root: {
+        transitionDuration: '0.5s'
+      }
+    });
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
+  });
+  test('user-select', () => {
+    const styles = _stylex.stylex.create({
+      root: {
+        userSelect: 'none'
+      }
+    });
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
+  });
+  test('vertical-align', () => {
+    const styles = _stylex.stylex.create({
+      middle: {
+        verticalAlign: 'middle'
+      },
+      top: {
+        verticalAlign: '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({
+      root: {
+        backgroundColor: {
+          default: 'red',
+          ':hover': 'blue'
+        }
+      }
+    });
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot('not hovered');
+    const hoverOptions = {
+      ...mockOptions,
+      hover: true
+    };
+    expect(_stylex.stylex.props.call(hoverOptions, styles.root)).toMatchSnapshot('hovered');
+  });
+});
+describe('logical styles', () => {
+  test('blockSize', () => {
+    const styles = _stylex.stylex.create({
+      blockSize: {
+        blockSize: '100px'
+      },
+      maxBlockSize: {
+        maxBlockSize: '100px'
+      },
+      minBlockSize: {
+        minBlockSize: '100px'
+      }
+    });
+    expect(_stylex.stylex.props.call(mockOptions, styles.blockSize)).toMatchSnapshot('blockSize');
+    expect(_stylex.stylex.props.call(mockOptions, {
+      height: 200
+    }, 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)).toMatchSnapshot('maxBlockSize after maxHeight');
+    expect(_stylex.stylex.props.call(mockOptions, styles.minBlockSize)).toMatchSnapshot('minBlockSize');
+    expect(_stylex.stylex.props.call(mockOptions, {
+      minHeight: 200
+    }, styles.minBlockSize)).toMatchSnapshot('minBlockSize after minHeight');
+  });
+  test('inlineSize', () => {
+    const styles = _stylex.stylex.create({
+      inlineSize: {
+        inlineSize: '100px'
+      },
+      maxInlineSize: {
+        maxInlineSize: '100px'
+      },
+      minInlineSize: {
+        minInlineSize: '100px'
+      }
+    });
+    expect(_stylex.stylex.props.call(mockOptions, styles.inlineSize)).toMatchSnapshot('inlineSize');
+    expect(_stylex.stylex.props.call(mockOptions, {
+      width: 200
+    }, 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)).toMatchSnapshot('maxInlineSize after maxWidth');
+    expect(_stylex.stylex.props.call(mockOptions, styles.minInlineSize)).toMatchSnapshot('minInlineSize');
+    expect(_stylex.stylex.props.call(mockOptions, {
+      minWidth: 200
+    }, styles.minInlineSize)).toMatchSnapshot('minInlineSize after minWidth');
+  });
+  test('borderBlock', () => {
+    const styles = _stylex.stylex.create({
+      borderBlock: {
+        borderBlockColor: 'black',
+        borderBlockStyle: 'solid',
+        borderBlockWidth: 1
+      },
+      borderBlockEnd: {
+        borderBlockEndColor: 'red',
+        borderBlockEndStyle: 'dotted',
+        borderBlockEndWidth: 2
+      },
+      borderBlockStart: {
+        borderBlockStartColor: 'green',
+        borderBlockStartStyle: 'dashed',
+        borderBlockStartWidth: 3
+      }
+    });
+    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({
+      borderInline: {
+        borderInlineColor: 'black',
+        borderInlineStyle: 'solid',
+        borderInlineWidth: 1
+      },
+      borderInlineEnd: {
+        borderInlineEndColor: 'red',
+        borderInlineEndStyle: 'dotted',
+        borderInlineEndWidth: 2
+      },
+      borderInlineStart: {
+        borderInlineStartColor: 'green',
+        borderInlineStartStyle: 'dashed',
+        borderInlineStartWidth: 3
+      }
+    });
+    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({
+      startstart: {
+        borderStartStartRadius: 10
+      },
+      startend: {
+        borderStartEndRadius: 10
+      },
+      endstart: {
+        borderEndStartRadius: 10
+      },
+      endend: {
+        borderEndEndRadius: 10
+      }
+    });
+    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.call(mockOptions, styles.root)).toMatchSnapshot();
+  });
+  test.skip('borderWidth', () => {
+    const styles = _stylex.stylex.create({
+      root: {}
+    });
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
+  });
+  test('inset', () => {
+    const styles = _stylex.stylex.create({
+      inset: {
+        inset: 1
+      },
+      insetBlock: {
+        insetBlock: 2
+      },
+      insetBlockStart: {
+        insetBlockStart: 3
+      },
+      insetBlockEnd: {
+        insetBlockEnd: 4
+      },
+      insetInline: {
+        insetInline: 5
+      },
+      insetInlineStart: {
+        insetInlineStart: 6
+      },
+      insetInlineEnd: {
+        insetInlineEnd: 7
+      }
+    });
+    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)).toMatchSnapshot('inset vs top');
+    expect(_stylex.stylex.props.call(mockOptions, {
+      bottom: 100,
+      top: 100
+    }, styles.insetBlockStart)).toMatchSnapshot('insetBlock vs top');
+    expect(_stylex.stylex.props.call(mockOptions, {
+      top: 100
+    }, styles.insetBlockStart)).toMatchSnapshot('insetBlockStart vs top');
+    expect(_stylex.stylex.props.call(mockOptions, {
+      bottom: 100
+    }, styles.insetBlockEnd)).toMatchSnapshot('insetBlockEnd vs bottom');
+  });
+  test('margin', () => {
+    const styles = _stylex.stylex.create({
+      marginBlock: {
+        marginBlock: 1
+      },
+      marginBlockStart: {
+        marginBlockStart: 2
+      },
+      marginBlockEnd: {
+        marginBlockEnd: 3
+      },
+      marginInline: {
+        marginInline: 1
+      },
+      marginInlineStart: {
+        marginInlineStart: 2
+      },
+      marginInlineEnd: {
+        marginInlineEnd: 3
+      }
+    });
+    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({
+      paddingBlock: {
+        paddingBlock: 1
+      },
+      paddingBlockStart: {
+        paddingBlockStart: 2
+      },
+      paddingBlockEnd: {
+        paddingBlockEnd: 3
+      },
+      paddingInline: {
+        paddingInline: 1
+      },
+      paddingInlineStart: {
+        paddingInlineStart: 2
+      },
+      paddingInlineEnd: {
+        paddingInlineEnd: 3
+      }
+    });
+    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({
+      start: {
+        textAlign: 'start'
+      },
+      end: {
+        textAlign: 'end'
+      }
+    });
+    expect(_stylex.stylex.props.call(mockOptions, styles.start)).toMatchSnapshot('start');
+    expect(_stylex.stylex.props.call(mockOptions, styles.end)).toMatchSnapshot('end');
+  });
+});
+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`, () => {
+      const styles = _stylex.stylex.create({
+        underTest: {
+          width: `${value}${unitToTest}`
+        }
+      });
+      expect(_stylex.stylex.props.call(mockOptions, styles.underTest)).toMatchSnapshot();
+    });
+  }
+  test(`${value} "em" units based on inherited font-size`, () => {
+    const styles = _stylex.stylex.create({
+      underTest: {
+        width: `${value}em`
+      }
+    });
+    expect(_stylex.stylex.props.call({
+      ...mockOptions,
+      inheritedFontSize: 12
+    }, styles.underTest)).toMatchSnapshot();
+  });
+});
+describe('custom properties', () => {
+  beforeEach(() => {
+    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', () => {
+    const {
+      underTest
+    } = _stylex.stylex.create({
+      underTest: {
+        width: 'var(--unprovided)'
+      }
+    });
+    expect(_stylex.stylex.props.call(mockOptions, underTest)).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)'
+      }
+    });
+    expect(_stylex.stylex.props.call({
+      ...mockOptions,
+      customProperties: {
+        slightlyDarkerBlack: '#333',
+        theBestWidth: 42
+      }
+    }, underTest)).toMatchSnapshot();
+  });
+});
+expect.extend({
+  toMatchWindowDimensions(query, windowSize) {
+    const {
+      height,
+      width
+    } = windowSize;
+    const EXPECTED_MATCHED_VALUE = 500;
+    const {
+      underTest
+    } = _stylex.stylex.create({
+      underTest: {
+        [`@media ${query}`]: {
+          width: EXPECTED_MATCHED_VALUE
+        }
+      }
+    });
+    const props = _stylex.stylex.props.call({
+      viewportHeight: height,
+      viewportWidth: width
+    }, underTest);
+    const actualValue = props.style.width;
+    if (actualValue === EXPECTED_MATCHED_VALUE) {
+      return {
+        pass: true,
+        message: () => `expected media query ${query} not to match in a window of width ${width} and height ${height}`
+      };
+    } else {
+      return {
+        pass: false,
+        message: () => `expected media query ${query} to match in a window of width ${width} and height ${height}`
+      };
+    }
+  }
+});
+describe('media queries', () => {
+  test('matches a "min-width" query', () => {
+    expect('(min-width: 400px)').toMatchWindowDimensions({
+      width: 450,
+      height: 0
+    });
+    expect('(min-width: 400px)').not.toMatchWindowDimensions({
+      width: 350,
+      height: 0
+    });
+  });
+  test('matches a "max-width" query', () => {
+    expect('(max-width: 400px)').toMatchWindowDimensions({
+      width: 350,
+      height: 0
+    });
+    expect('(max-width: 400px)').not.toMatchWindowDimensions({
+      width: 450,
+      height: 0
+    });
+  });
+  test('matches a "min-height" query', () => {
+    expect('(min-height: 400px)').toMatchWindowDimensions({
+      width: 0,
+      height: 450
+    });
+    expect('(min-height: 400px)').not.toMatchWindowDimensions({
+      width: 0,
+      height: 350
+    });
+  });
+  test('matches a "max-height" query', () => {
+    expect('(max-height: 400px)').toMatchWindowDimensions({
+      width: 0,
+      height: 350
+    });
+    expect('(max-height: 400px)').not.toMatchWindowDimensions({
+      width: 0,
+      height: 450
+    });
+  });
+});
+describe('unsupported style properties', () => {
+  beforeEach(() => {
+    jest.spyOn(console, 'warn');
+    console.warn.mockImplementation(() => {});
+  });
+  afterEach(() => {
+    console.warn.mockRestore();
+  });
+  test('"filter"', () => {
+    const {
+      underTest
+    } = _stylex.stylex.create({
+      underTest: {
+        filter: 'blur(1px)'
+      }
+    });
+    expect(_stylex.stylex.props.call(mockOptions, underTest)).toMatchSnapshot();
+    expect(console.warn).toHaveBeenCalled();
+  });
+  test('"marginStart"', () => {
+    const {
+      underTest
+    } = _stylex.stylex.create({
+      underTest: {
+        marginStart: 10
+      }
+    });
+    expect(_stylex.stylex.props.call(mockOptions, underTest)).toMatchSnapshot();
+    expect(console.warn).toHaveBeenCalled();
+  });
+  test('"marginEnd"', () => {
+    const {
+      underTest
+    } = _stylex.stylex.create({
+      underTest: {
+        marginEnd: 10
+      }
+    });
+    expect(_stylex.stylex.props.call(mockOptions, underTest)).toMatchSnapshot();
+    expect(console.warn).toHaveBeenCalled();
+  });
+  test('"marginHorizontal"', () => {
+    const {
+      underTest
+    } = _stylex.stylex.create({
+      underTest: {
+        marginHorizontal: 10
+      }
+    });
+    expect(_stylex.stylex.props.call(mockOptions, underTest)).toMatchSnapshot();
+    expect(console.warn).toHaveBeenCalled();
+  });
+  test('"marginVertical"', () => {
+    const {
+      underTest
+    } = _stylex.stylex.create({
+      underTest: {
+        marginVertical: 10
+      }
+    });
+    expect(_stylex.stylex.props.call(mockOptions, underTest)).toMatchSnapshot();
+    expect(console.warn).toHaveBeenCalled();
+  });
+  test('"paddingHorizontal"', () => {
+    const {
+      underTest
+    } = _stylex.stylex.create({
+      underTest: {
+        paddingHorizontal: 10
+      }
+    });
+    expect(_stylex.stylex.props.call(mockOptions, underTest)).toMatchSnapshot();
+    expect(console.warn).toHaveBeenCalled();
+  });
+  test('"paddingVertical"', () => {
+    const {
+      underTest
+    } = _stylex.stylex.create({
+      underTest: {
+        paddingVertical: 10
+      }
+    });
+    expect(_stylex.stylex.props.call(mockOptions, underTest)).toMatchSnapshot();
+    expect(console.warn).toHaveBeenCalled();
+  });
+  test('"transitionProperty" passthrough', () => {
+    const {
+      underTest
+    } = _stylex.stylex.create({
+      underTest: {
+        transitionProperty: 'opacity'
+      }
+    });
+    expect(_stylex.stylex.props.call({
+      ...mockOptions,
+      passthroughProperties: ['transitionProperty']
+    }, underTest)).toMatchSnapshot();
+    expect(console.warn).not.toHaveBeenCalled();
+  });
+});
+describe('unsupported style values', () => {
+  beforeEach(() => {
+    jest.spyOn(console, 'warn');
+    console.warn.mockImplementation(() => {});
+  });
+  afterEach(() => {
+    console.warn.mockRestore();
+  });
+  test('calc', () => {
+    const {
+      underTest
+    } = _stylex.stylex.create({
+      underTest: {
+        width: 'calc(2 * 1rem)'
+      }
+    });
+    expect(_stylex.stylex.props.call(mockOptions, underTest)).toMatchSnapshot();
+    expect(console.warn).toHaveBeenCalled();
+  });
+  test('inherit', () => {
+    const {
+      underTest
+    } = _stylex.stylex.create({
+      underTest: {
+        fontSize: 'inherit'
+      }
+    });
+    expect(_stylex.stylex.props.call(mockOptions, underTest)).toMatchSnapshot();
+    expect(console.warn).toHaveBeenCalled();
+  });
+  test('initial', () => {
+    const {
+      underTest
+    } = _stylex.stylex.create({
+      underTest: {
+        fontSize: 'initial'
+      }
+    });
+    expect(_stylex.stylex.props.call(mockOptions, underTest)).toMatchSnapshot();
+    expect(console.warn).toHaveBeenCalled();
+  });
+});