@stylexjs/shared 0.2.0-beta.15 → 0.2.0-beta.17

package/lib/preprocess-rules/flatten-raw-style-obj.js

@@ -9,15 +9,6 @@ var _index = _interopRequireDefault(require("./index"));
 var _PreRule = require("./PreRule");
 var _stylexInclude = require("../stylex-include");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-/**
- * 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 flattenRawStyleObject(style, options) {
   return _flattenRawStyleObject(style, [], [], options);
 }
@@ -25,15 +16,11 @@ function _flattenRawStyleObject(style, pseudos, atRules, options) {
   const flattened = [];
   for (const key in style) {
     const value = style[key];
-
-    // Included Styles
-    if (typeof value === 'object' && value instanceof _stylexInclude.IncludedStyles) {
+    if (typeof value === "object" && value instanceof _stylexInclude.IncludedStyles) {
       flattened.push([key, new _PreRule.PreIncludedStylesRule(value)]);
       continue;
     }
-
-    // Default styles
-    if (value === null || typeof value === 'string' || typeof value === 'number') {
+    if (value === null || typeof value === "string" || typeof value === "number") {
       const pairs = (0, _index.default)([key, value], options);
       for (const [property, value] of pairs) {
         if (value === null) {
@@ -44,8 +31,6 @@ function _flattenRawStyleObject(style, pseudos, atRules, options) {
       }
       continue;
     }
-
-    // Fallback Styles
     if (Array.isArray(value)) {
       const equivalentPairs = {};
       for (const eachVal of value) {
@@ -64,20 +49,13 @@ function _flattenRawStyleObject(style, pseudos, atRules, options) {
           }
         }
       }
-      // Deduplicate
-      Object.entries(equivalentPairs)
-      // Remove Nulls
-      .map(_ref => {
+      Object.entries(equivalentPairs).map(_ref => {
         let [property, values] = _ref;
         return [property, [...new Set(values.filter(Boolean))]];
-      })
-      // Deduplicate and default to null when no values are found
-      .map(_ref2 => {
+      }).map(_ref2 => {
         let [property, values] = _ref2;
         return [property, values.length === 0 ? null : values.length === 1 ? values[0] : values];
-      })
-      // Push to flattened
-      .forEach(_ref3 => {
+      }).forEach(_ref3 => {
         let [property, value] = _ref3;
         if (value === null) {
           flattened.push([property, new _PreRule.NullPreRule()]);
@@ -87,17 +65,15 @@ function _flattenRawStyleObject(style, pseudos, atRules, options) {
       });
       continue;
     }
-
-    // Object Values for propetiies. e.g. { color: { hover: 'red', default: 'blue' } }
-    if (typeof value === 'object' && !key.startsWith(':') && !key.startsWith('@')) {
+    if (typeof value === "object" && !key.startsWith(":") && !key.startsWith("@")) {
       const equivalentPairs = {};
       for (const condition in value) {
         const innerValue = value[condition];
         const pseudosToPassDown = [...pseudos];
         const atRulesToPassDown = [...atRules];
-        if (condition.startsWith(':')) {
+        if (condition.startsWith(":")) {
           pseudosToPassDown.push(condition);
-        } else if (condition.startsWith('@')) {
+        } else if (condition.startsWith("@")) {
           atRulesToPassDown.push(condition);
         }
         const pairs = _flattenRawStyleObject({
@@ -105,8 +81,7 @@ function _flattenRawStyleObject(style, pseudos, atRules, options) {
         }, pseudosToPassDown, atRulesToPassDown, options);
         for (const [property, preRule] of pairs) {
           if (preRule instanceof _PreRule.PreIncludedStylesRule) {
-            // NOT POSSIBLE, but needed for Flow
-            throw new Error('stylex.include can only be used at the top-level');
+            throw new Error("stylex.include can only be used at the top-level");
           }
           if (equivalentPairs[property] == null) {
             equivalentPairs[property] = {
@@ -118,29 +93,25 @@ function _flattenRawStyleObject(style, pseudos, atRules, options) {
         }
       }
       for (const [property, obj] of Object.entries(equivalentPairs)) {
-        const sortedKeys = Object.keys(obj); //.sort();
+        const sortedKeys = Object.keys(obj);
         const rules = [];
         for (const condition of sortedKeys) {
           rules.push(obj[condition]);
         }
-        // If there are many conditions with `null` values, we will collapse them into a single `null` value.
-        // `PreRuleSet.create` takes care of that for us.
         flattened.push([property, _PreRule.PreRuleSet.create(rules)]);
       }
     }
-
-    // Object Values for pseudos and at-rules. e.g. { ':hover': { color: 'red' } }
-    if (typeof value === 'object' && (key.startsWith(':') || key.startsWith('@'))) {
+    if (typeof value === "object" && (key.startsWith(":") || key.startsWith("@"))) {
       const pseudosToPassDown = [...pseudos];
       const atRulesToPassDown = [...atRules];
-      if (key.startsWith(':')) {
+      if (key.startsWith(":")) {
         pseudosToPassDown.push(key);
-      } else if (key.startsWith('@')) {
+      } else if (key.startsWith("@")) {
         atRulesToPassDown.push(key);
       }
       const pairs = _flattenRawStyleObject(value, pseudosToPassDown, atRulesToPassDown, options);
       for (const [property, preRule] of pairs) {
-        flattened.push([key + '_' + property, preRule]);
+        flattened.push([key + "_" + property, preRule]);
       }
     }
   }

package/lib/preprocess-rules/flatten-raw-style-obj.js.flow

@@ -16,12 +16,12 @@ import {
 } from './PreRule';
 declare export function flattenRawStyleObject(
   style: RawStyles,
-  options: StyleXOptions
+  options: StyleXOptions,
 ): $ReadOnlyArray<$ReadOnly<[string, IPreRule]>>;
 
 declare export function _flattenRawStyleObject(
   style: RawStyles,
   pseudos: $ReadOnlyArray<string>,
   atRules: $ReadOnlyArray<string>,
-  options: StyleXOptions
+  options: StyleXOptions,
 ): Array<$ReadOnly<[string, AnyPreRule | PreIncludedStylesRule]>>;

package/lib/preprocess-rules/index.d.ts

@@ -9,10 +9,10 @@
 
 import type { StyleXOptions, TStyleValue } from '../common-types';
 export declare function getExpandedKeys(
-  options: StyleXOptions
+  options: StyleXOptions,
 ): ReadonlyArray<string>;
 declare function flatMapExpandedShorthands(
   objEntry: Readonly<[string, TStyleValue]>,
-  options: StyleXOptions
+  options: StyleXOptions,
 ): ReadonlyArray<[string, TStyleValue]>;
 export default flatMapExpandedShorthands;

package/lib/preprocess-rules/index.js

@@ -9,29 +9,20 @@ var _applicationOrder = _interopRequireDefault(require("./application-order"));
 var _legacyExpandShorthands = _interopRequireDefault(require("./legacy-expand-shorthands"));
 var _propertySpecificity = _interopRequireDefault(require("./property-specificity"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-/**
- * 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 expansions = {
-  'application-order': _applicationOrder.default,
-  'property-specificity': _propertySpecificity.default,
-  'legacy-expand-shorthands': _legacyExpandShorthands.default
+  "application-order": _applicationOrder.default,
+  "property-specificity": _propertySpecificity.default,
+  "legacy-expand-shorthands": _legacyExpandShorthands.default
 };
 function getExpandedKeys(options) {
-  return Object.keys(expansions[options.styleResolution ?? 'application-order']);
+  return Object.keys(expansions[options.styleResolution ?? "application-order"]);
 }
 function flatMapExpandedShorthands(objEntry, options) {
   const [key, value] = objEntry;
-  const expansion = expansions[options.styleResolution ?? 'application-order'][key];
+  const expansion = expansions[options.styleResolution ?? "application-order"][key];
   if (expansion) {
     if (Array.isArray(value)) {
-      throw new Error('Cannot use fallbacks for shorthands. Use the expansion instead.');
+      throw new Error("Cannot use fallbacks for shorthands. Use the expansion instead.");
     }
     return expansion(value);
   }

package/lib/preprocess-rules/index.js.flow

@@ -10,10 +10,10 @@
 import type { StyleXOptions, TStyleValue } from '../common-types';
 
 declare export function getExpandedKeys(
-  options: StyleXOptions
+  options: StyleXOptions,
 ): $ReadOnlyArray<string>;
 
 declare export default function flatMapExpandedShorthands(
   objEntry: $ReadOnly<[string, TStyleValue]>,
-  options: StyleXOptions
+  options: StyleXOptions,
 ): $ReadOnlyArray<[string, TStyleValue]>;

package/lib/preprocess-rules/legacy-expand-shorthands.d.ts

@@ -103,7 +103,7 @@ import type { TStyleValue } from '../common-types';
  */
 
 type TReturn = ReadonlyArray<[string, TStyleValue]>;
