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

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

@@ -0,0 +1,148 @@
+"use strict";
+
+var _stylex = require("../stylex");
+const mockOptions = {
+  customProperties: {
+    testVar: "red",
+    testVar2: "blue",
+    boxShadowVar1: "5px 5px 5px black",
+    rawNumber: 10,
+    pixelNumber: "10px",
+    emNumber: "10em",
+    refToRawNumber: "var(--rawNumber)",
+    refToPixelNumber: "var(--pixelNumber)",
+    refToRefToRawNumber: "var(--refToRawNumber)"
+  },
+  viewportHeight: 600,
+  viewportWidth: 320
+};
+function resolveColorValue(colorValue) {
+  const styles = _stylex.stylex.create({
+    root: {
+      color: colorValue
+    }
+  });
+  return _stylex.stylex.spread(styles.root, mockOptions).style.color;
+}
+describe("stylex CSSCustomProperty value test", () => {
+  beforeEach(() => {
+    jest.spyOn(console, "warn");
+    console.warn.mockImplementation(() => {});
+  });
+  afterEach(() => {
+    console.warn.mockRestore();
+  });
+  test("parses a basic variable correctly", () => {
+    expect(resolveColorValue("var(--testVar)")).toEqual("red");
+  });
+  test("parses kebab case to camel case", () => {
+    expect(resolveColorValue("var(--test-var)")).toEqual("red");
+  });
+  test("parses a variable with a default value", () => {
+    expect(resolveColorValue("var(--testVar, blue)")).toEqual("red");
+    expect(resolveColorValue("var(--notFound, blue)")).toEqual("blue");
+  });
+  test("parses kebab case with a default value", () => {
+    expect(resolveColorValue("var(--test-var, blue)")).toEqual("red");
+    expect(resolveColorValue("var(--not-found, blue)")).toEqual("blue");
+  });
+  test("parses a variable with a default value with spaces", () => {
+    const styles = _stylex.stylex.create({
+      root: {
+        boxShadow: "var(--boxShadowVar1, 0px 0px 0px black)"
+      }
+    });
+    expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot();
+  });
+  test("falls back to a default value with spaces", () => {
+    const styles = _stylex.stylex.create({
+      root: {
+        boxShadow: "var(--boxShadowVarNotFound, 0px 0px 0px black)"
+      }
+    });
+    expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot();
+  });
+  test("parses and falls back to default value containing a variable", () => {
+    const styles = _stylex.stylex.create({
+      root: {
+        color: "var(--colorNotFound, var(--testVar2))"
+      }
+    });
+    expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot();
+  });
+  test("parses and falls back to a default value containing spaces and embedded variables", () => {
+    const styles = _stylex.stylex.create({
+      root: {
+        boxShadow: "var(--boxShadowVarNotFound, 0px 0px 0px var(--testVar2))"
+      }
+    });
+    expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot();
+  });
+  test("does not parse malformed vars", () => {
+    expect(resolveColorValue("var(--testUnfinished")).toEqual("var(--testUnfinished");
+    expect(resolveColorValue("var(bad--input)")).toEqual("var(bad--input)");
+    expect(resolveColorValue("--testMulti")).toEqual("--testMulti");
+    expect(resolveColorValue("var ( --testMulti)")).toEqual("var ( --testMulti)");
+  });
+  test("basic value lookup works", () => {
+    const styles = _stylex.stylex.create({
+      root: {
+        borderWidth: 10
+      },
+      withVars: {
+        borderWidth: "var(--rawNumber)"
+      }
+    });
+    const rootStyle = _stylex.stylex.spread(styles.root, mockOptions).style;
+    expect(rootStyle.borderWidth).toEqual(10);
+    expect(_stylex.stylex.spread(styles.withVars, mockOptions).style.borderWidth).toEqual(rootStyle.borderWidth);
+  });
+  test("value lookup with pixel prop conversion", () => {
+    const styles = _stylex.stylex.create({
+      root: {
+        borderWidth: "10px"
+      },
+      withVars: {
+        borderWidth: "var(--pixelNumber)"
+      }
+    });
+    const rootStyle = _stylex.stylex.spread(styles.root, mockOptions).style;
+    expect(rootStyle.borderWidth).toEqual(10);
+    expect(_stylex.stylex.spread(styles.withVars, mockOptions).style.borderWidth).toEqual(rootStyle.borderWidth);
+  });
+  test("value lookup with em prop conversion", () => {
+    const styles = _stylex.stylex.create({
+      root: {
+        fontSize: "10em"
+      },
+      withVars: {
+        fontSize: "var(--emNumber)"
+      }
+    });
+    const rootStyle = _stylex.stylex.spread(styles.root, mockOptions).style;
+    expect(rootStyle.fontSize).toEqual(160);
+    expect(_stylex.stylex.spread(styles.withVars, mockOptions).style.fontSize).toEqual(rootStyle.fontSize);
+  });
+  test("prop lookup with ref", () => {
+    const styles = _stylex.stylex.create({
+      root: {
+        borderWidth: "var(--refToRawNumber)"
+      },
+      withVars: {
+        borderWidth: "var(--refToPixelNumber)"
+      }
+    });
+    const rootStyle = _stylex.stylex.spread(styles.root, mockOptions).style;
+    expect(rootStyle.borderWidth).toEqual(10);
+    expect(_stylex.stylex.spread(styles.withVars, mockOptions).style.borderWidth).toEqual(rootStyle.borderWidth);
+  });
+  test("prop lookup with ref to ref", () => {
+    const styles = _stylex.stylex.create({
+      root: {
+        borderWidth: "var(--refToRefToRawNumber)"
+      }
+    });
+    const rootStyle = _stylex.stylex.spread(styles.root, mockOptions).style;
+    expect(rootStyle.borderWidth).toEqual(10);
+  });
+});

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

