@stylexjs/stylex 0.2.0-beta.15 → 0.2.0-beta.16

package/lib/StyleXTypes.d.ts

@@ -139,12 +139,12 @@ export type Styles = Readonly<{ [namespace: string]: Style }>;
 export type Style = Readonly</**
  * > 95 | export type Style = $ReadOnly<{
  *      |                               ^
- * > 96 |   [pseudo: string]: CSSProperties,
- *      | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
- * > 97 |   ...CSSProperties,
- *      | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+ * > 96 |   ...CSSProperties,
+ *      | ^^^^^^^^^^^^^^^^^^^
+ * > 97 |   [pseudo: string]: CSSProperties,
+ *      | ^^^^^^^^^^^^^^^^^^^
  * > 98 |   ...
- *      | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+ *      | ^^^^^^^^^^^^^^^^^^^
  * > 99 | }>;
  *      | ^^ Unsupported feature: Translating "object types with spreads, indexers and/or call properties at the same time" is currently not supported.
  **/

package/lib/StyleXTypes.js.flow

@@ -93,8 +93,8 @@ export type XStyleWithout<+T: { [string]: void, ... }> = XStyle<
 export type Styles = $ReadOnly<{ [namespace: string]: Style, ... }>;
 
 export type Style = $ReadOnly<{
-  [pseudo: string]: CSSProperties,
   ...CSSProperties,
+  [pseudo: string]: CSSProperties,
   ...
 }>;
 

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

@@ -367,6 +367,54 @@ 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 "marginHorizontal" 1`] = `
+{
+  "style": {
+    "marginInline": 10,
+  },
+}
+`;
+
+exports[`unsupported style properties "marginStart" 1`] = `
+{
+  "style": {
+    "marginStart": 10,
+  },
+}
+`;
+
+exports[`unsupported style properties "marginVertical" 1`] = `
+{
+  "style": {
+    "marginBlock": 10,
+  },
+}
+`;
+
+exports[`unsupported style properties "paddingHorizontal" 1`] = `
+{
+  "style": {
+    "paddingInline": 10,
+  },
+}
+`;
+
+exports[`unsupported style properties "paddingVertical" 1`] = `
+{
+  "style": {
+    "paddingBlock": 10,
+  },
+}
+`;
+
 exports[`unsupported style properties "transitionProperty" passthrough 1`] = `
 {
   "style": {

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

@@ -413,9 +413,12 @@ 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"', () => {
     const {
@@ -428,6 +431,72 @@ describe('unsupported style properties', () => {
     expect(_stylex.stylex.spread(underTest, mockOptions)).toMatchSnapshot();
     expect(console.error).toHaveBeenCalled();
   });
+  test('"marginStart"', () => {
+    const {
+      underTest
+    } = _stylex.stylex.create({
+      underTest: {
+        marginStart: 10
+      }
+    });
+    expect(_stylex.stylex.spread(underTest, mockOptions)).toMatchSnapshot();
+    expect(console.warn).not.toHaveBeenCalled();
+  });
+  test('"marginEnd"', () => {
+    const {
+      underTest
+    } = _stylex.stylex.create({
+      underTest: {
+        marginEnd: 10
+      }
+    });
+    expect(_stylex.stylex.spread(underTest, mockOptions)).toMatchSnapshot();
+    expect(console.warn).not.toHaveBeenCalled();
+  });
+  test('"marginHorizontal"', () => {
+    const {
+      underTest
+    } = _stylex.stylex.create({
+      underTest: {
+        marginHorizontal: 10
+      }
+    });
+    expect(_stylex.stylex.spread(underTest, mockOptions)).toMatchSnapshot();
+    expect(console.warn).toHaveBeenCalled();
+  });
+  test('"marginVertical"', () => {
+    const {
+      underTest
+    } = _stylex.stylex.create({
+      underTest: {
+        marginVertical: 10
+      }
+    });
+    expect(_stylex.stylex.spread(underTest, mockOptions)).toMatchSnapshot();
+    expect(console.warn).toHaveBeenCalled();
+  });
+  test('"paddingHorizontal"', () => {
+    const {
+      underTest
+    } = _stylex.stylex.create({
+      underTest: {
+        paddingHorizontal: 10
+      }
+    });
+    expect(_stylex.stylex.spread(underTest, mockOptions)).toMatchSnapshot();
+    expect(console.warn).toHaveBeenCalled();
+  });
+  test('"paddingVertical"', () => {
+    const {
+      underTest
+    } = _stylex.stylex.create({
+      underTest: {
+        paddingVertical: 10
+      }
+    });
+    expect(_stylex.stylex.spread(underTest, mockOptions)).toMatchSnapshot();
+    expect(console.warn).toHaveBeenCalled();
+  });
   test('"transitionProperty" passthrough', () => {
     const {
       underTest

package/lib/native/errorMsg.d.ts

@@ -8,3 +8,4 @@
  */
 
 export declare function errorMsg(msg: string): void;
+export declare function warnMsg(msg: string): void;

package/lib/native/errorMsg.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.errorMsg = errorMsg;
+exports.warnMsg = warnMsg;
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -15,4 +16,7 @@ exports.errorMsg = errorMsg;
 
 function errorMsg(msg) {
   console.error(`stylex: ${msg}`);
+}
+function warnMsg(msg) {
+  console.warn(`stylex: ${msg}`);
 }

package/lib/native/errorMsg.js.flow

@@ -8,3 +8,5 @@
  */
 
 declare export function errorMsg(msg: string): void;
+
+declare export function warnMsg(msg: string): void;

package/lib/native/stylex.js

@@ -23,16 +23,16 @@ var _parseShadow = require("./parseShadow");
  * 
  */
 
-const stylePropertyAllowlistSet = new Set(['alignContent', 'alignItems', 'alignSelf', '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', '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',
+const stylePropertyAllowlistSet = new Set(['alignContent', 'alignItems', 'alignSelf', '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',
 // 'includeFontPadding', Android Only
-'inset', 'insetBlock', 'insetBlockEnd', 'insetBlockStart', 'insetInline', 'insetInlineEnd', 'insetInlineStart', 'justifyContent', 'left', 'letterSpacing', 'lineHeight', 'margin', 'marginBlock', 'marginBlockEnd', 'marginBlockStart', 'marginBottom', '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',
+'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',
 // iOS Only
 'textDecorationStyle',
 // iOS Only
 'textShadowColor', 'textShadowOffset', 'textShadowRadius', 'textTransform', 'tintColor', 'transform', 'top', 'userSelect', 'verticalAlign',
 // Android Only
-'width', 'writingDirection',
-// iOS Only
+'width',
+// 'writingDirection', // iOS Only
 'zIndex']);
 function isReactNativeStyleProp(propName) {
   return stylePropertyAllowlistSet.has(propName) || propName.startsWith('--');
@@ -151,6 +151,18 @@ function preprocessCreate(style) {
         width: offsetX
       };
       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 {
       processedStyle[propName] = styleValue;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/stylex",
-  "version": "0.2.0-beta.15",
+  "version": "0.2.0-beta.16",
   "description": "A library for defining styles for optimized user interfaces.",
   "main": "lib/stylex.js",
   "react-native": "lib/native/stylex.js",
@@ -20,7 +20,7 @@
     "utility-types": "^3.10.0"
   },
   "devDependencies": {
-    "@stylexjs/scripts": "0.2.0-beta.15"
+    "@stylexjs/scripts": "0.2.0-beta.16"
   },
   "jest": {},
   "files": [