@stylexjs/stylex 0.2.0-beta.10 → 0.2.0-beta.11

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

@@ -0,0 +1,453 @@
+"use strict";
+
+var _stylex = require("../stylex");
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const mockOptions = {
+  customProperties: {},
+  viewportHeight: 600,
+  viewportWidth: 320
+};
+describe('styles', () => {
+  beforeEach(() => {
+    jest.spyOn(console, 'error');
+    console.error.mockImplementation(() => {});
+  });
+  afterEach(() => {
+    console.error.mockRestore();
+  });
+  test('background-image', () => {
+    const styles = _stylex.stylex.create({
+      root: {
+        backgroundImage: 'url(https://placehold.it/300/300'
+      }
+    });
+    _stylex.stylex.spread(styles.root, mockOptions);
+    expect(console.error).toHaveBeenCalled();
+  });
+  test('box-shadow', () => {
+    const styles = _stylex.stylex.create({
+      root: {
+        boxShadow: '1px 2px 3px 4px red'
+      }
+    });
+    expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot();
+    const styles2 = _stylex.stylex.create({
+      root: {
+        boxShadow: '1px 2px 3px 4px red, 2px 3px 4px 5px blue'
+      }
+    });
+    _stylex.stylex.spread(styles2.root, mockOptions);
+    expect(console.error).toHaveBeenCalledTimes(1);
+    const styles3 = _stylex.stylex.create({
+      root: {
+        boxShadow: 'inset 1px 2px 3px 4px red'
+      }
+    });
+    _stylex.stylex.spread(styles3.root, mockOptions);
+    expect(console.error).toHaveBeenCalledTimes(2);
+  });
+  test('direction', () => {
+    const styles = _stylex.stylex.create({
+      root: {
+        direction: 'ltr'
+      }
+    });
+    expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot();
+    const styles2 = _stylex.stylex.create({
+      root: {
+        direction: 'rtl'
+      }
+    });
+    expect(_stylex.stylex.spread(styles2.root, mockOptions)).toMatchSnapshot();
+  });
+  test('font-size', () => {
+    const styles = _stylex.stylex.create({
+      root: {
+        fontSize: '2.5rem'
+      }
+    });
+    expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot('default');
+    expect(_stylex.stylex.spread(styles.root, {
+      ...mockOptions,
+      fontScale: 2
+    })).toMatchSnapshot('fontScale:2');
+  });
+  test('font-variant', () => {
+    const styles = _stylex.stylex.create({
+      root: {
+        fontVariant: 'common-ligatures small-caps'
+      }
+    });
+    expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot();
+  });
+  test('font-weight', () => {
+    const styles = _stylex.stylex.create({
+      root: {
+        fontWeight: 900
+      }
+    });
+    expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot();
+    const styles2 = _stylex.stylex.create({
+      root: {
+        fontWeight: 'bold'
+      }
+    });
+    expect(_stylex.stylex.spread(styles2.root, mockOptions)).toMatchSnapshot();
+  });
+  test('line-clamp', () => {
+    const styles = _stylex.stylex.create({
+      root: {
+        lineClamp: 3
+      }
+    });
+    expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot();
+  });
+  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.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');
+  });
+  test('pointer-events', () => {
+    const styles = _stylex.stylex.create({
+      root: {
+        pointerEvents: 'none'
+      }
+    });
+    expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot();
+  });
+  test('position', () => {
+    const styles = _stylex.stylex.create({
+      static: {
+        position: 'static'
+      },
+      relative: {
+        position: 'relative'
+      },
+      absolute: {
+        position: 'absolute'
+      },
+      fixed: {
+        position: 'fixed'
+      },
+      sticky: {
+        position: 'sticky'
+      }
+    });
+    expect(console.error).toHaveBeenCalledTimes(2);
+    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');
+  });
+  test('text-shadow', () => {
+    const styles = _stylex.stylex.create({
+      root: {
+        textShadow: '1px 2px 3px red'
+      }
+    });
+    expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot();
+    const styles2 = _stylex.stylex.create({
+      root: {
+        textShadow: '1px 2px 3px red, 2px 3px 4px blue'
+      }
+    });
+    expect(_stylex.stylex.spread(styles2.root, mockOptions)).toMatchSnapshot();
+    expect(console.error).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.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');
+  });
+  test('user-select', () => {
+    const styles = _stylex.stylex.create({
+      root: {
+        userSelect: 'none'
+      }
+    });
+    expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot();
+  });
+  test('vertical-align', () => {
+    const styles = _stylex.stylex.create({
+      middle: {
+        verticalAlign: 'middle'
+      },
+      top: {
+        verticalAlign: 'top'
+      }
+    });
+    expect(_stylex.stylex.spread(styles.middle, mockOptions)).toMatchSnapshot('middle');
+    expect(_stylex.stylex.spread(styles.top, mockOptions)).toMatchSnapshot('top');
+  });
+  test.skip('logical border short-forms', () => {
+    const styles = _stylex.stylex.create({
+      root: {}
+    });
+    expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot();
+  });
+  test.skip('logical border long-forms', () => {
+    const styles = _stylex.stylex.create({
+      root: {}
+    });
+    expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot();
+  });
+  test.skip('logical inset short-forms', () => {
+    const styles = _stylex.stylex.create({
+      root: {
+        insetBlock: 5,
+        insetInline: 10
+      }
+    });
+    expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot();
+  });
+  test.skip('logical text alignment', () => {
+    const styles = _stylex.stylex.create({
+      root: {
+        textAlign: 'start'
+      }
+    });
+    expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot();
+  });
+});
+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.spread(styles.underTest, mockOptions)).toMatchSnapshot();
+    });
+  }
+  test(`${value} "em" units based on inherited font-size`, () => {
+    const styles = _stylex.stylex.create({
+      underTest: {
+        width: `${value}em`
+      }
+    });
+    expect(_stylex.stylex.spread(styles.underTest, {
+      ...mockOptions,
+      inheritedFontSize: 12
+    })).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.spread(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)'
+      }
+    });
+    expect(_stylex.stylex.spread(underTest, {
+      ...mockOptions,
+      customProperties: {
+        slightlyDarkerBlack: '#333',
+        theBestWidth: 42
+      }
+    })).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.spread(underTest, {
+      viewportHeight: height,
+      viewportWidth: width
+    });
+    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 values', () => {
+  beforeEach(() => {
+    jest.spyOn(console, 'error');
+    console.error.mockImplementation(() => {});
+  });
+  afterEach(() => {
+    console.error.mockRestore();
+  });
+  test('calc', () => {
+    const {
+      underTest
+    } = _stylex.stylex.create({
+      underTest: {
+        width: 'calc(2 * 1rem)'
+      }
+    });
+    expect(_stylex.stylex.spread(underTest, mockOptions)).toMatchSnapshot();
+    expect(console.error).toHaveBeenCalled();
+  });
+  test('inherit', () => {
+    const {
+      underTest
+    } = _stylex.stylex.create({
+      underTest: {
+        fontSize: 'inherit'
+      }
+    });
+    expect(_stylex.stylex.spread(underTest, mockOptions)).toMatchSnapshot();
+    expect(console.error).toHaveBeenCalled();
+  });
+  test('initial', () => {
+    const {
+      underTest
+    } = _stylex.stylex.create({
+      underTest: {
+        fontSize: 'initial'
+      }
+    });
+    expect(_stylex.stylex.spread(underTest, mockOptions)).toMatchSnapshot();
+    expect(console.error).toHaveBeenCalled();
+  });
+});