@@ -8,11 +8,11 @@ const mockOptions = {
 };
 describe("styles", () => {
   beforeEach(() => {
-    jest.spyOn(console, "error");
-    console.error.mockImplementation(() => {});
+    jest.spyOn(console, "warn");
+    console.warn.mockImplementation(() => {});
   });
   afterEach(() => {
-    console.error.mockRestore();
+    console.warn.mockRestore();
   });
   test("animation-delay", () => {
     const styles = _stylex.stylex.create({
@@ -37,7 +37,7 @@ describe("styles", () => {
       }
     });
     _stylex.stylex.spread(styles.root, mockOptions);
-    expect(console.error).toHaveBeenCalled();
+    expect(console.warn).toHaveBeenCalled();
   });
   test("border-style", () => {
     const styles = _stylex.stylex.create({
@@ -65,14 +65,91 @@ describe("styles", () => {
       }
     });
     _stylex.stylex.spread(styles2.root, mockOptions);
-    expect(console.error).toHaveBeenCalledTimes(1);
+    expect(console.warn).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);
+    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.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");
   });
   test("direction", () => {
     const styles = _stylex.stylex.create({
@@ -130,6 +207,26 @@ describe("styles", () => {
     });
     expect(_stylex.stylex.spread(styles.root, mockOptions)).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.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");
+  });
   test("object-fit", () => {
     const styles = _stylex.stylex.create({
       contain: {
@@ -180,12 +277,12 @@ describe("styles", () => {
         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");
+    expect(console.warn).toHaveBeenCalledTimes(3);
   });
   test("text-shadow", () => {
     const styles = _stylex.stylex.create({
@@ -200,7 +297,7 @@ describe("styles", () => {
       }
     });
     expect(_stylex.stylex.spread(styles2.root, mockOptions)).toMatchSnapshot();
-    expect(console.error).toHaveBeenCalledTimes(1);
+    expect(console.warn).toHaveBeenCalledTimes(1);
   });
   test("transform", () => {
     const styles = _stylex.stylex.create({
@@ -279,7 +376,107 @@ describe("styles", () => {
     expect(_stylex.stylex.spread(styles.middle, mockOptions)).toMatchSnapshot("middle");
     expect(_stylex.stylex.spread(styles.top, mockOptions)).toMatchSnapshot("top");
   });
-  test("logical border radius", () => {
+});
+describe("logical styles", () => {
+  test("blockSize", () => {
+    const styles = _stylex.stylex.create({
+      blockSize: {
+        blockSize: "100px"
+      },
+      maxBlockSize: {
+        maxBlockSize: "100px"
+      },
+      minBlockSize: {
+        minBlockSize: "100px"
+      }
+    });
+    expect(_stylex.stylex.spread(styles.blockSize, mockOptions)).toMatchSnapshot("blockSize");
+    expect(_stylex.stylex.spread([{
+      height: 200
+    }, styles.blockSize], mockOptions)).toMatchSnapshot("blockSize after height");
+    expect(_stylex.stylex.spread(styles.maxBlockSize, mockOptions)).toMatchSnapshot("maxBlockSize");
+    expect(_stylex.stylex.spread([{
+      maxHeight: 200
+    }, styles.maxBlockSize], mockOptions)).toMatchSnapshot("maxBlockSize after maxHeight");
+    expect(_stylex.stylex.spread(styles.minBlockSize, mockOptions)).toMatchSnapshot("minBlockSize");
+    expect(_stylex.stylex.spread([{
+      minHeight: 200
+    }, styles.minBlockSize], mockOptions)).toMatchSnapshot("minBlockSize after minHeight");
+  });
+  test("inlineSize", () => {
+    const styles = _stylex.stylex.create({
+      inlineSize: {
+        inlineSize: "100px"
+      },
+      maxInlineSize: {
+        maxInlineSize: "100px"
+      },
+      minInlineSize: {
+        minInlineSize: "100px"
+      }
+    });
+    expect(_stylex.stylex.spread(styles.inlineSize, mockOptions)).toMatchSnapshot("inlineSize");
+    expect(_stylex.stylex.spread([{
+      width: 200
+    }, styles.inlineSize], mockOptions)).toMatchSnapshot("inlineSize after width");
+    expect(_stylex.stylex.spread(styles.maxInlineSize, mockOptions)).toMatchSnapshot("maxInlineSize");
+    expect(_stylex.stylex.spread([{
+      maxWidth: 200
+    }, styles.maxInlineSize], mockOptions)).toMatchSnapshot("maxInlineSize after maxWidth");
+    expect(_stylex.stylex.spread(styles.minInlineSize, mockOptions)).toMatchSnapshot("minInlineSize");
+    expect(_stylex.stylex.spread([{
+      minWidth: 200
+    }, styles.minInlineSize], mockOptions)).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.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");
+  });
+  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.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");
+  });
+  test("borderRadius", () => {
     const styles = _stylex.stylex.create({
       startstart: {
         borderStartStartRadius: 10
@@ -299,34 +496,133 @@ describe("styles", () => {
     expect(_stylex.stylex.spread(styles.endstart, mockOptions)).toMatchSnapshot("endstart");
     expect(_stylex.stylex.spread(styles.endend, mockOptions)).toMatchSnapshot("endend");
   });
-  test.skip("logical border short-forms", () => {
+  test.skip("borderStyle", () => {
     const styles = _stylex.stylex.create({
       root: {}
     });
     expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot();
   });
-  test.skip("logical border long-forms", () => {
+  test.skip("borderWidth", () => {
     const styles = _stylex.stylex.create({
       root: {}
     });
     expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot();
   });
-  test.skip("logical inset short-forms", () => {
+  test("inset", () => {
     const styles = _stylex.stylex.create({
-      root: {
-        insetBlock: 5,
-        insetInline: 10
+      inset: {
+        inset: 1
+      },
+      insetBlock: {
+        insetBlock: 2
+      },
+      insetBlockStart: {
+        insetBlockStart: 3
+      },
+      insetBlockEnd: {
+        insetBlockEnd: 4
+      },
+      insetInline: {
+        insetInline: 5
+      },
+      insetInlineStart: {
+        insetInlineStart: 6
+      },
+      insetInlineEnd: {
+        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([{
+      left: 10,
+      right: 10,
+      bottom: 100,
+      top: 100
+    }, styles.insetBlockStart], mockOptions)).toMatchSnapshot("inset vs top");
+    expect(_stylex.stylex.spread([{
+      bottom: 100,
+      top: 100
+    }, styles.insetBlockStart], mockOptions)).toMatchSnapshot("insetBlock vs top");
+    expect(_stylex.stylex.spread([{
+      top: 100
+    }, styles.insetBlockStart], mockOptions)).toMatchSnapshot("insetBlockStart vs top");
+    expect(_stylex.stylex.spread([{
+      bottom: 100
+    }, styles.insetBlockEnd], mockOptions)).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.spread(styles.root, mockOptions)).toMatchSnapshot();
+    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");
   });
-  test.skip("logical text alignment", () => {
+  test("padding", () => {
     const styles = _stylex.stylex.create({
-      root: {
+      paddingBlock: {
+        paddingBlock: 1
+      },
+      paddingBlockStart: {
+        paddingBlockStart: 2
+      },
+      paddingBlockEnd: {
+        paddingBlockEnd: 3
+      },
+      paddingInline: {
+        paddingInline: 1
+      },
+      paddingInlineStart: {
+        paddingInlineStart: 2
+      },
+      paddingInlineEnd: {
+        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");
+  });
+  test("textAlign", () => {
+    const styles = _stylex.stylex.create({
+      start: {
         textAlign: "start"
+      },
+      end: {
+        textAlign: "end"
       }
     });
-    expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.spread(styles.start, mockOptions)).toMatchSnapshot("start");
+    expect(_stylex.stylex.spread(styles.end, mockOptions)).toMatchSnapshot("end");
   });
 });
 describe("length units", () => {
@@ -469,13 +765,10 @@ describe("media queries", () => {
 });
 describe("unsupported style properties", () => {
   beforeEach(() => {
-    jest.spyOn(console, "error");
-    console.error.mockImplementation(() => {});
     jest.spyOn(console, "warn");
     console.warn.mockImplementation(() => {});
   });
   afterEach(() => {
-    console.error.mockRestore();
     console.warn.mockRestore();
   });
   test("\"filter\"", () => {
@@ -487,7 +780,7 @@ describe("unsupported style properties", () => {
       }
     });
     expect(_stylex.stylex.spread(underTest, mockOptions)).toMatchSnapshot();
-    expect(console.error).toHaveBeenCalled();
+    expect(console.warn).toHaveBeenCalled();
   });
   test("\"marginStart\"", () => {
     const {
@@ -498,7 +791,7 @@ describe("unsupported style properties", () => {
       }
     });
     expect(_stylex.stylex.spread(underTest, mockOptions)).toMatchSnapshot();
-    expect(console.warn).not.toHaveBeenCalled();
+    expect(console.warn).toHaveBeenCalled();
   });
   test("\"marginEnd\"", () => {
     const {
@@ -509,7 +802,7 @@ describe("unsupported style properties", () => {
       }
     });
     expect(_stylex.stylex.spread(underTest, mockOptions)).toMatchSnapshot();
-    expect(console.warn).not.toHaveBeenCalled();
+    expect(console.warn).toHaveBeenCalled();
   });
   test("\"marginHorizontal\"", () => {
     const {
@@ -567,16 +860,16 @@ describe("unsupported style properties", () => {
       ...mockOptions,
       passthroughProperties: ["transitionProperty"]
     })).toMatchSnapshot();
-    expect(console.error).not.toHaveBeenCalled();
+    expect(console.warn).not.toHaveBeenCalled();
   });
 });
 describe("unsupported style values", () => {
   beforeEach(() => {
-    jest.spyOn(console, "error");
-    console.error.mockImplementation(() => {});
+    jest.spyOn(console, "warn");
+    console.warn.mockImplementation(() => {});
   });
   afterEach(() => {
-    console.error.mockRestore();
+    console.warn.mockRestore();
   });
   test("calc", () => {
     const {
@@ -587,7 +880,7 @@ describe("unsupported style values", () => {
       }
     });
     expect(_stylex.stylex.spread(underTest, mockOptions)).toMatchSnapshot();
-    expect(console.error).toHaveBeenCalled();
+    expect(console.warn).toHaveBeenCalled();
   });
   test("inherit", () => {
     const {
@@ -598,7 +891,7 @@ describe("unsupported style values", () => {
       }
     });
     expect(_stylex.stylex.spread(underTest, mockOptions)).toMatchSnapshot();
-    expect(console.error).toHaveBeenCalled();
+    expect(console.warn).toHaveBeenCalled();
   });
   test("initial", () => {
     const {
@@ -609,6 +902,6 @@ describe("unsupported style values", () => {
       }
     });
     expect(_stylex.stylex.spread(underTest, mockOptions)).toMatchSnapshot();
-    expect(console.error).toHaveBeenCalled();
+    expect(console.warn).toHaveBeenCalled();
   });
 });

package/lib/native/fixContentBox.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+type FlatStyle = { [key: string]: unknown };
+export declare function fixContentBox(flatStyle: FlatStyle): FlatStyle;