@stylexjs/stylex - npm Package Compare versions

Comparing version 0.2.0-beta.19 to 0.2.0-beta.20

lib/native/__tests__/stylex-test.js

@@ -11,7 +11,7 @@ "use strict";
   beforeEach(() => {
-    jest.spyOn(console, "error");
-    console.error.mockImplementation(() => {});
+    jest.spyOn(console, "warn");
+    console.warn.mockImplementation(() => {});
   });
   afterEach(() => {
-    console.error.mockRestore();
+    console.warn.mockRestore();
   });
@@ -41,3 +41,3 @@ test("animation-delay", () => {
     _stylex.stylex.spread(styles.root, mockOptions);
-    expect(console.error).toHaveBeenCalled();
+    expect(console.warn).toHaveBeenCalled();
   });
@@ -70,3 +70,3 @@ test("border-style", () => {
     _stylex.stylex.spread(styles2.root, mockOptions);
-    expect(console.error).toHaveBeenCalledTimes(1);
+    expect(console.warn).toHaveBeenCalledTimes(1);
     const styles3 = _stylex.stylex.create({
@@ -78,4 +78,73 @@ root: {
     _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
+      }
+    });
+    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");
+  });
   test("direction", () => {
@@ -137,2 +206,22 @@ const styles = _stylex.stylex.create({
   });
+  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", () => {
@@ -188,3 +277,2 @@ const styles = _stylex.stylex.create({
     });
-    expect(console.error).toHaveBeenCalledTimes(2);
     expect(_stylex.stylex.spread(styles.static, mockOptions)).toMatchSnapshot("static");
@@ -195,2 +283,3 @@ expect(_stylex.stylex.spread(styles.relative, mockOptions)).toMatchSnapshot("relative");
     expect(_stylex.stylex.spread(styles.sticky, mockOptions)).toMatchSnapshot("sticky");
+    expect(console.warn).toHaveBeenCalledTimes(3);
   });
@@ -210,3 +299,3 @@ test("text-shadow", () => {
     expect(_stylex.stylex.spread(styles2.root, mockOptions)).toMatchSnapshot();
-    expect(console.error).toHaveBeenCalledTimes(1);
+    expect(console.warn).toHaveBeenCalledTimes(1);
   });
@@ -290,4 +379,104 @@ test("transform", () => {
   });
-  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: {
@@ -311,3 +500,3 @@ borderStartStartRadius: 10
   });
-  test.skip("logical border short-forms", () => {
+  test.skip("borderStyle", () => {
     const styles = _stylex.stylex.create({
@@ -318,3 +507,3 @@ root: {}
   });
-  test.skip("logical border long-forms", () => {
+  test.skip("borderWidth", () => {
     const styles = _stylex.stylex.create({
@@ -325,18 +514,117 @@ root: {}
   });
-  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.root, mockOptions)).toMatchSnapshot();
+    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.skip("logical text alignment", () => {
+  test("margin", () => {
     const styles = _stylex.stylex.create({
-      root: {
+      marginBlock: {
+        marginBlock: 1
+      },
+      marginBlockStart: {
+        marginBlockStart: 2
+      },
+      marginBlockEnd: {
+        marginBlockEnd: 3
+      },
+      marginInline: {
+        marginInline: 1
+      },
+      marginInlineStart: {
+        marginInlineStart: 2
+      },
+      marginInlineEnd: {
+        marginInlineEnd: 3
+      }
+    });
+    expect(_stylex.stylex.spread(styles.marginBlock, mockOptions)).toMatchSnapshot("marginBlock");
+    expect(_stylex.stylex.spread(styles.marginBlockStart, mockOptions)).toMatchSnapshot("marginBlockStart");
+    expect(_stylex.stylex.spread(styles.marginBlockEnd, mockOptions)).toMatchSnapshot("marginBlockEnd");
+    expect(_stylex.stylex.spread(styles.marginInline, mockOptions)).toMatchSnapshot("marginInline");
+    expect(_stylex.stylex.spread(styles.marginInlineStart, mockOptions)).toMatchSnapshot("marginInlineStart");
+    expect(_stylex.stylex.spread(styles.marginInlineEnd, mockOptions)).toMatchSnapshot("marginInlineEnd");
+  });
+  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.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");
   });
@@ -484,4 +772,2 @@ });
   beforeEach(() => {
-    jest.spyOn(console, "error");
-    console.error.mockImplementation(() => {});
     jest.spyOn(console, "warn");
@@ -491,3 +777,2 @@ console.warn.mockImplementation(() => {});
   afterEach(() => {
-    console.error.mockRestore();
     console.warn.mockRestore();
@@ -504,3 +789,3 @@ });
     expect(_stylex.stylex.spread(underTest, mockOptions)).toMatchSnapshot();
-    expect(console.error).toHaveBeenCalled();
+    expect(console.warn).toHaveBeenCalled();
   });
@@ -516,3 +801,3 @@ test("\"marginStart\"", () => {
     expect(_stylex.stylex.spread(underTest, mockOptions)).toMatchSnapshot();
-    expect(console.warn).not.toHaveBeenCalled();
+    expect(console.warn).toHaveBeenCalled();
   });
@@ -528,3 +813,3 @@ test("\"marginEnd\"", () => {
     expect(_stylex.stylex.spread(underTest, mockOptions)).toMatchSnapshot();
-    expect(console.warn).not.toHaveBeenCalled();
+    expect(console.warn).toHaveBeenCalled();
   });
@@ -587,3 +872,3 @@ test("\"marginHorizontal\"", () => {
     })).toMatchSnapshot();
-    expect(console.error).not.toHaveBeenCalled();
+    expect(console.warn).not.toHaveBeenCalled();
   });
@@ -593,7 +878,7 @@ });
   beforeEach(() => {
-    jest.spyOn(console, "error");
-    console.error.mockImplementation(() => {});
+    jest.spyOn(console, "warn");
+    console.warn.mockImplementation(() => {});
   });
   afterEach(() => {
-    console.error.mockRestore();
+    console.warn.mockRestore();
   });
