@stylexjs/shared 0.2.0-beta.9 → 0.3.0

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

@@ -0,0 +1,200 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+import type { TStyleValue } from '../common-types';
+/**
+ * Shorthand properties:
+ * - [x] all - Should be banned
+ * - [ ] animation
+ * - [ ] background
+ * - [-] border
+ * - [x] border-block-end
+ * - [x] border-block-start
+ * - [ ] border-bottom
+ * - [x] border-color
+ * - [x] border-image
+ * - [x] border-inline-end
+ * - [x] border-inline-start
+ * - [ ] border-left
+ * - [x] border-radius
+ * - [ ] border-right
+ * - [x] border-style
+ * - [ ] border-top
+ * - [x] border-width
+ * - [ ] column-rule
+ * - [ ] columns
+ * - [ ] flex
+ * - [ ] flex-flow
+ * - [ ] font
+ * - [ ] gap
+ * - [ ] grid
+ * - [ ] grid-area
+ * - [ ] grid-column
+ * - [ ] grid-row
+ * - [ ] grid-template
+ * - [ ] list-style
+ * - [x] margin
+ * - [ ] mask
+ * - [ ] offset
+ * - [ ] outline
+ * - [x] overflow
+ * - [x] padding
+ * - [ ] place-content
+ * - [ ] place-items
+ * - [ ] place-self
+ * - [ ] scroll-margin
+ * - [ ] scroll-padding
+ * - [ ] text-decoration
+ * - [ ] text-emphasis
+ * - [ ] transition
+ */
+
+/**
+ * Shorthand properties:
+ * - [x] all - Should be banned
+ * - [ ] animation
+ * - [ ] background
+ * - [-] border
+ * - [x] border-block-end
+ * - [x] border-block-start
+ * - [ ] border-bottom
+ * - [x] border-color
+ * - [x] border-image
+ * - [x] border-inline-end
+ * - [x] border-inline-start
+ * - [ ] border-left
+ * - [x] border-radius
+ * - [ ] border-right
+ * - [x] border-style
+ * - [ ] border-top
+ * - [x] border-width
+ * - [ ] column-rule
+ * - [ ] columns
+ * - [ ] flex
+ * - [ ] flex-flow
+ * - [ ] font
+ * - [ ] gap
+ * - [ ] grid
+ * - [ ] grid-area
+ * - [ ] grid-column
+ * - [ ] grid-row
+ * - [ ] grid-template
+ * - [ ] list-style
+ * - [x] margin
+ * - [ ] mask
+ * - [ ] offset
+ * - [ ] outline
+ * - [x] overflow
+ * - [x] padding
+ * - [ ] place-content
+ * - [ ] place-items
+ * - [ ] place-self
+ * - [ ] scroll-margin
+ * - [ ] scroll-padding
+ * - [ ] text-decoration
+ * - [ ] text-emphasis
+ * - [ ] transition
+ */
+
+type TReturn = ReadonlyArray<[string, TStyleValue]>;
+declare const shorthands: {
+  border: (rawValue: TStyleValue) => TReturn;
+  borderColor: (rawValue: TStyleValue) => TReturn;
+  borderHorizontal: (rawValue: TStyleValue) => TReturn;
+  borderStyle: (rawValue: TStyleValue) => TReturn;
+  borderVertical: (rawValue: TStyleValue) => TReturn;
+  borderWidth: (rawValue: TStyleValue) => TReturn;
+  borderHorizontalColor: (rawValue: TStyleValue) => TReturn;
+  borderHorizontalStyle: (rawValue: TStyleValue) => TReturn;
+  borderHorizontalWidth: (rawValue: TStyleValue) => TReturn;
+  borderVerticalColor: (rawValue: TStyleValue) => TReturn;
+  borderVerticalStyle: (rawValue: TStyleValue) => TReturn;
+  borderVerticalWidth: (rawValue: TStyleValue) => TReturn;
+  borderRadius: (rawValue: TStyleValue) => TReturn;
+  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: any;
+  insetInlineEnd: any;
+  blockSize: (val: TStyleValue) => TReturn;
+  inlineSize: (val: TStyleValue) => TReturn;
+  minBlockSize: (val: TStyleValue) => TReturn;
+  minInlineSize: (val: TStyleValue) => TReturn;
+  maxBlockSize: (val: TStyleValue) => TReturn;
+  maxInlineSize: (val: TStyleValue) => TReturn;
+  borderBlockWidth: any;
+  borderBlockStyle: any;
+  borderBlockColor: any;
+  borderBlockStartWidth: (val: TStyleValue) => TReturn;
+  borderBlockStartStyle: (val: TStyleValue) => TReturn;
+  borderBlockStartColor: (val: TStyleValue) => TReturn;
+  borderBlockEndWidth: (val: TStyleValue) => TReturn;
+  borderBlockEndStyle: (val: TStyleValue) => TReturn;
+  borderBlockEndColor: (val: TStyleValue) => TReturn;
+  borderInlineWidth: any;
+  borderInlineStyle: any;
+  borderInlineColor: any;
+  borderInlineStartWidth: (val: TStyleValue) => TReturn;
+  borderInlineStartStyle: (val: TStyleValue) => TReturn;
+  borderInlineStartColor: (val: TStyleValue) => TReturn;
+  borderInlineEndWidth: (val: TStyleValue) => TReturn;
+  borderInlineEndStyle: (val: TStyleValue) => TReturn;
+  borderInlineEndColor: (val: TStyleValue) => TReturn;
+  borderStartStartRadius: (val: TStyleValue) => TReturn;
+  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 ({})> & {};
+declare const $$EXPORT_DEFAULT_DECLARATION$$: typeof expansions;
+export default $$EXPORT_DEFAULT_DECLARATION$$;

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

@@ -6,147 +6,58 @@ 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 borderWidthKeywords = new Set(['thin', 'medium', 'thick']);
-const borderStyleKeywords = new Set(['none', 'hidden', 'solid', 'dashed', 'dotted', 'double', 'groove', 'ridge', 'inside',
-// Non-standard
-'inset', 'outset']);
-const globalKeywords = new Set(['initial', 'inherit', 'unset']);
-function borderDetector(borderParts) {
-  const parts = borderParts.filter(Boolean).slice();
-  let suffix = '';
-  for (let i = 0; i < parts.length; i++) {
-    const part = parts[i];
-    if (typeof part === 'string' && part.endsWith('!important')) {
-      parts[i] = part.replace('!important', '').trim();
-      suffix = ' !important';
-    }
-  }
-  if (parts.length === 1 && globalKeywords.has(parts[0])) {
-    return [parts[0], parts[0], parts[0]];
-  }
-
-  // Find the part that starts with a number
-  // This is most likely to be the borderWidth
-  let width = parts.find(part => typeof part === 'number' || part.match(/^\.?\d+/) || borderWidthKeywords.has(part));
-  if (typeof width === 'number') {
-    width = String(width) + 'px';
-  }
-  // console.log('width', width);
-  if (width != null) {
-    parts.splice(parts.indexOf(width), 1);
-  }
-  if (parts.length === 0) {
-    return [String(width) + suffix, null, null];
-  }
-  const style = parts.find(part => typeof part === 'string' && borderStyleKeywords.has(part));
-  if (style != null) {
-    parts.splice(parts.indexOf(style), 1);
-  }
-  if (parts.length === 2 && width == null) {
-    width = parts[0];
-    parts.splice(0, 1);
-  }
-  if (width != null && parts.length > 1) {
-    throw new Error('Invalid border shorthand value');
-  }
-  const color = parts[0];
-  return [width, style, color].map(part => part != null ? part + suffix : null);
-}
-const expansions = {
+const shorthands = {
   border: rawValue => {
-    if (typeof rawValue === 'number') {
-      return expansions.borderWidth(rawValue);
-    }
-    const parts = (0, _splitCssValue.default)(rawValue);
-    const [width, style, color] = borderDetector(parts);
-    return [...(width != null ? expansions.borderWidth(width) : []), ...(style != null ? expansions.borderStyle(style) : []), ...(color != null ? expansions.borderColor(color) : [])];
-  },
-  borderTop: rawValue => {
-    if (typeof rawValue === 'number') {
-      return [['borderTopWidth', rawValue]];
-    }
-    const parts = (0, _splitCssValue.default)(rawValue);
-    const [width, style, color] = borderDetector(parts);
-    return [width != null ? ['borderTopWidth', width] : null, style != null ? ['borderTopStyle', style] : null, color != null ? ['borderTopColor', color] : null].filter(Boolean);
-  },
-  borderEnd: rawValue => {
-    if (typeof rawValue === 'number') {
-      return [['borderEndWidth', rawValue]];
-    }
-    const parts = (0, _splitCssValue.default)(rawValue);
-    const [width, style, color] = borderDetector(parts);
-    return [width != null ? ['borderEndWidth', width] : null, style != null ? ['borderEndStyle', style] : null, color != null ? ['borderEndColor', color] : null].filter(Boolean);
-  },
-  borderRight: rawValue => {
-    if (typeof rawValue === 'number') {
-      return [['borderRightWidth', rawValue]];
-    }
-    const parts = (0, _splitCssValue.default)(rawValue);
-    const [width, style, color] = borderDetector(parts);
-    return [width != null ? ['borderRightWidth', width] : null, style != null ? ['borderRightStyle', style] : null, color != null ? ['borderRightColor', color] : null].filter(Boolean);
-  },
-  borderBottom: rawValue => {
-    if (typeof rawValue === 'number') {
-      return [['borderBottomWidth', rawValue]];
-    }
-    const parts = (0, _splitCssValue.default)(rawValue);
-    const [width, style, color] = borderDetector(parts);
-    return [width != null ? ['borderBottomWidth', width] : null, style != null ? ['borderBottomStyle', style] : null, color != null ? ['borderBottomColor', color] : null].filter(Boolean);
-  },
-  borderStart: rawValue => {
-    if (typeof rawValue === 'number') {
-      return [['borderStartWidth', rawValue]];
-    }
-    const parts = (0, _splitCssValue.default)(rawValue);
-    const [width, style, color] = borderDetector(parts);
-    return [width != null ? ['borderStartWidth', width] : null, style != null ? ['borderStartStyle', style] : null, color != null ? ['borderStartColor', color] : null].filter(Boolean);
-  },
-  borderLeft: rawValue => {
-    if (typeof rawValue === 'number') {
-      return [['borderLeftWidth', rawValue]];
-    }
-    const parts = (0, _splitCssValue.default)(rawValue);
-    const [width, style, color] = borderDetector(parts);
-    return [width != null ? ['borderLeftWidth', width] : null, style != null ? ['borderLeftStyle', style] : null, color != null ? ['borderLeftColor', color] : null].filter(Boolean);
+    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]];
   },
   borderHorizontal: 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]];
   },
   borderVertical: 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]];
   },
