@stylexjs/stylex 0.3.0 → 0.4.1

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

@@ -1,924 +0,0 @@
-"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();
-  });
-});