-declare var expansions: {
+declare const expansions: {
   border: (rawValue: TStyleValue) => TReturn;
   borderColor: (rawValue: TStyleValue) => TReturn;
   borderHorizontal: (rawValue: TStyleValue) => TReturn;
@@ -119,4 +119,5 @@ declare var expansions: {
   paddingHorizontal: (rawValue: TStyleValue) => TReturn;
   paddingVertical: (rawValue: TStyleValue) => TReturn;
 };
-export default expansions;
+declare const $$EXPORT_DEFAULT_DECLARATION$$: typeof expansions;
+export default $$EXPORT_DEFAULT_DECLARATION$$;

package/lib/preprocess-rules/legacy-expand-shorthands.js

@@ -6,74 +6,55 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _splitCssValue = _interopRequireDefault(require("../utils/split-css-value"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-/**
- * 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 expansions = {
   border: rawValue => {
-    return [['borderTop', rawValue], ['borderEnd', rawValue], ['borderBottom', rawValue], ['borderStart', rawValue]];
+    return [["borderTop", rawValue], ["borderEnd", rawValue], ["borderBottom", rawValue], ["borderStart", rawValue]];
   },
   borderColor: rawValue => {
     const [top, right = top, bottom = top, left = right] = (0, _splitCssValue.default)(rawValue);
-    return [['borderTopColor', top], ['borderEndColor', right], ['borderBottomColor', bottom], ['borderStartColor', left]];
+    return [["borderTopColor", top], ["borderEndColor", right], ["borderBottomColor", bottom], ["borderStartColor", left]];
   },
   borderHorizontal: rawValue => {
-    return [['borderStart', rawValue], ['borderEnd', rawValue]];
-    // return [
-    //   ...expansions.borderStart(rawValue),
-    //   ...expansions.borderEnd(rawValue),
-    // ];
+    return [["borderStart", rawValue], ["borderEnd", rawValue]];
   },
-
   borderStyle: rawValue => {
     const [top, right = top, bottom = top, left = right] = (0, _splitCssValue.default)(rawValue);
-    return [['borderTopStyle', top], ['borderEndStyle', right], ['borderBottomStyle', bottom], ['borderStartStyle', left]];
+    return [["borderTopStyle", top], ["borderEndStyle", right], ["borderBottomStyle", bottom], ["borderStartStyle", left]];
   },
   borderVertical: rawValue => {
-    return [['borderTop', rawValue], ['borderBottom', rawValue]];
-    // return [
-    //   ...expansions.borderTop(rawValue),
-    //   ...expansions.borderBottom(rawValue),
-    // ];
+    return [["borderTop", rawValue], ["borderBottom", rawValue]];
   },
-
   borderWidth: rawValue => {
     const [top, right = top, bottom = top, left = right] = (0, _splitCssValue.default)(rawValue);
-    return [['borderTopWidth', top], ['borderEndWidth', right], ['borderBottomWidth', bottom], ['borderStartWidth', left]];
+    return [["borderTopWidth", top], ["borderEndWidth", right], ["borderBottomWidth", bottom], ["borderStartWidth", left]];
   },
   borderRadius: rawValue => {
     const [top, right = top, bottom = top, left = right] = (0, _splitCssValue.default)(rawValue);
-    return [['borderTopStartRadius', top], ['borderTopEndRadius', right], ['borderBottomEndRadius', bottom], ['borderBottomStartRadius', left]];
+    return [["borderTopStartRadius", top], ["borderTopEndRadius", right], ["borderBottomEndRadius", bottom], ["borderBottomStartRadius", left]];
   },
   margin: rawValue => {
     const [top, right = top, bottom = top, left = right] = (0, _splitCssValue.default)(rawValue);
-    return [['marginTop', top], ['marginEnd', right], ['marginBottom', bottom], ['marginStart', left]];
+    return [["marginTop", top], ["marginEnd", right], ["marginBottom", bottom], ["marginStart", left]];
   },
   marginHorizontal: rawValue => {
-    return [['marginStart', rawValue], ['marginEnd', rawValue]];
+    return [["marginStart", rawValue], ["marginEnd", rawValue]];
   },
   marginVertical: rawValue => {
-    return [['marginTop', rawValue], ['marginBottom', rawValue]];
+    return [["marginTop", rawValue], ["marginBottom", rawValue]];
   },
   overflow: rawValue => {
     const [x, y = x] = (0, _splitCssValue.default)(rawValue);
-    return [['overflowX', x], ['overflowY', y]];
+    return [["overflowX", x], ["overflowY", y]];
   },
   padding: rawValue => {
     const [top, right = top, bottom = top, left = right] = (0, _splitCssValue.default)(rawValue);
-    return [['paddingTop', top], ['paddingEnd', right], ['paddingBottom', bottom], ['paddingStart', left]];
+    return [["paddingTop", top], ["paddingEnd", right], ["paddingBottom", bottom], ["paddingStart", left]];
   },
   paddingHorizontal: rawValue => {
-    return [['paddingStart', rawValue], ['paddingEnd', rawValue]];
+    return [["paddingStart", rawValue], ["paddingEnd", rawValue]];
   },
   paddingVertical: rawValue => {
-    return [['paddingTop', rawValue], ['paddingBottom', rawValue]];
+    return [["paddingTop", rawValue], ["paddingBottom", rawValue]];
   }
 };
 var _default = expansions;

package/lib/preprocess-rules/legacy-expand-shorthands.js.flow

@@ -81,7 +81,7 @@ import type { TStyleValue } from '../common-types';
 
 type TReturn = $ReadOnlyArray<[string, TStyleValue]>;
 
-declare var expansions: {
+declare const expansions: {
   border: (rawValue: TStyleValue) => TReturn,
   borderColor: (rawValue: TStyleValue) => TReturn,
   borderHorizontal: (rawValue: TStyleValue) => TReturn,
@@ -98,4 +98,4 @@ declare var expansions: {
   paddingVertical: (rawValue: TStyleValue) => TReturn,
 };
 
-declare export default expansions;
+declare export default typeof expansions;

package/lib/preprocess-rules/property-specificity.d.ts

@@ -9,7 +9,7 @@
 
 import type { TStyleValue } from '../common-types';
 type TReturn = ReadonlyArray<[string, TStyleValue]>;
-declare var shorthands: {
+declare const shorthands: {
   all: (_: TStyleValue) => TReturn;
   animation: (_value: TStyleValue) => TReturn;
   background: (_value: TStyleValue) => TReturn;
@@ -25,7 +25,7 @@ declare var shorthands: {
   margin: (value: TStyleValue) => TReturn;
   padding: (rawValue: TStyleValue) => TReturn;
 };
-declare var aliases: {
+declare const aliases: {
   borderHorizontal: any;
   borderVertical: any;
   borderBlockStart: any;
@@ -71,6 +71,9 @@ declare var aliases: {
   start: (value: TStyleValue) => TReturn;
   end: (value: TStyleValue) => TReturn;
 };
-declare var expansions: Omit<shorthands, keyof (aliases | {})> &
-  Omit<aliases, keyof ({})> & {};
-export default expansions;
+declare const $$EXPORT_DEFAULT_DECLARATION$$: Readonly</**
+ * > 86 |   ...typeof shorthands,
+ *      |   ^^^^^^^^^^^^^^^^^^^^ Unsupported feature: Translating "object types with complex spreads" is currently not supported.
+ **/
+any>;
+export default $$EXPORT_DEFAULT_DECLARATION$$;

package/lib/preprocess-rules/property-specificity.js

@@ -6,126 +6,104 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _splitCssValue = _interopRequireDefault(require("../utils/split-css-value"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-/**
- * 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 shorthands = {
   all: _ => {
-    throw new Error('all is not supported');
+    throw new Error("all is not supported");
   },
   animation: _value => {
-    throw new Error('animation is not supported');
+    throw new Error("animation is not supported");
   },
   background: _value => {
-    throw new Error('background is not supported. Use background-color, border-image etc. instead.');
+    throw new Error("background is not supported. Use background-color, border-image etc. instead.");
   },
   border: _rawValue => {
-    throw new Error('border is not supported. Use border-width, border-style and border-color instead.');
+    throw new Error("border is not supported. Use border-width, border-style and border-color instead.");
   },
   borderInline: _rawValue => {
-    throw new Error('borderInline is not supported. Use borderInlineWidth, borderInlineStyle and borderInlineColor instead.');
+    throw new Error("borderInline is not supported. Use borderInlineWidth, borderInlineStyle and borderInlineColor instead.");
   },
-  // @Deprecated
   borderBlock: _rawValue => {
-    throw new Error('borderBlock is not supported. Use borderBlockWidth, borderBlockStyle and borderBlockColor instead.');
+    throw new Error("borderBlock is not supported. Use borderBlockWidth, borderBlockStyle and borderBlockColor instead.");
   },
-  // @Deprecated
   borderTop: _rawValue => {
-    throw new Error('borderTop is not supported. Use borderTopWidth, borderTopStyle and borderTopColor instead.');
+    throw new Error("borderTop is not supported. Use borderTopWidth, borderTopStyle and borderTopColor instead.");
   },
-  // @Deprecated
   borderInlineEnd: _rawValue => {
-    throw new Error('borderInlineEnd is not supported. Use borderInlineEndWidth, borderInlineEndStyle and borderInlineEndColor instead.');
+    throw new Error("borderInlineEnd is not supported. Use borderInlineEndWidth, borderInlineEndStyle and borderInlineEndColor instead.");
   },
-  // @Deprecated
   borderRight: _rawValue => {
-    throw new Error('borderRight is not supported. Use borderRightWidth, borderRightStyle and borderRightColor instead.');
+    throw new Error("borderRight is not supported. Use borderRightWidth, borderRightStyle and borderRightColor instead.");
   },
-  // @Deprecated
   borderBottom: _rawValue => {
-    throw new Error('borderBottom is not supported. Use borderBottomWidth, borderBottomStyle and borderBottomColor instead.');
+    throw new Error("borderBottom is not supported. Use borderBottomWidth, borderBottomStyle and borderBottomColor instead.");
   },
-  // @Deprecated
   borderInlineStart: _rawValue => {
-    throw new Error('borderInlineStart is not supported. Use borderInlineStartWidth, borderInlineStartStyle and borderInlineStartColor instead.');
+    throw new Error("borderInlineStart is not supported. Use borderInlineStartWidth, borderInlineStartStyle and borderInlineStartColor instead.");
   },
-  // @Deprecated
   borderLeft: _rawValue => {
-    throw new Error(['`borderLeft` is not supported.', 'You could use `borderLeftWidth`, `borderLeftStyle` and `borderLeftColor`,', 'but it is preferable to use `borderInlineStartWidth`, `borderInlineStartStyle` and `borderInlineStartColor`.'].join(' '));
+    throw new Error(["`borderLeft` is not supported.", "You could use `borderLeftWidth`, `borderLeftStyle` and `borderLeftColor`,", "but it is preferable to use `borderInlineStartWidth`, `borderInlineStartStyle` and `borderInlineStartColor`."].join(" "));
   },
   margin: value => {
     const values = (0, _splitCssValue.default)(value);
     if (values.length === 1) {
-      return [['margin', values[0]]];
+      return [["margin", values[0]]];
     } else {
-      throw new Error('margin shorthand with multiple values is not supported. Use marginTop, marginInlineEnd, marginBottom and marginInlineStart instead.');
+      throw new Error("margin shorthand with multiple values is not supported. Use marginTop, marginInlineEnd, marginBottom and marginInlineStart instead.");
     }
   },
   padding: rawValue => {
     const values = (0, _splitCssValue.default)(rawValue);
     if (values.length === 1) {
-      return [['padding', values[0]]];
+      return [["padding", values[0]]];
     }
-    throw new Error('padding shorthand with multiple values is not supported. Use paddingTop, paddingInlineEnd, paddingBottom and paddingInlineStart instead.');
+    throw new Error("padding shorthand with multiple values is not supported. Use paddingTop, paddingInlineEnd, paddingBottom and paddingInlineStart instead.");
   }
 };
 const aliases = {
-  // @UNSUPPORTED
   borderHorizontal: shorthands.borderInline,
-  // @UNSUPPORTED
   borderVertical: shorthands.borderBlock,
-  // @UNSUPPORTED
   borderBlockStart: shorthands.borderTop,
-  // @UNSUPPORTED
   borderEnd: shorthands.borderInlineEnd,
-  // @UNSUPPORTED
   borderBlockEnd: shorthands.borderBottom,
-  // @UNSUPPORTED
   borderStart: shorthands.borderInlineStart,
-  borderHorizontalWidth: value => [['borderInlineWidth', value]],
-  borderHorizontalStyle: value => [['borderInlineStyle', value]],
-  borderHorizontalColor: value => [['borderInlineColor', value]],
-  borderVerticalWidth: value => [['borderBlockWidth', value]],
-  borderVerticalStyle: value => [['borderBlockStyle', value]],
-  borderVerticalColor: value => [['borderBlockColor', value]],
-  borderBlockStartColor: value => [['borderTopColor', value]],
-  borderBlockEndColor: value => [['borderBottomColor', value]],
-  borderBlockStartStyle: value => [['borderTopStyle', value]],
-  borderBlockEndStyle: value => [['borderBottomStyle', value]],
-  borderBlockStartWidth: value => [['borderTopWidth', value]],
-  borderBlockEndWidth: value => [['borderBottomWidth', value]],
-  borderStartColor: value => [['borderInlineStartColor', value]],
-  borderEndColor: value => [['borderInlineEndColor', value]],
-  borderStartStyle: value => [['borderInlineStartStyle', value]],
-  borderEndStyle: value => [['borderInlineEndStyle', value]],
-  borderStartWidth: value => [['borderInlineStartWidth', value]],
-  borderEndWidth: value => [['borderInlineEndWidth', value]],
-  borderTopStartRadius: value => [['borderStartStartRadius', value]],
-  borderTopEndRadius: value => [['borderStartEndRadius', value]],
-  borderBottomStartRadius: value => [['borderEndStartRadius', value]],
-  borderBottomEndRadius: value => [['borderEndEndRadius', value]],
-  marginBlockStart: value => [['marginTop', value]],
-  marginBlockEnd: value => [['marginBottom', value]],
-  marginStart: value => [['marginInlineStart', value]],
-  marginEnd: value => [['marginInlineEnd', value]],
-  marginHorizontal: value => [['marginInline', value]],
-  marginVertical: value => [['marginBlock', value]],
-  paddingBlockStart: rawValue => [['paddingTop', rawValue]],
-  paddingBlockEnd: rawValue => [['paddingBottom', rawValue]],
-  paddingStart: value => [['paddingInlineStart', value]],
-  paddingEnd: value => [['paddingInlineEnd', value]],
-  paddingHorizontal: value => [['paddingInline', value]],
-  paddingVertical: value => [['paddingBlock', value]],
-  insetBlockStart: value => [['top', value]],
-  insetBlockEnd: value => [['bottom', value]],
-  start: value => [['insetInlineStart', value]],
-  end: value => [['insetInlineEnd', value]]
+  borderHorizontalWidth: value => [["borderInlineWidth", value]],
+  borderHorizontalStyle: value => [["borderInlineStyle", value]],
+  borderHorizontalColor: value => [["borderInlineColor", value]],
+  borderVerticalWidth: value => [["borderBlockWidth", value]],
+  borderVerticalStyle: value => [["borderBlockStyle", value]],
+  borderVerticalColor: value => [["borderBlockColor", value]],
+  borderBlockStartColor: value => [["borderTopColor", value]],
+  borderBlockEndColor: value => [["borderBottomColor", value]],
+  borderBlockStartStyle: value => [["borderTopStyle", value]],
+  borderBlockEndStyle: value => [["borderBottomStyle", value]],
+  borderBlockStartWidth: value => [["borderTopWidth", value]],
+  borderBlockEndWidth: value => [["borderBottomWidth", value]],
+  borderStartColor: value => [["borderInlineStartColor", value]],
+  borderEndColor: value => [["borderInlineEndColor", value]],
+  borderStartStyle: value => [["borderInlineStartStyle", value]],
+  borderEndStyle: value => [["borderInlineEndStyle", value]],
+  borderStartWidth: value => [["borderInlineStartWidth", value]],
+  borderEndWidth: value => [["borderInlineEndWidth", value]],
+  borderTopStartRadius: value => [["borderStartStartRadius", value]],
+  borderTopEndRadius: value => [["borderStartEndRadius", value]],
+  borderBottomStartRadius: value => [["borderEndStartRadius", value]],
+  borderBottomEndRadius: value => [["borderEndEndRadius", value]],
+  marginBlockStart: value => [["marginTop", value]],
+  marginBlockEnd: value => [["marginBottom", value]],
+  marginStart: value => [["marginInlineStart", value]],
+  marginEnd: value => [["marginInlineEnd", value]],
+  marginHorizontal: value => [["marginInline", value]],
+  marginVertical: value => [["marginBlock", value]],
+  paddingBlockStart: rawValue => [["paddingTop", rawValue]],
+  paddingBlockEnd: rawValue => [["paddingBottom", rawValue]],
+  paddingStart: value => [["paddingInlineStart", value]],
+  paddingEnd: value => [["paddingInlineEnd", value]],
+  paddingHorizontal: value => [["paddingInline", value]],
+  paddingVertical: value => [["paddingBlock", value]],
+  insetBlockStart: value => [["top", value]],
+  insetBlockEnd: value => [["bottom", value]],
+  start: value => [["insetInlineStart", value]],
+  end: value => [["insetInlineEnd", value]]
 };
 const expansions = {
   ...shorthands,

package/lib/preprocess-rules/property-specificity.js.flow

@@ -18,7 +18,7 @@ import type { TStyleValue } from '../common-types';
 
 type TReturn = $ReadOnlyArray<[string, TStyleValue]>;
 
-declare var shorthands: {
+declare const shorthands: {
   all: (_: TStyleValue) => TReturn,
   animation: (_value: TStyleValue) => TReturn,
   background: (_value: TStyleValue) => TReturn,
@@ -35,7 +35,7 @@ declare var shorthands: {
   padding: (rawValue: TStyleValue) => TReturn,
 };
 
-declare var aliases: {
+declare const aliases: {
   borderHorizontal: $FlowFixMe,
   borderVertical: $FlowFixMe,
   borderBlockStart: $FlowFixMe,
@@ -82,6 +82,7 @@ declare var aliases: {
   end: (value: TStyleValue) => TReturn,
 };
 
-declare var expansions: { ...shorthands, ...aliases };
-
-declare export default expansions;
+declare export default $ReadOnly<{
+  ...typeof shorthands,
+  ...typeof aliases,
+}>;

package/lib/stylex-create-vars.d.ts

@@ -8,20 +8,29 @@
  */
 
 import type { StyleXOptions } from './common-types';
-type VarsObject<Vars extends { readonly [$$Key$$: string]: string | number }> =
-  /**
-   * > 13 |   ...$ObjMapConst<Vars, string>,
-   *      |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Unsupported feature: Translating "object types with complex spreads" is currently not supported.
-   **/
-  any;
+type VarsObject<
+  Vars extends {
+    readonly [$$Key$$: string]:
+      | string
+      | { default: string; readonly [$$Key$$: string]: string };
+  },
+> = Readonly</**
+ * > 15 |   ...$ObjMapConst<Vars, string>,
+ *      |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Unsupported feature: Translating "object types with complex spreads" is currently not supported.
+ **/
+any>;
 declare function styleXCreateVars<
-  Vars extends { readonly [$$Key$$: string]: string }
+  Vars extends {
+    readonly [$$Key$$: string]:
+      | string
+      | { default: string; readonly [$$Key$$: string]: string };
+  },
 >(
   variables: Vars,
   options: Readonly<
     Omit<Partial<StyleXOptions>, keyof ({ themeName: string })> & {
       themeName: string;
     }
-  >
+  >,
 ): [VarsObject<Vars>, { css: string }];
 export default styleXCreateVars;