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

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

@@ -75,6 +75,461 @@ exports[`length units 10 "vw" units are resolved to pixels 1`] = `
 }
 `;
 
+exports[`logical styles blockSize: blockSize 1`] = `
+{
+  "style": {
+    "height": 100,
+  },
+}
+`;
+
+exports[`logical styles blockSize: blockSize after height 1`] = `
+{
+  "style": {
+    "height": 200,
+  },
+}
+`;
+
+exports[`logical styles blockSize: maxBlockSize 1`] = `
+{
+  "style": {
+    "maxHeight": 100,
+  },
+}
+`;
+
+exports[`logical styles blockSize: maxBlockSize after maxHeight 1`] = `
+{
+  "style": {
+    "maxHeight": 200,
+  },
+}
+`;
+
+exports[`logical styles blockSize: minBlockSize 1`] = `
+{
+  "style": {
+    "minHeight": 100,
+  },
+}
+`;
+
+exports[`logical styles blockSize: minBlockSize after minHeight 1`] = `
+{
+  "style": {
+    "minHeight": 200,
+  },
+}
+`;
+
+exports[`logical styles borderBlock: borderBlock 1`] = `
+{
+  "style": {
+    "borderBottomColor": "black",
+    "borderBottomStyle": "solid",
+    "borderBottomWidth": 1,
+    "borderTopColor": "black",
+    "borderTopStyle": "solid",
+    "borderTopWidth": 1,
+  },
+}
+`;
+
+exports[`logical styles borderBlock: borderBlock after borderBlockEnd 1`] = `
+{
+  "style": {
+    "borderBottomColor": "red",
+    "borderBottomStyle": "dotted",
+    "borderBottomWidth": 2,
+    "borderTopColor": "black",
+    "borderTopStyle": "solid",
+    "borderTopWidth": 1,
+  },
+}
+`;
+
+exports[`logical styles borderBlock: borderBlock after borderBlockStart 1`] = `
+{
+  "style": {
+    "borderBottomColor": "black",
+    "borderBottomStyle": "solid",
+    "borderBottomWidth": 1,
+    "borderTopColor": "green",
+    "borderTopStyle": "dashed",
+    "borderTopWidth": 3,
+  },
+}
+`;
+
+exports[`logical styles borderBlock: borderBlockEnd 1`] = `
+{
+  "style": {
+    "borderBottomColor": "red",
+    "borderBottomStyle": "dotted",
+    "borderBottomWidth": 2,
+  },
+}
+`;
+
+exports[`logical styles borderBlock: borderBlockStart 1`] = `
+{
+  "style": {
+    "borderTopColor": "green",
+    "borderTopStyle": "dashed",
+    "borderTopWidth": 3,
+  },
+}
+`;
+
+exports[`logical styles borderInline: borderInline 1`] = `
+{
+  "style": {
+    "borderEndColor": "black",
+    "borderEndStyle": "solid",
+    "borderEndWidth": 1,
+    "borderStartColor": "black",
+    "borderStartStyle": "solid",
+    "borderStartWidth": 1,
+  },
+}
+`;
+
+exports[`logical styles borderInline: borderInline after borderInlineEnd 1`] = `
+{
+  "style": {
+    "borderEndColor": "red",
+    "borderEndStyle": "dotted",
+    "borderEndWidth": 2,
+    "borderStartColor": "black",
+    "borderStartStyle": "solid",
+    "borderStartWidth": 1,
+  },
+}
+`;
+
+exports[`logical styles borderInline: borderInline after borderInlineStart 1`] = `
+{
+  "style": {
+    "borderEndColor": "black",
+    "borderEndStyle": "solid",
+    "borderEndWidth": 1,
+    "borderStartColor": "green",
+    "borderStartStyle": "dashed",
+    "borderStartWidth": 3,
+  },
+}
+`;
+
+exports[`logical styles borderInline: borderInlineEnd 1`] = `
+{
+  "style": {
+    "borderEndColor": "red",
+    "borderEndStyle": "dotted",
+    "borderEndWidth": 2,
+  },
+}
+`;
+
+exports[`logical styles borderInline: borderInlineStart 1`] = `
+{
+  "style": {
+    "borderStartColor": "green",
+    "borderStartStyle": "dashed",
+    "borderStartWidth": 3,
+  },
+}
+`;
+
+exports[`logical styles borderRadius: endend 1`] = `
+{
+  "style": {
+    "borderBottomEndRadius": 10,
+  },
+}
+`;
+
+exports[`logical styles borderRadius: endstart 1`] = `
+{
+  "style": {
+    "borderBottomStartRadius": 10,
+  },
+}
+`;
+
+exports[`logical styles borderRadius: startend 1`] = `
+{
+  "style": {
+    "borderTopEndRadius": 10,
+  },
+}
+`;
+
+exports[`logical styles borderRadius: startstart 1`] = `
+{
+  "style": {
+    "borderTopStartRadius": 10,
+  },
+}
+`;
+
+exports[`logical styles inlineSize: inlineSize 1`] = `
+{
+  "style": {
+    "width": 100,
+  },
+}
+`;
+
+exports[`logical styles inlineSize: inlineSize after width 1`] = `
+{
+  "style": {
+    "width": 200,
+  },
+}
+`;
+
+exports[`logical styles inlineSize: maxInlineSize 1`] = `
+{
+  "style": {
+    "maxWidth": 100,
+  },
+}
+`;
+
+exports[`logical styles inlineSize: maxInlineSize after maxWidth 1`] = `
+{
+  "style": {
+    "maxWidth": 200,
+  },
+}
+`;
+
+exports[`logical styles inlineSize: minInlineSize 1`] = `
+{
+  "style": {
+    "minWidth": 100,
+  },
+}
+`;
+
+exports[`logical styles inlineSize: minInlineSize after minWidth 1`] = `
+{
+  "style": {
+    "minWidth": 200,
+  },
+}
+`;
+
+exports[`logical styles inset: inset 1`] = `
+{
+  "style": {
+    "bottom": 1,
+    "end": 1,
+    "start": 1,
+    "top": 1,
+  },
+}
+`;
+
+exports[`logical styles inset: inset vs top 1`] = `
+{
+  "style": {
+    "bottom": 100,
+    "left": 10,
+    "right": 10,
+    "top": 100,
+  },
+}
+`;
+
+exports[`logical styles inset: insetBlock 1`] = `
+{
+  "style": {
+    "bottom": 2,
+    "top": 2,
+  },
+}
+`;
+
+exports[`logical styles inset: insetBlock vs top 1`] = `
+{
+  "style": {
+    "bottom": 100,
+    "top": 100,
+  },
+}
+`;
+
+exports[`logical styles inset: insetBlockEnd 1`] = `
+{
+  "style": {
+    "bottom": 4,
+  },
+}
+`;
+
+exports[`logical styles inset: insetBlockEnd vs bottom 1`] = `
+{
+  "style": {
+    "bottom": 100,
+  },
+}
+`;
+
+exports[`logical styles inset: insetBlockStart 1`] = `
+{
+  "style": {
+    "top": 3,
+  },
+}
+`;
+
+exports[`logical styles inset: insetBlockStart vs top 1`] = `
+{
+  "style": {
+    "top": 100,
+  },
+}
+`;
+
+exports[`logical styles inset: insetInline 1`] = `
+{
+  "style": {
+    "end": 5,
+    "start": 5,
+  },
+}
+`;
+
+exports[`logical styles inset: insetInlineEnd 1`] = `
+{
+  "style": {
+    "end": 7,
+  },
+}
+`;
+
+exports[`logical styles inset: insetInlineStart 1`] = `
+{
+  "style": {
+    "start": 6,
+  },
+}
+`;
+
+exports[`logical styles margin: marginBlock 1`] = `
+{
+  "style": {
+    "marginVertical": 1,
+  },
+}
+`;
+
+exports[`logical styles margin: marginBlockEnd 1`] = `
+{
+  "style": {
+    "marginBottom": 3,
+  },
+}
+`;
+
+exports[`logical styles margin: marginBlockStart 1`] = `
+{
+  "style": {
+    "marginTop": 2,
+  },
+}
+`;
+
+exports[`logical styles margin: marginInline 1`] = `
+{
+  "style": {
+    "marginHorizontal": 1,
+  },
+}
+`;
+
+exports[`logical styles margin: marginInlineEnd 1`] = `
+{
+  "style": {
+    "marginEnd": 3,
+  },
+}
+`;
+
+exports[`logical styles margin: marginInlineStart 1`] = `
+{
+  "style": {
+    "marginStart": 2,
+  },
+}
+`;
+
+exports[`logical styles padding: paddingBlock 1`] = `
+{
+  "style": {
+    "paddingVertical": 1,
+  },
+}
+`;
+
+exports[`logical styles padding: paddingBlockEnd 1`] = `
+{
+  "style": {
+    "paddingBottom": 3,
+  },
+}
+`;
+
+exports[`logical styles padding: paddingBlockStart 1`] = `
+{
+  "style": {
+    "paddingTop": 2,
+  },
+}
+`;
+
+exports[`logical styles padding: paddingInline 1`] = `
+{
+  "style": {
+    "paddingHorizontal": 1,
+  },
+}
+`;
+
+exports[`logical styles padding: paddingInlineEnd 1`] = `
+{
+  "style": {
+    "paddingEnd": 3,
+  },
+}
+`;
+
+exports[`logical styles padding: paddingInlineStart 1`] = `
+{
+  "style": {
+    "paddingStart": 2,
+  },
+}
+`;
+
+exports[`logical styles textAlign: end 1`] = `
+{
+  "style": {
+    "textAlign": "end",
+  },
+}
+`;
+
+exports[`logical styles textAlign: start 1`] = `
+{
+  "style": {
+    "textAlign": "start",
+  },
+}
+`;
+
 exports[`styles animation-delay 1`] = `
 {
   "style": {
@@ -122,6 +577,106 @@ exports[`styles box-shadow 1`] = `
 }
 `;
 
+exports[`styles box-sizing: content-box: allDifferent 1`] = `
+{
+  "style": {
+    "borderBottomWidth": 3,
+    "borderLeftWidth": 4,
+    "borderRightWidth": 2,
+    "borderTopWidth": 1,
+    "height": 144,
+    "paddingBottom": 30,
+    "paddingLeft": 40,
+    "paddingRight": 20,
+    "paddingTop": 10,
+    "width": 166,
+  },
+}
+`;
+
+exports[`styles box-sizing: content-box: auto 1`] = `
+{
+  "style": {
+    "borderWidth": 2,
+    "height": 74,
+    "padding": 10,
+    "width": "auto",
+  },
+}
+`;
+
+exports[`styles box-sizing: content-box: height 1`] = `
+{
+  "style": {
+    "borderWidth": 2,
+    "height": 74,
+    "padding": 10,
+  },
+}
+`;
+
+exports[`styles box-sizing: content-box: maxHeight 1`] = `
+{
+  "style": {
+    "borderWidth": 2,
+    "maxHeight": 74,
+    "padding": 10,
+  },
+}
+`;
+
+exports[`styles box-sizing: content-box: maxWidth 1`] = `
+{
+  "style": {
+    "borderWidth": 2,
+    "maxWidth": 124,
+    "padding": 10,
+  },
+}
+`;
+
+exports[`styles box-sizing: content-box: minHeight 1`] = `
+{
+  "style": {
+    "borderWidth": 2,
+    "minHeight": 74,
+    "padding": 10,
+  },
+}
+`;
+
+exports[`styles box-sizing: content-box: minWidth 1`] = `
+{
+  "style": {
+    "borderWidth": 2,
+    "minWidth": 124,
+    "padding": 10,
+  },
+}
+`;
+
+exports[`styles box-sizing: content-box: units 1`] = `
+{
+  "style": {
+    "borderWidth": 2,
+    "height": 86,
+    "padding": 16,
+    "width": 136,
+  },
+}
+`;
+
+exports[`styles box-sizing: content-box: width 1`] = `
+{
+  "style": {
+    "borderWidth": 2,
+    "overflow": "hidden",
+    "padding": 10,
+    "width": 124,
+  },
+}
+`;
+
 exports[`styles direction 1`] = `
 {
   "style": {
@@ -184,34 +739,34 @@ exports[`styles line-clamp 1`] = `
 }
 `;
 
-exports[`styles logical border radius: endend 1`] = `
+exports[`styles line-height: px 1`] = `
 {
   "style": {
-    "borderBottomEndRadius": 10,
+    "lineHeight": 24,
   },
 }
 `;
 
-exports[`styles logical border radius: endstart 1`] = `
+exports[`styles line-height: rem 1`] = `
 {
   "style": {
-    "borderBottomStartRadius": 10,
+    "lineHeight": 24,
   },
 }
 `;
 
-exports[`styles logical border radius: startend 1`] = `
+exports[`styles line-height: unitless number 1`] = `
 {
   "style": {
-    "borderTopEndRadius": 10,
+    "lineHeight": 24,
   },
 }
 `;
 
-exports[`styles logical border radius: startstart 1`] = `
+exports[`styles line-height: unitless string 1`] = `
 {
   "style": {
-    "borderTopStartRadius": 10,
+    "lineHeight": 24,
   },
 }
 `;
@@ -291,7 +846,7 @@ exports[`styles position: relative 1`] = `
 exports[`styles position: static 1`] = `
 {
   "style": {
-    "position": "static",
+    "position": "relative",
   },
 }
 `;
@@ -448,53 +1003,17 @@ exports[`styles vertical-align: top 1`] = `
 
 exports[`unsupported style properties "filter" 1`] = `{}`;
 
-exports[`unsupported style properties "marginEnd" 1`] = `
-{
-  "style": {
-    "marginEnd": 10,
-  },
-}
-`;
+exports[`unsupported style properties "marginEnd" 1`] = `{}`;
 
-exports[`unsupported style properties "marginHorizontal" 1`] = `
-{
-  "style": {
-    "marginInline": 10,
-  },
-}
-`;
+exports[`unsupported style properties "marginHorizontal" 1`] = `{}`;
 
-exports[`unsupported style properties "marginStart" 1`] = `
-{
-  "style": {
-    "marginStart": 10,
-  },
-}
-`;
+exports[`unsupported style properties "marginStart" 1`] = `{}`;
 
-exports[`unsupported style properties "marginVertical" 1`] = `
-{
-  "style": {
-    "marginBlock": 10,
-  },
-}
-`;
+exports[`unsupported style properties "marginVertical" 1`] = `{}`;
 
-exports[`unsupported style properties "paddingHorizontal" 1`] = `
-{
-  "style": {
-    "paddingInline": 10,
-  },
-}
-`;
+exports[`unsupported style properties "paddingHorizontal" 1`] = `{}`;
 
-exports[`unsupported style properties "paddingVertical" 1`] = `
-{
-  "style": {
-    "paddingBlock": 10,
-  },
-}
-`;
+exports[`unsupported style properties "paddingVertical" 1`] = `{}`;
 
 exports[`unsupported style properties "transitionProperty" passthrough 1`] = `
 {