@stylexjs/shared 0.2.0-beta.21 → 0.2.0-beta.22

package/lib/preprocess-rules/index.js

@@ -10,19 +10,19 @@ var _legacyExpandShorthands = _interopRequireDefault(require("./legacy-expand-sh
 var _propertySpecificity = _interopRequireDefault(require("./property-specificity"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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/legacy-expand-shorthands.d.ts

@@ -120,19 +120,32 @@ declare const shorthands: {
   inset: (rawValue: TStyleValue) => TReturn;
   insetInline: (rawValue: TStyleValue) => TReturn;
   insetBlock: (rawValue: TStyleValue) => TReturn;
+  start: (rawValue: TStyleValue) => TReturn;
+  end: (rawValue: TStyleValue) => TReturn;
+  left: (rawValue: TStyleValue) => TReturn;
+  right: (rawValue: TStyleValue) => TReturn;
+  gap: (rawValue: TStyleValue) => TReturn;
   margin: (rawValue: TStyleValue) => TReturn;
   marginHorizontal: (rawValue: TStyleValue) => TReturn;
+  marginStart: (rawValue: TStyleValue) => TReturn;
+  marginEnd: (rawValue: TStyleValue) => TReturn;
+  marginLeft: (rawValue: TStyleValue) => TReturn;
+  marginRight: (rawValue: TStyleValue) => TReturn;
   marginVertical: (rawValue: TStyleValue) => TReturn;
   overflow: (rawValue: TStyleValue) => TReturn;
   padding: (rawValue: TStyleValue) => TReturn;
   paddingHorizontal: (val: TStyleValue) => TReturn;
+  paddingStart: (val: TStyleValue) => TReturn;
+  paddingEnd: (val: TStyleValue) => TReturn;
+  paddingLeft: (val: TStyleValue) => TReturn;
+  paddingRight: (val: TStyleValue) => TReturn;
   paddingVertical: (val: TStyleValue) => TReturn;
 };
 declare const aliases: {
   insetBlockStart: (val: TStyleValue) => TReturn;
   insetBlockEnd: (val: TStyleValue) => TReturn;
-  insetInlineStart: (val: TStyleValue) => TReturn;
-  insetInlineEnd: (val: TStyleValue) => TReturn;
+  insetInlineStart: any;
+  insetInlineEnd: any;
   blockSize: (val: TStyleValue) => TReturn;
   inlineSize: (val: TStyleValue) => TReturn;
   minBlockSize: (val: TStyleValue) => TReturn;
@@ -161,18 +174,25 @@ declare const aliases: {
   borderStartEndRadius: (val: TStyleValue) => TReturn;
   borderEndStartRadius: (val: TStyleValue) => TReturn;
   borderEndEndRadius: (val: TStyleValue) => TReturn;
+  gridGap: any;
+  gridRowGap: (value: TStyleValue) => TReturn;
+  gridColumnGap: (value: TStyleValue) => TReturn;
   marginBlock: any;
   marginBlockStart: (val: TStyleValue) => TReturn;
   marginBlockEnd: (val: TStyleValue) => TReturn;
   marginInline: any;
   marginInlineStart: (val: TStyleValue) => TReturn;
   marginInlineEnd: (val: TStyleValue) => TReturn;
+  overflowBlock: (value: TStyleValue) => TReturn;
+  overflowInline: (value: TStyleValue) => TReturn;
   paddingBlock: any;
   paddingBlockStart: (val: TStyleValue) => TReturn;
   paddingBlockEnd: (val: TStyleValue) => TReturn;
   paddingInline: any;
   paddingInlineStart: (val: TStyleValue) => TReturn;
   paddingInlineEnd: (val: TStyleValue) => TReturn;
+  scrollMarginBlockStart: (value: TStyleValue) => TReturn;
+  scrollMarginBlockEnd: (value: TStyleValue) => TReturn;
 };
 declare const expansions: Omit<shorthands, keyof (aliases | {})> &
   Omit<aliases, keyof ({})> & {};

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

@@ -8,113 +8,129 @@ var _splitCssValue = _interopRequireDefault(require("../utils/split-css-value"))
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const shorthands = {
   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 [['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 [['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]];
   },
-  borderHorizontalColor: rawValue => [["borderStartColor", rawValue], ["borderEndColor", rawValue]],
-  borderHorizontalStyle: rawValue => [["borderStartStyle", rawValue], ["borderEndStyle", rawValue]],
-  borderHorizontalWidth: rawValue => [["borderStartWidth", rawValue], ["borderEndWidth", rawValue]],
-  borderVerticalColor: rawValue => [["borderTopColor", rawValue], ["borderBottomColor", rawValue]],
-  borderVerticalStyle: rawValue => [["borderTopStyle", rawValue], ["borderBottomStyle", rawValue]],
-  borderVerticalWidth: rawValue => [["borderTopWidth", rawValue], ["borderBottomWidth", rawValue]],
+  borderHorizontalColor: rawValue => [['borderStartColor', rawValue], ['borderEndColor', rawValue]],
+  borderHorizontalStyle: rawValue => [['borderStartStyle', rawValue], ['borderEndStyle', rawValue]],
+  borderHorizontalWidth: rawValue => [['borderStartWidth', rawValue], ['borderEndWidth', rawValue]],
+  borderVerticalColor: rawValue => [['borderTopColor', rawValue], ['borderBottomColor', rawValue]],
+  borderVerticalStyle: rawValue => [['borderTopStyle', rawValue], ['borderBottomStyle', rawValue]],
+  borderVerticalWidth: rawValue => [['borderTopWidth', rawValue], ['borderBottomWidth', rawValue]],
   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]];
+  },
+  inset: rawValue => [['top', rawValue], ['end', rawValue], ['bottom', rawValue], ['start', rawValue]],
+  insetInline: rawValue => [...shorthands.start(rawValue), ...shorthands.end(rawValue)],
+  insetBlock: rawValue => [['top', rawValue], ['bottom', rawValue]],
+  start: rawValue => [['start', rawValue], ['left', null], ['right', null]],
+  end: rawValue => [['end', rawValue], ['left', null], ['right', null]],
+  left: rawValue => [['left', rawValue], ['start', null], ['end', null]],
+  right: rawValue => [['right', rawValue], ['start', null], ['end', null]],
+  gap: rawValue => {
+    const [row, column = row] = (0, _splitCssValue.default)(rawValue);
+    return [['rowGap', row], ['columnGap', column]];
   },
-  inset: rawValue => [["top", rawValue], ["end", rawValue], ["bottom", rawValue], ["start", rawValue]],
-  insetInline: rawValue => [["start", rawValue], ["end", rawValue]],
-  insetBlock: rawValue => [["top", rawValue], ["bottom", rawValue]],
   margin: rawValue => {
     const [top, right = top, bottom = top, left = right] = (0, _splitCssValue.default)(rawValue);
-    return [["marginTop", top], ["marginEnd", right], ["marginBottom", bottom], ["marginStart", left]];
-  },
-  marginHorizontal: rawValue => {
-    return [["marginStart", rawValue], ["marginEnd", rawValue]];
+    return [['marginTop', top], ['marginEnd', right], ['marginBottom', bottom], ['marginStart', left]];
   },
+  marginHorizontal: rawValue => [...shorthands.marginStart(rawValue), ...shorthands.marginEnd(rawValue)],
+  marginStart: rawValue => [['marginStart', rawValue], ['marginLeft', null], ['marginRight', null]],
+  marginEnd: rawValue => [['marginEnd', rawValue], ['marginLeft', null], ['marginRight', null]],
+  marginLeft: rawValue => [['marginLeft', rawValue], ['marginStart', null], ['marginEnd', null]],
+  marginRight: rawValue => [['marginRight', rawValue], ['marginStart', null], ['marginEnd', null]],
   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]];
