@stylexjs/shared 0.2.0-beta.8 → 0.2.0-beta.9

package/lib/expand-shorthands.js

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.BANNED_PROPERTIES = void 0;
 exports.default = flatMapExpandedShorthands;
 exports.expandedKeys = void 0;
 var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));
@@ -42,337 +41,281 @@ function splitValue(str) {
   return nodes;
 }
 
-// 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:
- * - [!] all - BANNED
- * - [!] animation - BANNED
- * - [!] background - BANNED
- * - [x] border - Expanded to border-{direction}. Not to border-*-(width|style|color).
- *                This is to limit the number of atoms to 4 instead of 12.
- * - [o] border-top - Only the shorthand is allowed.
- * - [o] border-end - Only the shorthand is allowed.
- * - [o] border-bottom - Only the shorthand is allowed.
- * - [o] border-start - Only the shorthand is allowed.
- * - [!] border-left - BANNED
- * - [!] border-right
- * - [!] border-*-width - BANNED
- * - [!] border-*-style - BANNED
- * - [!] border-*-color - BANNED
- * - [ ] border-block-end
- * - [ ] border-block-start
- * - [ ] border-inline-start
- * - [ ] border-inline-end
- * - [!] border-image - BANNED
+ * - [x] all - Should be banned
+ * - [x] animation
+ * - [x] background
+ * - [x] border
+ * - [x] border-block-end
+ * - [x] border-block-start
+ * - [x] border-bottom
+ * - [x] border-color
+ * - [x] border-image
+ * - [x] border-inline-end
+ * - [x] border-inline-start
+ * - [x] border-left
  * - [x] border-radius
- * - [o] column-rule - Only the shorthand is allowed.
- * - [!] columns - BANNED
- * - [!] flex - BANNED
- * - [!] flex-flow - BANNED
- * - [!] font - BANNED
+ * - [x] border-right
+ * - [x] border-style
+ * - [x] border-top
+ * - [x] border-width
+ * - [x] column-rule
+ * - [x] columns
+ * - [x] container
+ * - [x] flex
+ * - [x] flex-flow
+ * - [x] font
  * - [x] gap
- * - [!] grid - BANNED
- * - [!] grid-area - BANNED
- * - [!] grid-column - BANNED
- * - [!] grid-row - BANNED
- * - [!] grid-template - BANNED
- * - [!] grid-template-areas - BANNED
- *
- * - [o] list-style - Only the shorthand is allowed.
+ * - [x] grid
+ * - [x] grid-area
+ * - [x] grid-column
+ * - [x] grid-row
+ * - [x] grid-template
+ * - [x] inset
+ * - [x] inset-block
+ * - [x] inset-inline
+ * - [x] list-style
  * - [x] margin
- * - [o] mask - Only the shorthand is allowed.
- * - [o] offset - Only the shorthand is allowed.
- * - [o] outline - Only the shorthand is allowed.
+ * - [x] mask
+ * - [x] offset
+ * - [x] outline
  * - [x] overflow
  * - [x] padding
  * - [x] place-content
  * - [x] place-items
  * - [x] place-self
- * - [X] scroll-margin
+ * - [x] scroll-margin
  * - [x] scroll-padding
- * - [o] text-decoration - Only the shorthand is allowed.
- * - [o] text-emphasis - Only the shorthand is allowed.
- * - [!] transition - BANNED
+ * - [x] text-decoration
+ * - [x] text-emphasis
+ * - [x] transition
  */
 