+  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]];
   },
+  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]];
+  },
   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]];
-  },
+  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]];
   },
@@ -158,12 +69,68 @@ const expansions = {
     const [top, right = top, bottom = top, left = right] = (0, _splitCssValue.default)(rawValue);
     return [['paddingTop', top], ['paddingEnd', right], ['paddingBottom', bottom], ['paddingStart', left]];
   },
-  paddingHorizontal: rawValue => {
-    return [['paddingStart', rawValue], ['paddingEnd', rawValue]];
-  },
-  paddingVertical: rawValue => {
-    return [['paddingTop', rawValue], ['paddingBottom', rawValue]];
-  }
+  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: 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]],
+  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]],
+  gridGap: shorthands.gap,
+  gridRowGap: value => [['rowGap', value]],
+  gridColumnGap: value => [['columnGap', value]],
+  marginBlock: shorthands.marginVertical,
+  marginBlockStart: val => [['marginTop', val]],
+  marginBlockEnd: val => [['marginBottom', val]],
+  marginInline: shorthands.marginHorizontal,
+  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]],
+  paddingInline: shorthands.paddingHorizontal,
+  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

@@ -0,0 +1,179 @@
+/**
+ * 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.
+ *
+ * @flow strict
+ */
+
+import type { TStyleValue } from '../common-types';
+
+// TODO: to be added later.
+// const aliases = {
+//   marginInlineStart: (rawValue) => [['marginStart', rawValue]],
+//   marginInlineEnd: (rawValue) => [['marginEnd', rawValue]],
+//   marginInline: (rawValue) => [
+//     ['marginStart', rawValue],
+//     ['marginEnd', rawValue],
+//   ],
+//   paddingInlineStart: (rawValue) => [['paddingStart', rawValue]],
+//   paddingInlineEnd: (rawValue) => [['paddingEnd', rawValue]],
+//   paddingInline: (rawValue) => [
+//     ['paddingStart', rawValue],
+//     ['paddingEnd', rawValue],
+//   ],
+//   // 'borderInlineStart': (rawValue) => [['borderStart', rawValue]],
+//   // 'borderInlineEnd': (rawValue) => [['borderEnd', rawValue]],
+//   // // This will need to change.
+//   // 'borderInline': (rawValue) => [
+//   //   ['borderStart', rawValue],
+//   //   ['borderEnd', rawValue],
+//   // ],
+// };
+
+/**
+ * Shorthand properties:
+ * - [x] all - Should be banned
+ * - [ ] animation
+ * - [ ] background
+ * - [-] border
+ * - [x] border-block-end
+ * - [x] border-block-start
+ * - [ ] border-bottom
+ * - [x] border-color
+ * - [x] border-image
+ * - [x] border-inline-end
+ * - [x] border-inline-start
+ * - [ ] border-left
+ * - [x] border-radius
+ * - [ ] border-right
+ * - [x] border-style
+ * - [ ] border-top
+ * - [x] border-width
+ * - [ ] column-rule
+ * - [ ] columns
+ * - [ ] flex
+ * - [ ] flex-flow
+ * - [ ] font
+ * - [ ] gap
+ * - [ ] grid
+ * - [ ] grid-area
+ * - [ ] grid-column
+ * - [ ] grid-row
+ * - [ ] grid-template
+ * - [ ] list-style
+ * - [x] margin
+ * - [ ] mask
+ * - [ ] offset
+ * - [ ] outline
+ * - [x] overflow
+ * - [x] padding
+ * - [ ] place-content
+ * - [ ] place-items
+ * - [ ] place-self
+ * - [ ] scroll-margin
+ * - [ ] scroll-padding
+ * - [ ] text-decoration
+ * - [ ] text-emphasis
+ * - [ ] transition
+ */
+
+type TReturn = $ReadOnlyArray<[string, TStyleValue]>;
+
+declare const shorthands: {
+  border: (rawValue: TStyleValue) => TReturn,
+  borderColor: (rawValue: TStyleValue) => TReturn,
+  borderHorizontal: (rawValue: TStyleValue) => TReturn,
+  borderStyle: (rawValue: TStyleValue) => TReturn,
+  borderVertical: (rawValue: TStyleValue) => TReturn,
+  borderWidth: (rawValue: TStyleValue) => TReturn,
+  borderHorizontalColor: (rawValue: TStyleValue) => TReturn,
+  borderHorizontalStyle: (rawValue: TStyleValue) => TReturn,
+  borderHorizontalWidth: (rawValue: TStyleValue) => TReturn,
+  borderVerticalColor: (rawValue: TStyleValue) => TReturn,
+  borderVerticalStyle: (rawValue: TStyleValue) => TReturn,
+  borderVerticalWidth: (rawValue: TStyleValue) => TReturn,
+  borderRadius: (rawValue: TStyleValue) => TReturn,
+  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: $FlowFixMe,
+  insetInlineEnd: $FlowFixMe,
+  blockSize: (val: TStyleValue) => TReturn,
+  inlineSize: (val: TStyleValue) => TReturn,
+  minBlockSize: (val: TStyleValue) => TReturn,
+  minInlineSize: (val: TStyleValue) => TReturn,
+  maxBlockSize: (val: TStyleValue) => TReturn,
+  maxInlineSize: (val: TStyleValue) => TReturn,
+  borderBlockWidth: $FlowFixMe,
+  borderBlockStyle: $FlowFixMe,
+  borderBlockColor: $FlowFixMe,
+  borderBlockStartWidth: (val: TStyleValue) => TReturn,
+  borderBlockStartStyle: (val: TStyleValue) => TReturn,
+  borderBlockStartColor: (val: TStyleValue) => TReturn,
+  borderBlockEndWidth: (val: TStyleValue) => TReturn,
+  borderBlockEndStyle: (val: TStyleValue) => TReturn,
+  borderBlockEndColor: (val: TStyleValue) => TReturn,
+  borderInlineWidth: $FlowFixMe,
+  borderInlineStyle: $FlowFixMe,
+  borderInlineColor: $FlowFixMe,
+  borderInlineStartWidth: (val: TStyleValue) => TReturn,
+  borderInlineStartStyle: (val: TStyleValue) => TReturn,
+  borderInlineStartColor: (val: TStyleValue) => TReturn,
+  borderInlineEndWidth: (val: TStyleValue) => TReturn,
+  borderInlineEndStyle: (val: TStyleValue) => TReturn,
+  borderInlineEndColor: (val: TStyleValue) => TReturn,
+  borderStartStartRadius: (val: TStyleValue) => TReturn,
+  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 };
+
+declare export default typeof expansions;