-  },
-  paddingHorizontal: val => {
-    return [["paddingStart", val], ["paddingEnd", val]];
+    return [['paddingTop', top], ['paddingEnd', right], ['paddingBottom', bottom], ['paddingStart', left]];
   },
-  paddingVertical: val => {
-    return [["paddingTop", val], ["paddingBottom", val]];
-  }
+  paddingHorizontal: val => [...shorthands.paddingStart(val), ...shorthands.paddingEnd(val)],
+  paddingStart: val => [['paddingStart', val], ['paddingLeft', null], ['paddingRight', null]],
+  paddingEnd: val => [['paddingEnd', val], ['paddingLeft', null], ['paddingRight', null]],
+  paddingLeft: val => [['paddingLeft', val], ['paddingStart', null], ['paddingEnd', null]],
+  paddingRight: val => [['paddingRight', val], ['paddingStart', null], ['paddingEnd', null]],
+  paddingVertical: val => [['paddingTop', val], ['paddingBottom', val]]
 };
 const aliases = {
-  insetBlockStart: val => [["top", val]],
-  insetBlockEnd: val => [["bottom", val]],
-  insetInlineStart: val => [["start", val]],
-  insetInlineEnd: val => [["end", val]],
-  blockSize: val => [["height", val]],
-  inlineSize: val => [["width", val]],
-  minBlockSize: val => [["minHeight", val]],
-  minInlineSize: val => [["minWidth", val]],
-  maxBlockSize: val => [["maxHeight", val]],
-  maxInlineSize: val => [["maxWidth", val]],
+  insetBlockStart: val => [['top', val]],
+  insetBlockEnd: val => [['bottom', val]],
+  insetInlineStart: shorthands.start,
+  insetInlineEnd: shorthands.end,
+  blockSize: val => [['height', val]],
+  inlineSize: val => [['width', val]],
+  minBlockSize: val => [['minHeight', val]],
+  minInlineSize: val => [['minWidth', val]],
+  maxBlockSize: val => [['maxHeight', val]],
+  maxInlineSize: val => [['maxWidth', val]],
   borderBlockWidth: shorthands.borderVerticalWidth,
   borderBlockStyle: shorthands.borderVerticalStyle,
   borderBlockColor: shorthands.borderVerticalColor,
-  borderBlockStartWidth: val => [["borderTopWidth", val]],
-  borderBlockStartStyle: val => [["borderTopStyle", val]],
-  borderBlockStartColor: val => [["borderTopColor", val]],
-  borderBlockEndWidth: val => [["borderBottomWidth", val]],
-  borderBlockEndStyle: val => [["borderBottomStyle", val]],
-  borderBlockEndColor: val => [["borderBottomColor", val]],
+  borderBlockStartWidth: val => [['borderTopWidth', val]],
+  borderBlockStartStyle: val => [['borderTopStyle', val]],
+  borderBlockStartColor: val => [['borderTopColor', val]],
+  borderBlockEndWidth: val => [['borderBottomWidth', val]],
+  borderBlockEndStyle: val => [['borderBottomStyle', val]],
+  borderBlockEndColor: val => [['borderBottomColor', val]],
   borderInlineWidth: shorthands.borderHorizontalWidth,
   borderInlineStyle: shorthands.borderHorizontalStyle,
   borderInlineColor: shorthands.borderHorizontalColor,
-  borderInlineStartWidth: val => [["borderStartWidth", val]],
-  borderInlineStartStyle: val => [["borderStartStyle", val]],
-  borderInlineStartColor: val => [["borderStartColor", val]],
-  borderInlineEndWidth: val => [["borderEndWidth", val]],
-  borderInlineEndStyle: val => [["borderEndStyle", val]],
-  borderInlineEndColor: val => [["borderEndColor", val]],
-  borderStartStartRadius: val => [["borderTopStartRadius", val]],
-  borderStartEndRadius: val => [["borderTopEndRadius", val]],
-  borderEndStartRadius: val => [["borderBottomStartRadius", val]],
-  borderEndEndRadius: val => [["borderBottomEndRadius", val]],
+  borderInlineStartWidth: val => [['borderStartWidth', val]],
+  borderInlineStartStyle: val => [['borderStartStyle', val]],
+  borderInlineStartColor: val => [['borderStartColor', val]],
+  borderInlineEndWidth: val => [['borderEndWidth', val]],
+  borderInlineEndStyle: val => [['borderEndStyle', val]],
+  borderInlineEndColor: val => [['borderEndColor', val]],
+  borderStartStartRadius: val => [['borderTopStartRadius', val]],
+  borderStartEndRadius: val => [['borderTopEndRadius', val]],
+  borderEndStartRadius: val => [['borderBottomStartRadius', val]],
+  borderEndEndRadius: val => [['borderBottomEndRadius', val]],
+  gridGap: shorthands.gap,
+  gridRowGap: value => [['rowGap', value]],
+  gridColumnGap: value => [['columnGap', value]],
   marginBlock: shorthands.marginVertical,
-  marginBlockStart: val => [["marginTop", val]],
-  marginBlockEnd: val => [["marginBottom", val]],
+  marginBlockStart: val => [['marginTop', val]],
+  marginBlockEnd: val => [['marginBottom', val]],
   marginInline: shorthands.marginHorizontal,
-  marginInlineStart: val => [["marginStart", val]],
-  marginInlineEnd: val => [["marginEnd", val]],
+  marginInlineStart: val => [['marginStart', val]],
+  marginInlineEnd: val => [['marginEnd', val]],
+  overflowBlock: value => [['overflowY', value]],
+  overflowInline: value => [['overflowX', value]],
   paddingBlock: shorthands.paddingVertical,
-  paddingBlockStart: val => [["paddingTop", val]],
-  paddingBlockEnd: val => [["paddingBottom", val]],
+  paddingBlockStart: val => [['paddingTop', val]],
+  paddingBlockEnd: val => [['paddingBottom', val]],
   paddingInline: shorthands.paddingHorizontal,
-  paddingInlineStart: val => [["paddingStart", val]],
-  paddingInlineEnd: val => [["paddingEnd", val]]
+  paddingInlineStart: val => [['paddingStart', val]],
+  paddingInlineEnd: val => [['paddingEnd', val]],
+  scrollMarginBlockStart: value => [['scrollMarginTop', value]],
+  scrollMarginBlockEnd: value => [['scrollMarginBottom', value]]
 };
 const expansions = {
   ...shorthands,
   ...aliases
 };