-const BANNED_PROPERTIES = {
-  all: '`all` is not supported. Use individual properties instead.',
-  animation: '`animation` is not supported. Use individual properties like `animationName`, `animationDuration`, etc. instead.',
-  background: '`background` is not supported. Use individual properties like `backgroundImage`, `backgroundPosition`, etc. instead.',
-  borderColor: '`borderColor` is not supported. Use `border`, `borderTop`, `borderEnd`, `borderBottom` or `borderStart` instead.',
-  borderStyle: '`borderStyle` is not supported. Use `border`, `borderTop`, `borderEnd`, `borderBottom` or `borderStart` instead.',
-  borderWidth: '`borderWidth` is not supported. Use `border`, `borderTop`, `borderEnd`, `borderBottom` or `borderStart` instead.',
-  borderTopColor: '`borderTopColor` is not supported. Use `borderTop` instead.',
-  borderTopStyle: '`borderTopStyle` is not supported. Use `borderTop` instead.',
-  borderTopWidth: '`borderTopWidth` is not supported. Use `borderTop` instead.',
-  borderEndColor: '`borderEndColor` is not supported. Use `borderEnd` instead.',
-  borderEndStyle: '`borderEndStyle` is not supported. Use `borderEnd` instead.',
-  borderEndWidth: '`borderEndWidth` is not supported. Use `borderEnd` instead.',
-  borderBottomColor: '`borderBottomColor` is not supported. Use `borderBottom` instead.',
-  borderBottomStyle: '`borderBottomStyle` is not supported. Use `borderBottom` instead.',
-  borderBottomWidth: '`borderBottomWidth` is not supported. Use `borderBottom` instead.',
-  borderStartColor: '`borderStartColor` is not supported. Use `borderStart` instead.',
-  borderStartStyle: '`borderStartStyle` is not supported. Use `borderStart` instead.',
-  borderStartWidth: '`borderStartWidth` is not supported. Use `borderStart` instead.',
-  borderBlockStartColor: '`borderBlockStartColor` is not supported. Use `borderTop` instead.',
-  borderBlockStartStyle: '`borderBlockStartStyle` is not supported. Use `borderTop` instead.',
-  borderBlockStartWidth: '`borderBlockStartWidth` is not supported. Use `borderTop` instead.',
-  borderBlockEndColor: '`borderBlockEndColor` is not supported. Use `borderBottom` instead.',
-  borderBlockEndStyle: '`borderBlockEndStyle` is not supported. Use `borderBottom` instead.',
-  borderBlockEndWidth: '`borderBlockEndWidth` is not supported. Use `borderBottom` instead.',
-  borderInlineStartColor: '`borderInlineStartColor` is not supported. Use `borderStart` instead.',
-  borderInlineStartStyle: '`borderInlineStartStyle` is not supported. Use `borderStart` instead.',
-  borderInlineStartWidth: '`borderInlineStartWidth` is not supported. Use `borderStart` instead.',
-  borderInlineEndColor: '`borderInlineEndColor` is not supported. Use `borderEnd` instead.',
-  borderInlineEndStyle: '`borderInlineEndStyle` is not supported. Use `borderEnd` instead.',
-  borderInlineEndWidth: '`borderInlineEndWidth` is not supported. Use `borderEnd` instead.',
-  borderLeft: '`borderLeft` is not supported. Use `borderStart` instead.',
-  borderLeftColor: '`borderLeftColor` is not supported. Use `borderStart` instead.',
-  borderLeftStyle: '`borderLeftStyle` is not supported. Use `borderStart` instead.',
-  borderLeftWidth: '`borderLeftWidth` is not supported. Use `borderStart` instead.',
-  borderRight: '`borderRight` is not supported. Use `borderEnd` instead.',
-  borderRightColor: '`borderRightColor` is not supported. Use `borderEnd` instead.',
-  borderRightStyle: '`borderRightStyle` is not supported. Use `borderEnd` instead.',
-  borderRightWidth: '`borderRightWidth` is not supported. Use `borderEnd` instead.',
-  borderTopLeftRadius: '`borderTopLeftRadius` is not supported. Use `borderTopStartRadius` instead.',
-  borderTopRightRadius: '`borderTopRightRadius` is not supported. Use `borderTopEndRadius` instead.',
-  borderBottomLeftRadius: '`borderBottomLeftRadius` is not supported. Use `borderBottomStartRadius` instead.',
-  borderBottomRightRadius: '`borderBottomRightRadius` is not supported. Use `borderBottomEndRadius` instead.',
-  borderImageSource: '`borderImageSource` is not supported. Use `borderImage` instead.',
-  borderImageSlice: '`borderImageSlice` is not supported. Use `borderImage` instead.',
-  borderImageWidth: '`borderImageWidth` is not supported. Use `borderImage` instead.',
-  borderImageOutset: '`borderImageOutset` is not supported. Use `borderImage` instead.',
-  borderImageRepeat: '`borderImageRepeat` is not supported. Use `borderImage` instead.',
-  marginLeft: '`marginLeft` is not supported. Use `marginStart` instead.',
-  marginRight: '`marginRight` is not supported. Use `marginEnd` instead.',
-  paddingLeft: '`paddingLeft` is not supported. Use `paddingStart` instead.',
-  paddingRight: '`paddingRight` is not supported. Use `paddingEnd` instead.',
-  columnRuleWidth: '`columnRuleWidth` is not supported. Use `columnRule` instead.',
-  columnRuleStyle: '`columnRuleStyle` is not supported. Use `columnRule` instead.',
-  columnRuleColor: '`columnRuleColor` is not supported. Use `columnRule` instead.',
-  columns: '`columns` is not supported. Use `columnCount` and `columnWidth` instead.',
-  flex: '`flex` is not supported. Use `flexGrow`, `flexShrink`, and `flexBasis` instead.',
-  flexFlow: '`flexFlow` is not supported. Use `flexDirection` and `flexWrap` instead.',
-  font: '`font` is not supported. Use individual properties like `fontFamily`, `fontSize`, etc. instead.',
-  grid: '`grid` is not supported. Use individual properties like `gridTemplateColumns`, `gridTemplateRows`, etc. instead.',
-  gridColumn: '`gridColumn` is not supported. Use `gridColumnStart` and `gridColumnEnd` instead.',
-  gridRow: '`gridRow` is not supported. Use `gridRowStart` and `gridRowEnd` instead.',
-  gridArea: '`gridArea` is not supported. Use `gridRowStart`, `gridColumnStart`, `gridRowEnd`, and `gridColumnEnd` instead.',
-  gridTemplate: '`gridTemplate` is not supported. Use individual properties like `gridTemplateColumns`, `gridTemplateRows`, etc. instead.',
-  gridTemplateAreas: '`gridTemplateAreas` is not supported. Use `gridTemplateRows` and `gridTemplateColumns` instead.',
-  listStyleImage: '`listStyleImage` is not supported. Use `listStyle` instead.',
-  listStylePosition: '`listStylePosition` is not supported. Use `listStyle` instead.',
-  listStyleType: '`listStyleType` is not supported. Use `listStyle` instead.',
-  maskClip: '`maskClip` is not supported. Use `mask` instead.',
-  maskComposite: '`maskComposite` is not supported. Use `mask` instead.',
-  maskImage: '`maskImage` is not supported. Use `mask` instead.',
-  maskMode: '`maskMode` is not supported. Use `mask` instead.',
-  maskOrigin: '`maskOrigin` is not supported. Use `mask` instead.',
-  maskPosition: '`maskPosition` is not supported. Use `mask` instead.',
-  maskRepeat: '`maskRepeat` is not supported. Use `mask` instead.',
-  maskSize: '`maskSize` is not supported. Use `mask` instead.',
-  offsetAnchor: '`offsetAnchor` is not supported. Use `offset` instead.',
-  offsetDistance: '`offsetDistance` is not supported. Use `offset` instead.',
-  offsetPath: '`offsetPath` is not supported. Use `offset` instead.',
-  offsetPosition: '`offsetPosition` is not supported. Use `offset` instead.',
-  offsetRotate: '`offsetRotate` is not supported. Use `offset` instead.',
-  outlineColor: '`outlineColor` is not supported. Use `outline` instead.',
-  outlineStyle: '`outlineStyle` is not supported. Use `outline` instead.',
-  outlineWidth: '`outlineWidth` is not supported. Use `outline` instead.',
-  textDecorationColor: '`textDecorationColor` is not supported. Use `textDecoration` instead.',
-  textDecorationLine: '`textDecorationLine` is not supported. Use `textDecoration` instead.',
-  textDecorationStyle: '`textDecorationStyle` is not supported. Use `textDecoration` instead.',
-  textDecorationThickness: '`textDecorationThickness` is not supported. Use `textDecoration` instead.',
-  textEmphasisColor: '`textEmphasisColor` is not supported. Use `textEmphasis` instead.',
-  textEmphasisStyle: '`textEmphasisStyle` is not supported. Use `textEmphasis` instead.',
-  transition: '`transition` is not supported. Use individual properties like `transitionProperty`, `transitionDuration`, etc. instead.'
-};
-exports.BANNED_PROPERTIES = BANNED_PROPERTIES;
-const expansions = {
-  border: rawValue => {
-    return [['borderTop', rawValue], ['borderEnd', rawValue], ['borderBottom', rawValue], ['borderStart', rawValue]];
-  },
-  // border: (rawValue: string) => {
-  //   if (typeof rawValue === 'number') {
-  //     return expansions.borderWidth(rawValue);
-  //   }
-  //   const [width, style, color, more] = splitValue(rawValue);
-  //   if (more != null) {
-  //     throw new Error(messages.MULTIPLE_DIRECTIONS_IN_SHORTHAND);
-  //   }
-  //   if (style == null || color == null) {
-  //     throw new Error(
-  //       'Border shorthand requires at least 2 values - width, style and color.'
-  //     );
-  //   }
-  //   return [
-  //     ...expansions.borderWidth(width),
-  //     ...expansions.borderStyle(style),
-  //     ...expansions.borderColor(color),
-  //   ];
-  // },
-  // borderTop: (rawValue: string) => {
-  //   if (typeof rawValue === 'number') {
-  //     return [['borderTopWidth', rawValue + 'px']];
-  //   }
-  //   const [width, style, color] = splitValue(rawValue);
-  //   if (style == null || color == null) {
-  //     throw new Error(
-  //       'BorderTop shorthand requires at least 2 values - width, style and color.'
-  //     );
-  //   }
-  //   return [
-  //     ['borderTopWidth', width],
-  //     ['borderTopStyle', style],
-  //     ['borderTopColor', color],
-  //   ];
-  // },
-  // borderEnd: (rawValue: string) => {
-  //   if (typeof rawValue === 'number') {
-  //     return [['borderEndWidth', rawValue + 'px']];
-  //   }
-  //   const [width, style, color] = splitValue(rawValue);
-  //   if (style == null || color == null) {
-  //     throw new Error(
-  //       'BorderEnd shorthand requires at least 2 values - width, style and color.'
-  //     );
-  //   }
-  //   return [
-  //     ['borderEndWidth', width],
-  //     ['borderEndStyle', style],
-  //     ['borderEndColor', color],
-  //   ];
-  // },
-  // borderBottom: (rawValue: string) => {
-  //   if (typeof rawValue === 'number') {
-  //     return [['borderBottomWidth', rawValue + 'px']];
-  //   }
-  //   const [width, style, color] = splitValue(rawValue);
-  //   if (style == null || color == null) {
-  //     throw new Error(
-  //       'BorderBottom shorthand requires at least 2 values - width, style and color.'
-  //     );
-  //   }
-  //   return [
-  //     ['borderBottomWidth', width],
-  //     ['borderBottomStyle', style],
-  //     ['borderBottomColor', color],
-  //   ];
-  // },
-  // borderStart: (rawValue: string) => {
-  //   if (typeof rawValue === 'number') {
-  //     return [['borderStartWidth', rawValue + 'px']];
-  //   }
-  //   const [width, style, color] = splitValue(rawValue);
-  //   if (style == null || color == null) {
-  //     throw new Error(
-  //       'BorderStart shorthand requires at least 2 values - width, style and color.'
-  //     );
-  //   }
-  //   return [
-  //     ['borderStartWidth', width],
-  //     ['borderStartStyle', style],
-  //     ['borderStartColor', color],
-  //   ];
-  // },
-  borderColor: rawValue => {
-    const [top, right = top, bottom = top, left = right] = splitValue(rawValue);
-    return [['borderTopColor', top], ['borderEndColor', right], ['borderBottomColor', bottom], ['borderStartColor', left]];
-  },
-  borderHorizontal: rawValue => {
-    return [['borderStart', rawValue], ['borderEnd', rawValue]];
-  },
-  borderStyle: rawValue => {
-    const [top, right = top, bottom = top, left = right] = splitValue(rawValue);
-    return [['borderTopStyle', top], ['borderEndStyle', right], ['borderBottomStyle', bottom], ['borderStartStyle', left]];
-  },
-  borderVertical: rawValue => {
-    return [['borderTop', rawValue], ['borderBottom', rawValue]];
-  },
-  borderWidth: rawValue => {
-    const [top, right = top, bottom = top, left = right] = typeof rawValue === 'number' ? [rawValue] : splitValue(rawValue);
-    return [['borderTopWidth', top], ['borderEndWidth', right], ['borderBottomWidth', bottom], ['borderStartWidth', left]];
-  },
-  borderRadius: rawValue => {
-    const [top, right = top, bottom = top, left = right] = typeof rawValue === 'string' ? splitValue(rawValue) : typeof rawValue === 'number' ? [rawValue] : rawValue; // remove
-
-    return [['borderTopStartRadius', top], ['borderTopEndRadius', right], ['borderBottomEndRadius', bottom], ['borderBottomStartRadius', left]];
+const shorthands = {
+  all: _ => {
+    throw new Error('all is not supported');
   },
-  margin: rawValue => {
-    const [top, right = top, bottom = top, left = right] = typeof rawValue === 'number' ? [rawValue] : splitValue(rawValue);
-    return [['marginTop', top], ['marginEnd', right], ['marginBottom', bottom], ['marginStart', left]];
+  animation: value => [['animation', value], ['animationName', null], ['animationDuration', null], ['animationTimingFunction', null], ['animationDelay', null], ['animationIterationCount', null], ['animationDirection', null], ['animationFillMode', null], ['animationPlayState', null]],
+  background: value => [['background', value], ['backgroundAttachment', null], ['backgroundClip', null], ['backgroundColor', null], ['backgroundImage', null], ['backgroundOrigin', null], ['backgroundPosition', null], ['backgroundRepeat', null], ['backgroundSize', null]],
+  // These will be removed later, matching the properties with React Native.
+  // For now, we're compiling them to the React Native properties.
+  // @Deprecated
+  border: rawValue => {
+    if (typeof rawValue === 'number') {
+      return shorthands.borderWidth(rawValue);
+    }
+    const [width, style, color] = splitValue(rawValue);
+    return [...shorthands.borderWidth(width), ...shorthands.borderStyle(style), ...shorthands.borderColor(color)];
   },
-  marginHorizontal: rawValue => {
-    return [['marginStart', rawValue], ['marginEnd', rawValue]];
+  // @Deprecated
+  borderInline: rawValue => {
+    if (typeof rawValue === 'number') {
+      return [['borderInlineWidth', rawValue], ['borderInlineStartWidth', null], ['borderInlineEndWidth', null]];
+    }
+    const [width, style, color] = splitValue(rawValue);
+    return [...shorthands.borderInlineWidth(width), ...shorthands.borderInlineStyle(style), ...shorthands.borderInlineColor(color)];
   },
-  marginVertical: rawValue => {
-    return [['marginTop', rawValue], ['marginBottom', rawValue]];
+  // @Deprecated
+  borderBlock: rawValue => {
+    if (typeof rawValue === 'number') {
+      return [['borderBlockWidth', rawValue], ['borderTopWidth', null], ['borderBottomWidth', null]];
+    }
+    const [width, style, color] = splitValue(rawValue);
+    return [...shorthands.borderBlockWidth(width), ...shorthands.borderBlockStyle(style), ...shorthands.borderBlockColor(color)];
   },
-  overflow: rawValue => {
-    const [x, y = x] = splitValue(rawValue);
-    return [['overflowX', x], ['overflowY', y]];
+  // @Deprecated
+  borderTop: rawValue => {
+    if (typeof rawValue === 'number') {
+      return [['borderTopWidth', rawValue]];
+    }
+    const [width, style, color] = splitValue(rawValue);
+    return [['borderTopWidth', width], ['borderTopStyle', style], ['borderTopColor', color]];
   },
-  padding: rawValue => {
-    const [top, right = top, bottom = top, left = right] = typeof rawValue === 'number' ? [rawValue] : splitValue(rawValue);
-    return [['paddingTop', top], ['paddingEnd', right], ['paddingBottom', bottom], ['paddingStart', left]];
+  // @Deprecated
+  borderInlineEnd: rawValue => {
+    if (typeof rawValue === 'number') {
+      return [['borderInlineEndWidth', rawValue]];
+    }
+    const [width, style, color] = splitValue(rawValue);
+    return [['borderInlineEndWidth', width], ['borderInlineEndStyle', style], ['borderInlineEndColor', color]];
   },
-  paddingHorizontal: rawValue => {
-    return [['paddingStart', rawValue], ['paddingEnd', rawValue]];
+  // @Deprecated
+  borderRight: rawValue => {
+    throw new Error(['`borderRight` is not supported.', 'You could use `borderRightWidth`, `borderRightStyle` and `borderRightColor`,', 'but it is preferable to use `borderInlineEndWidth`, `borderInlineEndStyle` and `borderInlineEndColor`.'].join(' '));
   },
-  paddingVertical: rawValue => {
-    return [['paddingTop', rawValue], ['paddingBottom', rawValue]];
+  // @Deprecated
+  borderBottom: rawValue => {
+    if (typeof rawValue === 'number') {
+      return [['borderBottomWidth', rawValue]];
+    }
+    const [width, style, color] = splitValue(rawValue);
+    return [['borderBottomWidth', width], ['borderBottomStyle', style], ['borderBottomColor', color]];
   },
-  gap: rawValue => {
+  // @Deprecated
+  borderInlineStart: rawValue => {
     if (typeof rawValue === 'number') {
-      return [['rowGap', rawValue], ['columnGap', rawValue]];
+      return [['borderInlineStartWidth', rawValue]];
     }
-    const [row, column = row] = splitValue(rawValue);
-    return [['rowGap', row], ['columnGap', column]];
+    const [width, style, color] = splitValue(rawValue);
+    return [['borderInlineStartWidth', width], ['borderInlineStartStyle', style], ['borderInlineStartColor', color]];
   },
-  placeContent: rawValue => {
-    const [align, justify = align] = splitValue(rawValue);
-    return [['alignContent', align], ['justifyContent', justify]];
+  // @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(' '));
   },
-  placeItems: rawValue => {
-    const [align, justify = align] = splitValue(rawValue);
-    return [['alignItems', align], ['justifyItems', justify]];
+  borderInlineWidth: rawValue => [['borderInlineWidth', rawValue], ['borderInlineStartWidth', null], ['borderLeftWidth', null], ['borderInlineEndWidth', null], ['borderRightWidth', null]],
+  borderInlineStyle: rawValue => [['borderInlineStyle', rawValue], ['borderInlineStartStyle', null], ['borderLeftStyle', null], ['borderInlineEndStyle', null], ['borderRightStyle', null]],
+  borderInlineColor: rawValue => [['borderInlineColor', rawValue], ['borderInlineStartColor', null], ['borderLeftColor', null], ['borderInlineEndColor', null], ['borderRightColor', null]],
+  borderBlockWidth: rawValue => [['borderBlockWidth', rawValue], ['borderTopWidth', null], ['borderBottomWidth', null]],
+  borderBlockStyle: rawValue => [['borderBlockStyle', rawValue], ['borderTopStyle', null], ['borderBottomStyle', null]],
+  borderBlockColor: rawValue => [['borderBlockColor', rawValue], ['borderTopColor', null], ['borderBottomColor', null]],
+  borderColor: value => [['borderColor', value], ['borderTopColor', null], ['borderInlineEndColor', null], ['borderRightColor', null], ['borderBottomColor', null], ['borderInlineStartColor', null], ['borderLeftColor', null]],
+  borderStyle: value => [['borderStyle', value], ['borderTopStyle', null], ['borderInlineEndStyle', null], ['borderRightStyle', null], ['borderBottomStyle', null], ['borderInlineStartStyle', null], ['borderLeftStyle', null]],
+  borderWidth: value => [['borderWidth', value], ['borderTopWidth', null], ['borderInlineEndWidth', null], ['borderRightWidth', null], ['borderBottomWidth', null], ['borderInlineStartWidth', null], ['borderLeftWidth', null]],
+  borderRadius: value => {
+    const values = typeof value === 'number' ? [value] : splitValue(value);
+    if (values.length === 1) {
+      return [['borderRadius', value],
+      // // logical constituents
+      ['borderStartStartRadius', null], ['borderStartEndRadius', null], ['borderEndStartRadius', null], ['borderEndEndRadius', null],
+      // physical constituents
+      ['borderTopLeftRadius', null], ['borderTopRightRadius', null], ['borderBottomLeftRadius', null], ['borderBottomRightRadius', null]];
+    }
+
+    // @Deprecated
+    const [startStart, startEnd = startStart, endEnd = startStart, endStart = startEnd] = values;
+    return [
+    // split into logical consituents
+    ['borderStartStartRadius', startStart], ['borderStartEndRadius', startEnd], ['borderEndEndRadius', endEnd], ['borderEndStartRadius', endStart],
+    // unset physical consituents
+    ['borderTopLeftRadius', null], ['borderTopRightRadius', null], ['borderBottomLeftRadius', null], ['borderBottomRightRadius', null]];
   },
-  placeSelf: rawValue => {
-    const [align, justify = align] = splitValue(rawValue);
-    return [['alignSelf', align], ['justifySelf', justify]];
+  columnRule: value => [['columnRule', value], ['columnRuleWidth', null], ['columnRuleStyle', null], ['columnRuleColor', null]],
+  columns: value => [['columns', value], ['columnCount', null], ['columnWidth', null]],
+  container: value => [['container', value], ['containerName', null], ['containerType', null]],
+  flex: value => [['flex', value], ['flexGrow', null], ['flexShrink', null], ['flexBasis', null]],
+  flexFlow: value => [['flexFlow', value], ['flexDirection', null], ['flexWrap', null]],
+  // @Deprecated ?
+  font: value => [['font', value], ['fontFamily', null], ['fontSize', null], ['fontStretch', null], ['fontStyle', null], ['fontVariant', null], ['fontWeight', null], ['lineHeight', null]],
+  gap: value => [['gap', value], ['rowGap', null], ['columnGap', null]],
+  grid: value => [['grid', value], ['gridTemplate', null], ['gridTemplateAreas', null], ['gridTemplateColumns', null], ['gridTemplateRows', null], ['gridAutoRows', null], ['gridAutoColumns', null], ['gridAutoFlow', null]
+
+  // This is for grid items only
+  // Not a constituent of `grid`
+  // ['gridRow', null],
+  // ['gridRowStart', null],
+  // ['gridRowEnd', null],
+  // ['gridColumn', null],
+  // ['gridColumnStart', null],
+  // ['gridColumnEnd', null],
+  // ['gridArea', null],
+  ],
+
+  gridArea: value => [['gridArea', value], ['gridRow', null], ['gridRowStart', null], ['gridRowEnd', null], ['gridColumn', null], ['gridColumnStart', null], ['gridColumnEnd', null]],
+  gridRow: value => [['gridRow', value], ['gridRowStart', null], ['gridRowEnd', null]],
+  gridColumn: value => [['gridColumn', value], ['gridColumnStart', null], ['gridColumnEnd', null]],
+  gridTemplate: value => [['gridTemplate', value], ['gridTemplateAreas', null], ['gridTemplateColumns', null], ['gridTemplateRows', null]],
+  inset: value => [['inset', value], ['insetInline', null], ['insetBlock', null], ['insetInlineStart', null], ['insetInlineEnd', null], ['top', null], ['right', null], ['bottom', null], ['left', null]],
+  insetInline: value => [['insetInline', value], ['insetInlineStart', null], ['insetInlineEnd', null], ['left', null], ['right', null]],
+  insetBlock: value => [['insetBlock', value], ['top', null], ['bottom', null]],
+  listStyle: value => [['listStyle', value], ['listStyleImage', null], ['listStylePosition', null], ['listStyleType', null]],
+  margin: value => {
+    const values = typeof value === 'number' ? [value] : splitValue(value);
+    if (values.length === 1) {
+      return [['margin', values[0]], ['marginInlineStart', null], ['marginLeft', null], ['marginInlineEnd', null], ['marginRight', null], ['marginTop', null], ['marginBottom', null]];
+    }
+    // @Deprecated
+    const [top, right = top, bottom = top, left = right] = values;
+    return [['marginTop', top], ['marginInlineEnd', right], ['marginBottom', bottom], ['marginInlineStart', left], ['marginLeft', null], ['marginRight', null]];
   },
-  scrollMargin: rawValue => {
-    const [top, right = top, bottom = top, left = right] = typeof rawValue === 'number' ? [rawValue] : splitValue(rawValue);
-    return [['scrollMarginTop', top], ['scrollMarginEnd', right], ['scrollMarginBottom', bottom], ['scrollMarginStart', left]];
+  marginInline: value => [['marginInline', value], ['marginInlineStart', null], ['marginLeft', null], ['marginInlineEnd', null], ['marginRight', null]],
+  marginBlock: value => [['marginBlock', value], ['marginTop', null], ['marginBottom', null]],
+  mask: value => [['mask', value], ['maskClip', null], ['maskComposite', null], ['maskImage', null], ['maskMode', null], ['maskOrigin', null], ['maskPosition', null], ['maskRepeat', null], ['maskSize', null]],
+  offset: value => [['offset', value], ['offsetAnchor', null], ['offsetDistance', null], ['offsetPath', null], ['offsetPosition', null], ['offsetRotate', null]],
+  outline: value => [['outline', value], ['outlineColor', null], ['outlineStyle', null], ['outlineWidth', null]],
+  overflow: value => [['overflow', value], ['overflowX', null], ['overflowY', null]],
+  padding: rawValue => {
+    const values = typeof rawValue === 'number' ? [rawValue] : splitValue(rawValue);
+    if (values.length === 1) {
+      return [['padding', values[0]], ['paddingStart', null], ['paddingLeft', null], ['paddingEnd', null], ['paddingRight', null], ['paddingTop', null], ['paddingBottom', null]];
+    }
+    // @Deprecated
+    const [top, right = top, bottom = top, left = right] = values;
+    return [['paddingTop', top], ['paddingEnd', right], ['paddingBottom', bottom], ['paddingStart', left]];
   },
-  scrollPadding: rawValue => {
-    const [top, right = top, bottom = top, left = right] = typeof rawValue === 'number' ? [rawValue] : splitValue(rawValue);
-    return [['scrollPaddingTop', top], ['scrollPaddingEnd', right], ['scrollPaddingBottom', bottom], ['scrollPaddingStart', left]];
-  }
+  paddingInline: rawValue => [['paddingInline', rawValue], ['paddingStart', null], ['paddingLeft', null], ['paddingEnd', null], ['paddingRight', null]],
+  paddingBlock: rawValue => [['paddingBlock', rawValue], ['paddingTop', null], ['paddingBottom', null]],
+  placeContent: value => [['placeContent', value], ['alignContent', null], ['justifyContent', null]],
+  placeItems: value => [['placeItems', value], ['alignItems', null], ['justifyItems', null]],
+  placeSelf: value => [['placeSelf', value], ['alignSelf', null], ['justifySelf', null]],
+  scrollMargin: value => [['scrollMargin', value], ['scrollMarginBottom', null], ['scrollMarginLeft', null], ['scrollMarginStart', null], ['scrollMarginRight', null], ['scrollMarginEnd', null], ['scrollMarginTop', null]],
+  scrollPadding: value => [['scrollPadding', value], ['scrollPaddingBottom', null], ['scrollPaddingLeft', null], ['scrollPaddingStart', null], ['scrollPaddingRight', null], ['scrollPaddingEnd', null], ['scrollPaddingTop', null]],
+  scrollTimeline: value => [['scrollTimeline', value], ['scrollTimelineName', null], ['scrollTimelineAxis', null]],
+  textDecoration: value => [['textDecoration', value], ['textDecorationColor', null], ['textDecorationLine', null], ['textDecorationStyle', null], ['textDecorationThickness', null]],
+  textEmphasis: value => [['textEmphasis', value], ['textEmphasisColor', null], ['textEmphasisStyle', null]],
+  transition: value => [['transition', value], ['transitionDelay', null], ['transitionDuration', null], ['transitionProperty', null], ['transitionTimingFunction', null]]
+};
+const aliases = {
+  // @Deprecated
+  borderHorizontal: shorthands.borderInline,
+  // @Deprecated
+  borderVertical: shorthands.borderBlock,
+  // @Deprecated
+  borderBlockStart: shorthands.borderTop,
+  // @Deprecated
+  borderEnd: shorthands.borderInlineEnd,
+  // @Deprecated
+  borderBlockEnd: shorthands.borderBottom,
+  // @Deprecated
+  borderStart: shorthands.borderInlineStart,
+  borderHorizontalWidth: shorthands.borderInlineWidth,
+  borderHorizontalStyle: shorthands.borderInlineStyle,
+  borderHorizontalColor: shorthands.borderInlineColor,
+  borderVerticalWidth: shorthands.borderBlockWidth,
+  borderVerticalStyle: shorthands.borderBlockStyle,
+  borderVerticalColor: shorthands.borderBlockColor,
+  borderBlockStartColor: value => [['borderTopColor', value]],
+  borderBlockEndColor: value => [['borderBottomColor', value]],
+  borderStartColor: value => [['borderInlineStartColor', value]],
+  borderEndColor: value => [['borderInlineEndColor', value]],
+  borderBlockStartStyle: value => [['borderTopStyle', value]],
+  borderBlockEndStyle: value => [['borderBottomStyle', value]],
+  borderStartStyle: value => [['borderInlineStartStyle', value]],
+  borderEndStyle: value => [['borderInlineEndStyle', value]],
+  borderBlockStartWidth: value => [['borderTopWidth', value]],
+  borderBlockEndWidth: value => [['borderBottomWidth', 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: shorthands.marginInline,
+  marginVertical: shorthands.marginBlock,
+  paddingBlockStart: rawValue => [['paddingTop', rawValue]],
+  paddingBlockEnd: rawValue => [['paddingBottom', rawValue]],
+  paddingStart: rawValue => [['paddingInlinStart', rawValue]],
+  paddingEnd: rawValue => [['paddingInlineEnd', rawValue]],
+  paddingHorizontal: shorthands.paddingInline,
+  paddingVertical: shorthands.paddingBlock,
+  insetBlockStart: value => [['top', value]],
+  insetBlockEnd: value => [['bottom', value]],
+  start: value => [['insetInlineStart', value]],
+  end: value => [['insetInlineEnd', value]]
 };
-const expandedKeys = [...Object.keys(expansions), ...Object.keys(BANNED_PROPERTIES)];
+const expansions = {
+  ...shorthands,
+  ...aliases
+};
+
+// TODO: It should be possible to remove this as we should no longer have
+// to disallow shorthand properties with object values.
+const expandedKeys = Object.keys(expansions);
 exports.expandedKeys = expandedKeys;
 function flatMapExpandedShorthands(objEntry) {
   const [key, value] = objEntry;