@@ -609,3 +894,3 @@ test("calc", () => {
     expect(_stylex.stylex.spread(underTest, mockOptions)).toMatchSnapshot();
-    expect(console.error).toHaveBeenCalled();
+    expect(console.warn).toHaveBeenCalled();
   });
@@ -621,3 +906,3 @@ test("inherit", () => {
     expect(_stylex.stylex.spread(underTest, mockOptions)).toMatchSnapshot();
-    expect(console.error).toHaveBeenCalled();
+    expect(console.warn).toHaveBeenCalled();
   });
@@ -633,4 +918,4 @@ test("initial", () => {
     expect(_stylex.stylex.spread(underTest, mockOptions)).toMatchSnapshot();
-    expect(console.error).toHaveBeenCalled();
+    expect(console.warn).toHaveBeenCalled();
   });
 });

lib/native/CSSLengthUnitValue.d.ts

@@ -12,3 +12,3 @@ /**
 export declare class CSSLengthUnitValue {
-  static parse(inp: string): CSSLengthUnitValue | null;
+  static parse(inp: string): [number, CSSLengthUnitType] | null;
   value: number;
@@ -15,0 +15,0 @@ unit: CSSLengthUnitType;

lib/native/CSSLengthUnitValue.js

@@ -16,3 +16,3 @@ "use strict";
     const parsedValue = parseFloat(value);
-    return new CSSLengthUnitValue(parsedValue, unit);
+    return [parsedValue, unit];
   }
@@ -19,0 +19,0 @@ constructor(value, unit) {

lib/native/stylex.js

@@ -15,6 +15,7 @@ "use strict";
 var _errorMsg = require("./errorMsg");
+var _fixContentBox = require("./fixContentBox");
 var _flattenStyle = require("./flattenStyle");
 var _parseShadow = require("./parseShadow");
 var _parseTimeValue = require("./parseTimeValue");
-const stylePropertyAllowlistSet = new Set(["alignContent", "alignItems", "alignSelf", "animationDelay", "animationDuration", "aspectRatio", "backfaceVisibility", "backgroundColor", "borderBlockColor", "borderBlockStyle", "borderBlockWidth", "borderBlockEndColor", "borderBlockEndStyle", "borderBlockEndWidth", "borderBlockStartColor", "borderBlockStartStyle", "borderBlockStartWidth", "borderBottomColor", "borderBottomLeftRadius", "borderBottomRightRadius", "borderBottomStyle", "borderBottomWidth", "borderEndEndRadius", "borderEndStartRadius", "borderColor", "borderInlineColor", "borderInlineStyle", "borderInlineWidth", "borderInlineEndColor", "borderInlineEndStyle", "borderInlineEndWidth", "borderInlineStartColor", "borderInlineStartStyle", "borderInlineStartWidth", "borderEndColor", "borderEndStyle", "borderEndWidth", "borderStartColor", "borderStartStyle", "borderStartWidth", "borderLeftColor", "borderLeftStyle", "borderLeftWidth", "borderRadius", "borderRightColor", "borderRightStyle", "borderRightWidth", "borderStartEndRadius", "borderStartStartRadius", "borderStyle", "borderTopColor", "borderTopLeftRadius", "borderTopRightRadius", "borderTopStyle", "borderTopWidth", "borderWidth", "bottom", "color", "direction", "display", "end", "flex", "flexBasis", "flexDirection", "flexGrow", "flexShrink", "flexWrap", "fontFamily", "fontSize", "fontStyle", "fontWeight", "fontVariant", "gap", "gapColumn", "gapRow", "height", "inset", "insetBlock", "insetBlockEnd", "insetBlockStart", "insetInline", "insetInlineEnd", "insetInlineStart", "justifyContent", "left", "letterSpacing", "lineHeight", "margin", "marginBlock", "marginBlockEnd", "marginBlockStart", "marginBottom", "marginEnd", "marginInline", "marginInlineEnd", "marginInlineStart", "marginLeft", "marginRight", "marginStart", "marginTop", "maxHeight", "maxWidth", "minHeight", "minWidth", "objectFit", "opacity", "overflow", "padding", "paddingBlock", "paddingBlockEnd", "paddingBlockStart", "paddingBottom", "paddingEnd", "paddingInline", "paddingInlineEnd", "paddingInlineStart", "paddingLeft", "paddingRight", "paddingStart", "paddingTop", "pointerEvents", "position", "resizeMode", "right", "shadowColor", "shadowOffset", "shadowOpacity", "shadowRadius", "shadowWidth", "start", "textAlign", "textDecorationLine", "textDecorationColor", "textDecorationStyle", "textShadowColor", "textShadowOffset", "textShadowRadius", "textTransform", "tintColor", "transform", "transitionDelay", "transitionDuration", "top", "userSelect", "verticalAlign", "width", "zIndex"]);
+const stylePropertyAllowlistSet = new Set(["alignContent", "alignItems", "alignSelf", "animationDelay", "animationDuration", "aspectRatio", "backfaceVisibility", "backgroundColor", "borderBottomColor", "borderBottomLeftRadius", "borderBottomRightRadius", "borderBottomStyle", "borderBottomWidth", "borderColor", "borderLeftColor", "borderLeftStyle", "borderLeftWidth", "borderRadius", "borderRightColor", "borderRightStyle", "borderRightWidth", "borderStyle", "borderTopColor", "borderTopLeftRadius", "borderTopRightRadius", "borderTopStyle", "borderTopWidth", "borderWidth", "bottom", "boxSizing", "color", "direction", "display", "end", "flex", "flexBasis", "flexDirection", "flexGrow", "flexShrink", "flexWrap", "fontFamily", "fontSize", "fontStyle", "fontWeight", "fontVariant", "gap", "gapColumn", "gapRow", "height", "justifyContent", "left", "letterSpacing", "lineHeight", "margin", "marginBottom", "marginLeft", "marginRight", "marginTop", "maxHeight", "maxWidth", "minHeight", "minWidth", "objectFit", "opacity", "overflow", "padding", "paddingBottom", "paddingLeft", "paddingRight", "paddingTop", "pointerEvents", "position", "resizeMode", "right", "shadowColor", "shadowOffset", "shadowOpacity", "shadowRadius", "shadowWidth", "start", "textAlign", "textDecorationLine", "textDecorationColor", "textDecorationStyle", "textShadowColor", "textShadowOffset", "textShadowRadius", "textTransform", "tintColor", "transform", "transitionDelay", "transitionDuration", "top", "userSelect", "verticalAlign", "width", "zIndex"]);
 function isReactNativeStyleProp(propName) {
@@ -45,5 +46,5 @@ return stylePropertyAllowlistSet.has(propName) || propName.startsWith("--");
     }
-    const maybeViewportValue = _CSSLengthUnitValue.CSSLengthUnitValue.parse(propValue);
-    if (maybeViewportValue != null) {
-      return maybeViewportValue;
+    const maybeLengthUnitValue = _CSSLengthUnitValue.CSSLengthUnitValue.parse(propValue);
+    if (maybeLengthUnitValue != null) {
+      return new _CSSLengthUnitValue.CSSLengthUnitValue(...maybeLengthUnitValue);
     }
@@ -64,8 +65,6 @@ }
     }
-    if (propName === "backgroundImage") {
-      (0, _errorMsg.errorMsg)("\"backgroundImage\" is not supported in React Native.");
-    } else if (propName === "boxShadow" && typeof styleValue === "string") {
+    if (propName === "boxShadow" && typeof styleValue === "string") {
       const parsedShadow = (0, _parseShadow.parseShadow)(styleValue);
       if (parsedShadow.length > 1) {
-        (0, _errorMsg.errorMsg)("Multiple \"boxShadow\" values are not supported in React Native.");
+        (0, _errorMsg.warnMsg)("Multiple \"boxShadow\" values are not supported in React Native.");
       }
@@ -80,3 +79,3 @@ const {
       if (inset) {
-        (0, _errorMsg.errorMsg)("\"boxShadow\" value of \"inset\" is not supported in React Native.");
+        (0, _errorMsg.warnMsg)("\"boxShadow\" value of \"inset\" is not supported in React Native.");
       }
@@ -90,18 +89,6 @@ processedStyle.shadowColor = color;
       processedStyle.shadowRadius = blurRadius;
-    } else if (propName === "fontWeight" && typeof styleValue === "number") {
-      processedStyle[propName] = styleValue.toString();
-    } else if (propName === "position") {
-      if (styleValue === "fixed") {
-        processedStyle[propName] = "absolute";
-        (0, _errorMsg.errorMsg)("\"position\" value of \"fixed\" is not supported in React Native. Falling back to \"absolute\".");
-      } else if (styleValue === "sticky") {
-        processedStyle[propName] = "relative";
-        (0, _errorMsg.errorMsg)("\"position\" value of \"sticky\" is not supported in React Native. Falling back to \"relative\".");
-      } else {
-        processedStyle[propName] = styleValue;
-      }
     } else if (propName === "textShadow" && typeof styleValue === "string") {
       const parsedShadow = (0, _parseShadow.parseShadow)(styleValue);
       if (parsedShadow.length > 1) {
-        (0, _errorMsg.errorMsg)("Multiple \"textShadow\" values are not supported in React Native.");
+        (0, _errorMsg.warnMsg)("Multiple \"textShadow\" values are not supported in React Native.");
       }
@@ -120,14 +107,2 @@ const {
       processedStyle.textShadowRadius = blurRadius;
-    } else if (propName === "marginHorizontal") {
-      (0, _errorMsg.warnMsg)("\"marginHorizontal\" is deprecated. Use \"marginInline\".");
-      processedStyle.marginInline = styleValue;
-    } else if (propName === "marginVertical") {
-      (0, _errorMsg.warnMsg)("\"marginVertical\" is deprecated. Use \"marginBlock\".");
-      processedStyle.marginBlock = styleValue;
-    } else if (propName === "paddingHorizontal") {
-      (0, _errorMsg.warnMsg)("\"paddingHorizontal\" is deprecated. Use \"paddingInline\".");
-      processedStyle.paddingInline = styleValue;
-    } else if (propName === "paddingVertical") {
-      (0, _errorMsg.warnMsg)("\"paddingVertical\" is deprecated. Use \"paddingBlock\".");
-      processedStyle.paddingBlock = styleValue;
     } else {
@@ -138,3 +113,9 @@ processedStyle[propName] = styleValue;
   for (const prop in processedStyle) {
-    const processedStyleValue = preprocessPropertyValue(processedStyle[prop]);
+    let value = processedStyle[prop];
+    if (prop === "lineHeight") {
+      if (typeof value === "number" || typeof value === "string" && _CSSLengthUnitValue.CSSLengthUnitValue.parse(value) == null) {
+        value = value + "em";
+      }
+    }
+    const processedStyleValue = preprocessPropertyValue(value);
     processedStyle[prop] = processedStyleValue;
@@ -173,2 +154,5 @@ }
   } = (0, _flattenStyle.flattenStyle)(style);
+  let prevStyle = {
+    ...flatStyle
+  };
   const nativeProps = {};
@@ -201,3 +185,110 @@ for (const styleProp in flatStyle) {
     if (!isReactNativeStyleProp(styleProp) && passthroughProperties.indexOf(styleProp) === -1) {
-      (0, _errorMsg.errorMsg)(`Encountered unsupported style property "${styleProp}"`);
+      if (styleProp === "blockSize") {
+        flatStyle.height = flatStyle.height ?? styleValue;
+      } else if (styleProp === "inlineSize") {
+        flatStyle.width = flatStyle.width ?? styleValue;
+      } else if (styleProp === "maxBlockSize") {
+        flatStyle.maxHeight = flatStyle.maxHeight ?? styleValue;
+      } else if (styleProp === "minBlockSize") {
+        flatStyle.minHeight = flatStyle.minHeight ?? styleValue;
+      } else if (styleProp === "maxInlineSize") {
+        flatStyle.maxWidth = flatStyle.maxWidth ?? styleValue;
+      } else if (styleProp === "minInlineSize") {
+        flatStyle.minWidth = flatStyle.minWidth ?? styleValue;
+      } else if (styleProp === "borderBlockColor") {
+        flatStyle.borderTopColor = flatStyle.borderTopColor ?? styleValue;
+        flatStyle.borderBottomColor = flatStyle.borderBottomColor ?? styleValue;
+      } else if (styleProp === "borderBlockStyle") {
+        flatStyle.borderTopStyle = flatStyle.borderTopStyle ?? styleValue;
+        flatStyle.borderBottomStyle = flatStyle.borderBottomStyle ?? styleValue;
+      } else if (styleProp === "borderBlockWidth") {
+        flatStyle.borderTopWidth = flatStyle.borderTopWidth ?? styleValue;
+        flatStyle.borderBottomWidth = flatStyle.borderBottomWidth ?? styleValue;
+      } else if (styleProp === "borderBlockEndColor") {
+        flatStyle.borderBottomColor = prevStyle.borderBottomColor ?? styleValue;
+      } else if (styleProp === "borderBlockEndStyle") {
+        flatStyle.borderBottomStyle = prevStyle.borderBottomStyle ?? styleValue;
+      } else if (styleProp === "borderBlockEndWidth") {
+        flatStyle.borderBottomWidth = prevStyle.borderBottomWidth ?? styleValue;
+      } else if (styleProp === "borderBlockStartColor") {
+        flatStyle.borderTopColor = prevStyle.borderTopColor ?? styleValue;
+      } else if (styleProp === "borderBlockStartStyle") {
+        flatStyle.borderTopStyle = prevStyle.borderTopStyle ?? styleValue;
+      } else if (styleProp === "borderBlockStartWidth") {
+        flatStyle.borderTopWidth = prevStyle.borderTopWidth ?? styleValue;
+      } else if (styleProp === "borderInlineColor") {
+        flatStyle.borderStartColor = flatStyle.borderStartColor ?? styleValue;
+        flatStyle.borderEndColor = flatStyle.borderEndColor ?? styleValue;
+      } else if (styleProp === "borderInlineStyle") {
+        flatStyle.borderStartStyle = flatStyle.borderStartStyle ?? styleValue;
+        flatStyle.borderEndStyle = flatStyle.borderEndStyle ?? styleValue;
+      } else if (styleProp === "borderInlineWidth") {
+        flatStyle.borderStartWidth = flatStyle.borderStartWidth ?? styleValue;
+        flatStyle.borderEndWidth = flatStyle.borderEndWidth ?? styleValue;
+      } else if (styleProp === "borderInlineEndColor") {
+        flatStyle.borderEndColor = styleValue;
+      } else if (styleProp === "borderInlineEndStyle") {
+        flatStyle.borderEndStyle = styleValue;
+      } else if (styleProp === "borderInlineEndWidth") {
+        flatStyle.borderEndWidth = styleValue;
+      } else if (styleProp === "borderInlineStartColor") {
+        flatStyle.borderStartColor = styleValue;
+      } else if (styleProp === "borderInlineStartStyle") {
+        flatStyle.borderStartStyle = styleValue;
+      } else if (styleProp === "borderInlineStartWidth") {
+        flatStyle.borderStartWidth = styleValue;
+      } else if (styleProp === "borderStartStartRadius") {
+        flatStyle.borderTopStartRadius = styleValue;
+      } else if (styleProp === "borderEndStartRadius") {
+        flatStyle.borderBottomStartRadius = styleValue;
+      } else if (styleProp === "borderStartEndRadius") {
+        flatStyle.borderTopEndRadius = styleValue;
+      } else if (styleProp === "borderEndEndRadius") {
+        flatStyle.borderBottomEndRadius = styleValue;
+      } else if (styleProp === "inset") {
+        flatStyle.top = flatStyle.top ?? styleValue;
+        flatStyle.start = flatStyle.start ?? styleValue;
+        flatStyle.end = flatStyle.end ?? styleValue;
+        flatStyle.bottom = flatStyle.bottom ?? styleValue;
+      } else if (styleProp === "insetBlock") {
+        flatStyle.top = flatStyle.top ?? styleValue;
+        flatStyle.bottom = flatStyle.bottom ?? styleValue;
+      } else if (styleProp === "insetBlockEnd") {
+        flatStyle.bottom = prevStyle.bottom ?? styleValue;
+      } else if (styleProp === "insetBlockStart") {
+        flatStyle.top = prevStyle.top ?? styleValue;
+      } else if (styleProp === "insetInline") {
+        flatStyle.end = flatStyle.end ?? styleValue;
+        flatStyle.start = flatStyle.start ?? styleValue;
+      } else if (styleProp === "insetInlineEnd") {
+        flatStyle.end = prevStyle.end ?? styleValue;
+      } else if (styleProp === "insetInlineStart") {
+        flatStyle.start = prevStyle.start ?? styleValue;
+      } else if (styleProp === "marginBlock") {
+        flatStyle.marginVertical = styleValue;
+      } else if (styleProp === "marginBlockStart") {
+        flatStyle.marginTop = flatStyle.marginTop ?? styleValue;
+      } else if (styleProp === "marginBlockEnd") {
+        flatStyle.marginBottom = flatStyle.marginBottom ?? styleValue;
+      } else if (styleProp === "marginInline") {
+        flatStyle.marginHorizontal = styleValue;
+      } else if (styleProp === "marginInlineStart") {
+        flatStyle.marginStart = styleValue;
+      } else if (styleProp === "marginInlineEnd") {
+        flatStyle.marginEnd = styleValue;
+      } else if (styleProp === "paddingBlock") {
+        flatStyle.paddingVertical = styleValue;
+      } else if (styleProp === "paddingBlockStart") {
+        flatStyle.paddingTop = flatStyle.paddingTop ?? styleValue;
+      } else if (styleProp === "paddingBlockEnd") {
+        flatStyle.paddingBottom = flatStyle.paddingBottom ?? styleValue;
+      } else if (styleProp === "paddingInline") {
+        flatStyle.paddingHorizontal = styleValue;
+      } else if (styleProp === "paddingInlineStart") {
+        flatStyle.paddingStart = styleValue;
+      } else if (styleProp === "paddingInlineEnd") {
+        flatStyle.paddingEnd = styleValue;
+      } else {
+        (0, _errorMsg.warnMsg)(`Ignoring unsupported style property "${styleProp}"`);
+      }
       delete flatStyle[styleProp];
@@ -207,3 +298,3 @@ continue;
     if (!isReactNativeStyleValue(styleValue)) {
-      (0, _errorMsg.errorMsg)(`Encounted unsupported style value "${String(styleValue)}" for property "${styleProp}"`);
+      (0, _errorMsg.warnMsg)(`Ignoring unsupported style value "${String(styleValue)}" for property "${styleProp}"`);
       delete flatStyle[styleProp];
@@ -224,18 +315,21 @@ continue;
     }
-    if (flatStyle.borderStartStartRadius != null) {
-      flatStyle.borderTopStartRadius = flatStyle.borderStartStartRadius;
-      delete flatStyle.borderStartStartRadius;
+    if (typeof flatStyle.fontWeight === "number") {
+      flatStyle.fontWeight = flatStyle.fontWeight.toString();
     }
-    if (flatStyle.borderEndStartRadius != null) {
-      flatStyle.borderBottomStartRadius = flatStyle.borderEndStartRadius;
-      delete flatStyle.borderEndStartRadius;
+    const boxSizingValue = flatStyle.boxSizing;
+    if (boxSizingValue === "content-box") {
+      flatStyle = (0, _fixContentBox.fixContentBox)(flatStyle);
     }
-    if (flatStyle.borderStartEndRadius != null) {
-      flatStyle.borderTopEndRadius = flatStyle.borderStartEndRadius;
-      delete flatStyle.borderStartEndRadius;
+    delete flatStyle.boxSizing;
+    const positionValue = flatStyle.position;
+    if (positionValue === "fixed") {
+      flatStyle.position = "absolute";
+      (0, _errorMsg.warnMsg)("\"position\" value of \"fixed\" is not supported in React Native. Falling back to \"absolute\".");
+    } else if (positionValue === "static") {
+      flatStyle.position = "relative";
+      (0, _errorMsg.warnMsg)("\"position\" value of \"static\" is not supported in React Native. Falling back to \"relative\".");
+    } else if (positionValue === "sticky") {
+      flatStyle.position = "relative";
+      (0, _errorMsg.warnMsg)("\"position\" value of \"sticky\" is not supported in React Native. Falling back to \"relative\".");
     }
-    if (flatStyle.borderEndEndRadius != null) {
-      flatStyle.borderBottomEndRadius = flatStyle.borderEndEndRadius;
-      delete flatStyle.borderEndEndRadius;
-    }
     for (const timeValuedProperty of timeValuedProperties) {
@@ -242,0 +336,0 @@ if (typeof flatStyle[timeValuedProperty] === "string") {

lib/stylex.d.ts

@@ -41,2 +41,54 @@ /**
 export declare const include: Stylex$Include;
+type ValueWithDefault<T> =
+  | T
+  | Readonly<{
+      readonly default: T;
+      readonly [$$Key$$: string]: ValueWithDefault<T>;
+    }>;
+type CSSSyntax =
+  | '*'
+  | '<length>'
+  | '<number>'
+  | '<percentage>'
+  | '<length-percentage>'
+  | '<color>'
+  | '<image>'
+  | '<url>'
+  | '<integer>'
+  | '<angle>'
+  | '<time>'
+  | '<resolution>'
+  | '<transform-function>'
+  | '<custom-ident>'
+  | '<transform-list>';
+type CSSSyntaxType = CSSSyntax | ReadonlyArray<CSSSyntax>;
+interface ICSSType<T extends string | number> {
+  readonly value: ValueWithDefault<T>;
+  readonly syntax: CSSSyntaxType;
+}
+export declare const types: {
+  angle: <T extends number | string>(_v: ValueWithDefault<T>) => ICSSType<T>;
+  color: <T extends number | string>(_v: ValueWithDefault<T>) => ICSSType<T>;
+  url: <T extends number | string>(_v: ValueWithDefault<T>) => ICSSType<T>;
+  image: <T extends number | string>(_v: ValueWithDefault<T>) => ICSSType<T>;
+  integer: <T extends number | string>(_v: ValueWithDefault<T>) => ICSSType<T>;
+  lengthPercentage: <T extends number | string>(
+    _v: ValueWithDefault<T>,
+  ) => ICSSType<T>;
+  length: <T extends number | string>(_v: ValueWithDefault<T>) => ICSSType<T>;
+  percentage: <T extends number | string>(
+    _v: ValueWithDefault<T>,
+  ) => ICSSType<T>;
+  number: <T extends number | string>(_v: ValueWithDefault<T>) => ICSSType<T>;
+  resolution: <T extends number | string>(
+    _v: ValueWithDefault<T>,
+  ) => ICSSType<T>;
+  time: <T extends number | string>(_v: ValueWithDefault<T>) => ICSSType<T>;
+  transformFunction: <T extends number | string>(
+    _v: ValueWithDefault<T>,
+  ) => ICSSType<T>;
+  transformList: <T extends number | string>(
+    _v: ValueWithDefault<T>,
+  ) => ICSSType<T>;
+};
 export declare const keyframes: (_keyframes: Keyframes) => string;
@@ -69,2 +121,3 @@ export declare const firstThatWorks: <T extends string | number>(
   include: Stylex$Include;
+  types: typeof types;
   firstThatWorks: <T extends string | number>(
@@ -81,4 +134,4 @@ ...v: ReadonlyArray<T>
 };
+export declare const stylex: IStyleX;
 declare const $$EXPORT_DEFAULT_DECLARATION$$: IStyleX;
 export default $$EXPORT_DEFAULT_DECLARATION$$;
-export declare const stylex: IStyleX;

lib/stylex.js

@@ -8,3 +8,3 @@ "use strict";
 exports.spread = spread;
-exports.unstable_overrideVars = exports.unstable_createVars = exports.stylex = void 0;
+exports.unstable_overrideVars = exports.unstable_createVars = exports.types = exports.stylex = void 0;
 var _stylexInject = _interopRequireDefault(require("./stylex-inject"));
@@ -40,2 +40,45 @@ var _styleq = require("styleq");
 exports.include = include;
+const types = {
+  angle: _v => {
+    throw new Error(errorForType("angle"));
+  },
+  color: _v => {
+    throw new Error(errorForType("color"));
+  },
+  url: _v => {
+    throw new Error(errorForType("url"));
+  },
+  image: _v => {
+    throw new Error(errorForType("image"));
+  },
+  integer: _v => {
+    throw new Error(errorForType("integer"));
+  },
+  lengthPercentage: _v => {
+    throw new Error(errorForType("lengthPercentage"));
+  },
+  length: _v => {
+    throw new Error(errorForType("length"));
+  },
+  percentage: _v => {
+    throw new Error(errorForType("percentage"));
+  },
+  number: _v => {
+    throw new Error(errorForType("number"));
+  },
+  resolution: _v => {
+    throw new Error(errorForType("resolution"));
+  },
+  time: _v => {
+    throw new Error(errorForType("time"));
+  },
+  transformFunction: _v => {
+    throw new Error(errorForType("transformFunction"));
+  },
+  transformList: _v => {
+    throw new Error(errorForType("transformList"));
+  }
+};
+exports.types = types;
+const errorForType = type => `stylex.types.${type} should be compiled away by @stylexjs/babel-plugin`;
 const keyframes = _keyframes => {
@@ -71,5 +114,6 @@ throw new Error("stylex.keyframes should never be called");
 _stylex.UNSUPPORTED_PROPERTY = UNSUPPORTED_PROPERTY;
+_stylex.types = types;
+const stylex = _stylex;
+exports.stylex = stylex;
 var _default = _stylex;
-exports.default = _default;
-const stylex = _stylex;
-exports.stylex = stylex;
+exports.default = _default;

lib/StyleXTypes.d.ts

@@ -24,2 +24,38 @@ /**
 
+type lowerCaseAlphabet =
+  | 'a'
+  | 'b'
+  | 'c'
+  | 'd'
+  | 'e'
+  | 'f'
+  | 'g'
+  | 'h'
+  | 'i'
+  | 'j'
+  | 'k'
+  | 'l'
+  | 'm'
+  | 'n'
+  | 'o'
+  | 'p'
+  | 'q'
+  | 'r'
+  | 's'
+  | 't'
+  | 'u'
+  | 'v'
+  | 'w'
+  | 'x'
+  | 'y'
+  | 'z'
+  | '-'
+  | '_'
+  | '@'
+  | ':';
+
+// Strings that don't start with a dollar sign.
+// So that we can `&` with {$$css: true} without type errors.
+type NonDollarStr = `${lowerCaseAlphabet}${string}`;
+
 type CSSPropTypes = {
@@ -74,14 +110,19 @@ [Key in keyof CSSProperties]: StyleXClassNameFor<Key, CSSProperties[Key]>;
 >;
-export type XStyleWithout<T extends { [$$Key$$: string]: void }> = XStyle<
+export type XStyleWithout<T extends { [$$Key$$: NonDollarStr]: void }> = XStyle<
   Readonly<Pick<NestedCSSPropTypes, Exclude<keyof NestedCSSPropTypes, keyof T>>>
 >;
 
-export type Keyframes = Readonly<{ [name: string]: CSSProperties }>;
-export type LegacyTheme = Readonly<{ [constantName: string]: string }>;
+export type Keyframes = Readonly<{ [name: NonDollarStr]: CSSProperties }>;
+export type LegacyTheme = Readonly<{ [constantName: NonDollarStr]: string }>;
 
 type RawStyles = {
-  [key: string]: null | string | number | Array<string | number> | RawStyles;
+  [key: NonDollarStr]:
+    | null
+    | string
+    | number
+    | Array<string | number>
+    | RawStyles;
 };
 
-type CompiledNamespace<N extends RawStyles> = {
+type CompiledNamespace<const N extends RawStyles> = {
   [K in keyof N]: N[K] extends string | number | null
@@ -100,14 +141,16 @@ ? StyleXClassNameFor<K, N[K]>
 
-export type Stylex$Create = <const S extends { [n: string]: RawStyles }>(
+export type Stylex$Create = <const S extends { [n: NonDollarStr]: RawStyles }>(
   styles: S,
 ) => Readonly<{
-  [N in keyof S]: CompiledNamespace<S[N]>;
+  [N in keyof S]: CompiledNamespace<S[N]> & { $$css: true };
 }>;
 
 export type CompiledStyles = Readonly<{
-  [key: string]: StyleXClassName | Readonly<{ [key: string]: StyleXClassName }>;
-}>;
+  [key: NonDollarStr]:
+    | StyleXClassName
+    | Readonly<{ [key: NonDollarStr]: StyleXClassName }>;
+}> & { $$css: true };
 
 type TTokens = {
-  [key: string]: string | { default: string; [key: string]: string };
+  [key: NonDollarStr]: string | { default: string; [key: string]: string };
 };
@@ -117,3 +160,3 @@
   T extends {
-    [key: string]: string | { default: string; [key: string]: string };
+    [key: NonDollarStr]: string | { default: string; [key: string]: string };
   },
@@ -120,0 +163,0 @@ > = {

package.json

 {
   "name": "@stylexjs/stylex",
-  "version": "0.2.0-beta.19",
+  "version": "0.2.0-beta.20",
   "description": "A library for defining styles for optimized user interfaces.",
@@ -13,3 +13,3 @@ "main": "lib/stylex.js",
     "build": "babel src/ --out-dir lib/ --copy-files",
-    "build-haste": "HASTE=true babel src/ --out-dir lib/ --copy-files",
+    "build-haste": "rewrite-imports -i src/ -o lib/",
     "test": "jest"
@@ -24,3 +24,3 @@ },
   "devDependencies": {
-    "@stylexjs/scripts": "0.2.0-beta.19"
+    "@stylexjs/scripts": "0.2.0-beta.20"
   },
@@ -27,0 +27,0 @@ "jest": {},

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

178967

increased by20.97%

Number of package files

47

increased by6.82%

Lines of code

3224

increased by21.8%

No dependency changes