-var _default = expansions;
-exports.default = _default;
+var _default = exports.default = expansions;

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

@@ -98,20 +98,33 @@ declare const shorthands: {
   inset: (rawValue: TStyleValue) => TReturn,
   insetInline: (rawValue: TStyleValue) => TReturn,
   insetBlock: (rawValue: TStyleValue) => TReturn,
+  start: (rawValue: TStyleValue) => TReturn,
+  end: (rawValue: TStyleValue) => TReturn,
+  left: (rawValue: TStyleValue) => TReturn,
+  right: (rawValue: TStyleValue) => TReturn,
+  gap: (rawValue: TStyleValue) => TReturn,
   margin: (rawValue: TStyleValue) => TReturn,
   marginHorizontal: (rawValue: TStyleValue) => TReturn,
+  marginStart: (rawValue: TStyleValue) => TReturn,
+  marginEnd: (rawValue: TStyleValue) => TReturn,
+  marginLeft: (rawValue: TStyleValue) => TReturn,
+  marginRight: (rawValue: TStyleValue) => TReturn,
   marginVertical: (rawValue: TStyleValue) => TReturn,
   overflow: (rawValue: TStyleValue) => TReturn,
   padding: (rawValue: TStyleValue) => TReturn,
   paddingHorizontal: (val: TStyleValue) => TReturn,
+  paddingStart: (val: TStyleValue) => TReturn,
+  paddingEnd: (val: TStyleValue) => TReturn,
+  paddingLeft: (val: TStyleValue) => TReturn,
+  paddingRight: (val: TStyleValue) => TReturn,
   paddingVertical: (val: TStyleValue) => TReturn,
 };
 
 declare const aliases: {
   insetBlockStart: (val: TStyleValue) => TReturn,
   insetBlockEnd: (val: TStyleValue) => TReturn,
-  insetInlineStart: (val: TStyleValue) => TReturn,
-  insetInlineEnd: (val: TStyleValue) => TReturn,
+  insetInlineStart: $FlowFixMe,
+  insetInlineEnd: $FlowFixMe,
   blockSize: (val: TStyleValue) => TReturn,
   inlineSize: (val: TStyleValue) => TReturn,
   minBlockSize: (val: TStyleValue) => TReturn,
@@ -140,18 +153,25 @@ declare const aliases: {
   borderStartEndRadius: (val: TStyleValue) => TReturn,
   borderEndStartRadius: (val: TStyleValue) => TReturn,
   borderEndEndRadius: (val: TStyleValue) => TReturn,
+  gridGap: $FlowFixMe,
+  gridRowGap: (value: TStyleValue) => TReturn,
+  gridColumnGap: (value: TStyleValue) => TReturn,
   marginBlock: $FlowFixMe,
   marginBlockStart: (val: TStyleValue) => TReturn,
   marginBlockEnd: (val: TStyleValue) => TReturn,
   marginInline: $FlowFixMe,
   marginInlineStart: (val: TStyleValue) => TReturn,
   marginInlineEnd: (val: TStyleValue) => TReturn,
+  overflowBlock: (value: TStyleValue) => TReturn,
+  overflowInline: (value: TStyleValue) => TReturn,
   paddingBlock: $FlowFixMe,
   paddingBlockStart: (val: TStyleValue) => TReturn,
   paddingBlockEnd: (val: TStyleValue) => TReturn,
   paddingInline: $FlowFixMe,
   paddingInlineStart: (val: TStyleValue) => TReturn,
   paddingInlineEnd: (val: TStyleValue) => TReturn,
+  scrollMarginBlockStart: (value: TStyleValue) => TReturn,
+  scrollMarginBlockEnd: (value: TStyleValue) => TReturn,
 };
 
 declare const expansions: { ...shorthands, ...aliases };

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

@@ -22,8 +22,6 @@ declare const shorthands: {
   borderBottom: (_rawValue: TStyleValue) => TReturn;
   borderInlineStart: (_rawValue: TStyleValue) => TReturn;
   borderLeft: (_rawValue: TStyleValue) => TReturn;
-  margin: (value: TStyleValue) => TReturn;
-  padding: (rawValue: TStyleValue) => TReturn;
 };
 declare const aliases: {
   borderHorizontal: any;
@@ -38,47 +36,53 @@ declare const aliases: {
   minInlineSize: (val: TStyleValue) => TReturn;
   maxBlockSize: (val: TStyleValue) => TReturn;
   maxInlineSize: (val: TStyleValue) => TReturn;
-  borderHorizontalWidth: (value: TStyleValue) => TReturn;
-  borderHorizontalStyle: (value: TStyleValue) => TReturn;
-  borderHorizontalColor: (value: TStyleValue) => TReturn;
-  borderVerticalWidth: (value: TStyleValue) => TReturn;
-  borderVerticalStyle: (value: TStyleValue) => TReturn;
-  borderVerticalColor: (value: TStyleValue) => TReturn;
+  borderHorizontalWidth: (val: TStyleValue) => TReturn;
+  borderHorizontalStyle: (val: TStyleValue) => TReturn;
+  borderHorizontalColor: (val: TStyleValue) => TReturn;
+  borderVerticalWidth: (val: TStyleValue) => TReturn;
+  borderVerticalStyle: (val: TStyleValue) => TReturn;
+  borderVerticalColor: (val: TStyleValue) => TReturn;
   borderBlockStartColor: (value: TStyleValue) => TReturn;
   borderBlockEndColor: (value: TStyleValue) => TReturn;
   borderBlockStartStyle: (value: TStyleValue) => TReturn;
   borderBlockEndStyle: (value: TStyleValue) => TReturn;
   borderBlockStartWidth: (value: TStyleValue) => TReturn;
   borderBlockEndWidth: (value: TStyleValue) => TReturn;
-  borderStartColor: (value: TStyleValue) => TReturn;
-  borderEndColor: (value: TStyleValue) => TReturn;
-  borderStartStyle: (value: TStyleValue) => TReturn;
-  borderEndStyle: (value: TStyleValue) => TReturn;
-  borderStartWidth: (value: TStyleValue) => TReturn;
-  borderEndWidth: (value: TStyleValue) => TReturn;
+  borderStartColor: (val: TStyleValue) => TReturn;
+  borderEndColor: (val: TStyleValue) => TReturn;
+  borderStartStyle: (val: TStyleValue) => TReturn;
+  borderEndStyle: (val: TStyleValue) => TReturn;
+  borderStartWidth: (val: TStyleValue) => TReturn;
+  borderEndWidth: (val: TStyleValue) => TReturn;
   borderTopStartRadius: (value: TStyleValue) => TReturn;
   borderTopEndRadius: (value: TStyleValue) => TReturn;
   borderBottomStartRadius: (value: TStyleValue) => TReturn;
   borderBottomEndRadius: (value: TStyleValue) => TReturn;
+  containIntrinsicBlockSize: (value: TStyleValue) => TReturn;
+  containIntrinsicInlineSize: (value: TStyleValue) => TReturn;
   marginBlockStart: (value: TStyleValue) => TReturn;
   marginBlockEnd: (value: TStyleValue) => TReturn;
-  marginStart: (value: TStyleValue) => TReturn;
-  marginEnd: (value: TStyleValue) => TReturn;
-  marginHorizontal: (value: TStyleValue) => TReturn;
-  marginVertical: (value: TStyleValue) => TReturn;
+  marginStart: (val: TStyleValue) => TReturn;
+  marginEnd: (val: TStyleValue) => TReturn;
+  marginHorizontal: (val: TStyleValue) => TReturn;
+  marginVertical: (val: TStyleValue) => TReturn;
+  overflowBlock: (value: TStyleValue) => TReturn;
+  overflowInline: (value: TStyleValue) => TReturn;
   paddingBlockStart: (rawValue: TStyleValue) => TReturn;
   paddingBlockEnd: (rawValue: TStyleValue) => TReturn;
-  paddingStart: (value: TStyleValue) => TReturn;
-  paddingEnd: (value: TStyleValue) => TReturn;
-  paddingHorizontal: (value: TStyleValue) => TReturn;
-  paddingVertical: (value: TStyleValue) => TReturn;
+  paddingStart: (val: TStyleValue) => TReturn;
+  paddingEnd: (val: TStyleValue) => TReturn;
+  paddingHorizontal: (val: TStyleValue) => TReturn;
+  paddingVertical: (val: TStyleValue) => TReturn;
+  scrollMarginBlockStart: (value: TStyleValue) => TReturn;
+  scrollMarginBlockEnd: (value: TStyleValue) => TReturn;
   insetBlockStart: (value: TStyleValue) => TReturn;
   insetBlockEnd: (value: TStyleValue) => TReturn;
-  start: (value: TStyleValue) => TReturn;
-  end: (value: TStyleValue) => TReturn;
+  start: (val: TStyleValue) => TReturn;
+  end: (val: TStyleValue) => TReturn;
 };
 declare const $$EXPORT_DEFAULT_DECLARATION$$: Readonly</**
- * > 92 |   ...typeof shorthands,
+ * > 96 |   ...typeof shorthands,
  *      |   ^^^^^^^^^^^^^^^^^^^^ Unsupported feature: Translating "object types with complex spreads" is currently not supported.
  **/
 any>;

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

@@ -4,59 +4,42 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _splitCssValue = _interopRequireDefault(require("../utils/split-css-value"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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.');
   },
   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.');
   },
   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.');
   },
   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.');
   },
   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.');
   },
   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.');
   },
   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.');
   },
   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(" "));