package/lib/native/errorMsg.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.errorMsg = errorMsg;
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+
+function errorMsg(msg) {
+  console.error(`stylex: ${msg}`);
+}

package/lib/native/flattenStyle.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.flattenStyle = flattenStyle;
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+
+function flattenStyle() {
+  for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
+    styles[_key] = arguments[_key];
+  }
+  const flatArray = styles.flat(Infinity);
+  const result = {};
+  for (let i = 0; i < flatArray.length; i++) {
+    const style = flatArray[i];
+    if (style != null && typeof style === 'object') {
+      // $FlowFixMe
+      Object.assign(result, style);
+    }
+  }
+  return result;
+}

package/lib/native/parseShadow.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.parseShadow = parseShadow;
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+
+const VALUES_REG = /,(?![^(]*\))/;
+const PARTS_REG = /\s(?![^(]*\))/;
+const LENGTH_REG = /^[0-9]+[a-zA-Z%]+?$/;
+function isLength(v) {
+  return v === '0' || LENGTH_REG.test(v);
+}
+function toMaybeNum(v) {
+  if (!/px$/.test(v) && v !== '0') return v;
+  const n = parseFloat(v);
+  return !isNaN(n) ? n : v;
+}
+function parseValue(str) {
+  const parts = str.split(PARTS_REG);
+  const inset = parts.includes('inset');
+  const last = parts.slice(-1)[0];
+  const color = !isLength(last) ? last : null;
+  const nums = parts.filter(n => n !== 'inset').filter(n => n !== color).map(toMaybeNum);
+  const [offsetX, offsetY, blurRadius, spreadRadius] = nums;
+  return {
+    inset,
+    offsetX,
+    offsetY,
+    blurRadius,
+    spreadRadius,
+    color
+  };
+}
+function parseShadow(str) {
+  return str.split(VALUES_REG).map(s => s.trim()).map(parseValue);
+}