-  },
-  margin: value => {
-    const values = (0, _splitCssValue.default)(value);
-    if (values.length === 1) {
-      return [["margin", values[0]]];
-    } else {
-      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]]];
-    }
-    throw new Error("padding shorthand with multiple values is not supported. Use paddingTop, paddingInlineEnd, paddingBottom and paddingInlineStart instead.");
+    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(' '));
   }
 };
 const aliases = {
@@ -66,54 +49,59 @@ const aliases = {
   borderEnd: shorthands.borderInlineEnd,
   borderBlockEnd: shorthands.borderBottom,
   borderStart: shorthands.borderInlineStart,
-  blockSize: val => [["height", val]],
-  inlineSize: val => [["width", val]],
-  minBlockSize: val => [["minHeight", val]],
-  minInlineSize: val => [["minWidth", val]],
-  maxBlockSize: val => [["maxHeight", val]],
-  maxInlineSize: val => [["maxWidth", val]],
-  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]]
+  blockSize: val => [['height', val]],
+  inlineSize: val => [['width', val]],
+  minBlockSize: val => [['minHeight', val]],
+  minInlineSize: val => [['minWidth', val]],
+  maxBlockSize: val => [['maxHeight', val]],
+  maxInlineSize: val => [['maxWidth', val]],
+  borderHorizontalWidth: val => [['borderInlineWidth', val]],
+  borderHorizontalStyle: val => [['borderInlineStyle', val]],
+  borderHorizontalColor: val => [['borderInlineColor', val]],
+  borderVerticalWidth: val => [['borderBlockWidth', val]],
+  borderVerticalStyle: val => [['borderBlockStyle', val]],
+  borderVerticalColor: val => [['borderBlockColor', val]],
+  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: val => [['borderInlineStartColor', val]],
+  borderEndColor: val => [['borderInlineEndColor', val]],
+  borderStartStyle: val => [['borderInlineStartStyle', val]],
+  borderEndStyle: val => [['borderInlineEndStyle', val]],
+  borderStartWidth: val => [['borderInlineStartWidth', val]],
+  borderEndWidth: val => [['borderInlineEndWidth', val]],
+  borderTopStartRadius: value => [['borderStartStartRadius', value]],
+  borderTopEndRadius: value => [['borderStartEndRadius', value]],
+  borderBottomStartRadius: value => [['borderEndStartRadius', value]],
+  borderBottomEndRadius: value => [['borderEndEndRadius', value]],
+  containIntrinsicBlockSize: value => [['containIntrinsicHeight', value]],
+  containIntrinsicInlineSize: value => [['containIntrinsicWidth', value]],
+  marginBlockStart: value => [['marginTop', value]],
+  marginBlockEnd: value => [['marginBottom', value]],
+  marginStart: val => [['marginInlineStart', val]],
+  marginEnd: val => [['marginInlineEnd', val]],
+  marginHorizontal: val => [['marginInline', val]],
+  marginVertical: val => [['marginBlock', val]],
+  overflowBlock: value => [['overflowY', value]],
+  overflowInline: value => [['overflowX', value]],
+  paddingBlockStart: rawValue => [['paddingTop', rawValue]],
+  paddingBlockEnd: rawValue => [['paddingBottom', rawValue]],
+  paddingStart: val => [['paddingInlineStart', val]],
+  paddingEnd: val => [['paddingInlineEnd', val]],
+  paddingHorizontal: val => [['paddingInline', val]],
+  paddingVertical: val => [['paddingBlock', val]],
+  scrollMarginBlockStart: value => [['scrollMarginTop', value]],
+  scrollMarginBlockEnd: value => [['scrollMarginBottom', value]],
+  insetBlockStart: value => [['top', value]],
+  insetBlockEnd: value => [['bottom', value]],
+  start: val => [['insetInlineStart', val]],
+  end: val => [['insetInlineEnd', val]]
 };
 const expansions = {
   ...shorthands,
   ...aliases
 };
-var _default = expansions;
-exports.default = _default;
+var _default = exports.default = expansions;