@stylexjs/shared 0.2.0-beta.8 → 0.3.0

package/lib/utils/split-css-value.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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';
+declare function splitValue(
+  str: TStyleValue,
+): ReadonlyArray<number | string | null>;
+export default splitValue;

package/lib/utils/split-css-value.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = splitValue;
+var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function printNode(node) {
+  switch (node.type) {
+    case 'word':
+    case 'string':
+      return `${node.value}`;
+    case 'function':
+      return `${node.value}(${node.nodes.map(printNode).join('')})`;
+    default:
+      return node.value;
+  }
+}
+function splitValue(str) {
+  if (str == null || typeof str === 'number') {
+    return [str];
+  }
+  if (Array.isArray(str)) {
+    return str;
+  }
+  const parsed = (0, _postcssValueParser.default)(str.trim());
+  const nodes = parsed.nodes.filter(node => node.type !== 'space' && node.type !== 'div').map(printNode);
+  if (nodes.length > 1 && nodes[nodes.length - 1].toLowerCase() === '!important') {
+    return nodes.slice(0, nodes.length - 1).map(node => node + ' !important');
+  }
+  return nodes;
+}

package/lib/utils/split-css-value.js.flow

@@ -0,0 +1,15 @@
+/**
+ * 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';
+
+// Using split(' ') Isn't enough bcause of values like calc.
+declare export default function splitValue(
+  str: TStyleValue,
+): $ReadOnlyArray<number | string | null>;

package/lib/validate.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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 { TRawValue } from './common-types';
+declare function validateEntry($$PARAM_0$$: [string, TRawValue]): void;
+export default validateEntry;

package/lib/validate.js

@@ -4,15 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = validateEntry;
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * 
- */
-
 function validateEntry(_ref) {
   let [key, value] = _ref;
   if (Array.isArray(value)) {
@@ -22,7 +13,7 @@ function validateEntry(_ref) {
   }
 }
 function validateSimplyEntry(_ref2) {
-  let [key, value] = _ref2;
+  let [key, _value] = _ref2;
   if (BANNED_KEYS.has(key)) {
     throw new Error('Banned key: ' + key);
   }

package/lib/validate.js.flow

@@ -0,0 +1,12 @@
+/**
+ * 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 { TRawValue } from './common-types';
+
+declare export default function validateEntry([string, TRawValue]): void;

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "@stylexjs/shared",
-  "version": "0.2.0-beta.8",
-  "description": "Shared Code for Stylex compile and runtime.",
+  "version": "0.3.0",
   "main": "lib/index.js",
-  "repository": "https://www.github.com/facebookexternal/stylex",
-  "author": "Naman Goel <nmn@fb.com>",
+  "repository": "https://www.github.com/facebook/stylex",
   "license": "MIT",
   "scripts": {
+    "prebuild": "gen-types -i src/ -o lib/",
     "build": "babel src/ --out-dir lib/ --copy-files",
     "test": "jest"
   },
@@ -14,7 +13,7 @@
     "postcss-value-parser": "^4.1.0"
   },
   "devDependencies": {
-    "typescript": "^4.7.4"
+    "@stylexjs/scripts": "0.3.0"
   },
   "jest": {
     "snapshotFormat": {

package/lib/expand-shorthands.d.ts

@@ -1,5 +0,0 @@
-export const BANNED_PROPERTIES: { [key: string]: string };
-export const expandedKeys: $ReadOnlyArray<string>;
-export default function flatMapExpandedShorthands<T>(
-  objEntry: [string, T]
-): Array<[string, T]>;

package/lib/expand-shorthands.js

@@ -1,387 +0,0 @@
-"use strict";
-
-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"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * 
- */
-
-function printNode(node) {
-  switch (node.type) {
-    case 'word':
-    case 'string':
-      return `${node.value}`;
-    case 'function':
-      return `${node.value}(${node.nodes.map(printNode).join('')})`;
-    default:
-      return node.value;
-  }
-}
-
-// Using split(' ') Isn't enough bcause of values like calc.
-function splitValue(str) {
-  if (Array.isArray(str)) {
-    return str;
-  }
-  const parsed = (0, _postcssValueParser.default)(str.trim());
-  const nodes = parsed.nodes.filter(node => node.type !== 'space' && node.type !== 'div').map(printNode);
-  if (nodes.length > 1 && nodes[nodes.length - 1].toLowerCase() === '!important') {
-    return nodes.slice(0, nodes.length - 1).map(node => node + ' !important');
-  }
-  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] border-radius
- * - [o] column-rule - Only the shorthand is allowed.
- * - [!] columns - BANNED
- * - [!] flex - BANNED
- * - [!] flex-flow - BANNED
- * - [!] font - BANNED
- * - [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] margin
- * - [o] mask - Only the shorthand is allowed.
- * - [o] offset - Only the shorthand is allowed.
- * - [o] outline - Only the shorthand is allowed.
- * - [x] overflow
- * - [x] padding
- * - [x] place-content
- * - [x] place-items
- * - [x] place-self
- * - [X] scroll-margin
- * - [x] scroll-padding
- * - [o] text-decoration - Only the shorthand is allowed.
- * - [o] text-emphasis - Only the shorthand is allowed.
- * - [!] transition - BANNED
- */
-
-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]];
-  },
-  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]];
-  },
-  marginHorizontal: rawValue => {
-    return [['marginStart', rawValue], ['marginEnd', rawValue]];
-  },
-  marginVertical: rawValue => {
-    return [['marginTop', rawValue], ['marginBottom', rawValue]];
-  },
-  overflow: rawValue => {
-    const [x, y = x] = splitValue(rawValue);
-    return [['overflowX', x], ['overflowY', y]];
-  },
-  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]];
-  },
-  paddingHorizontal: rawValue => {
-    return [['paddingStart', rawValue], ['paddingEnd', rawValue]];
-  },
-  paddingVertical: rawValue => {
-    return [['paddingTop', rawValue], ['paddingBottom', rawValue]];
-  },
-  gap: rawValue => {
-    if (typeof rawValue === 'number') {
-      return [['rowGap', rawValue], ['columnGap', rawValue]];
-    }
-    const [row, column = row] = splitValue(rawValue);
-    return [['rowGap', row], ['columnGap', column]];
-  },
-  placeContent: rawValue => {
-    const [align, justify = align] = splitValue(rawValue);
-    return [['alignContent', align], ['justifyContent', justify]];
-  },
-  placeItems: rawValue => {
-    const [align, justify = align] = splitValue(rawValue);
-    return [['alignItems', align], ['justifyItems', justify]];
-  },
-  placeSelf: rawValue => {
-    const [align, justify = align] = splitValue(rawValue);
-    return [['alignSelf', align], ['justifySelf', justify]];
-  },
-  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]];
-  },
-  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]];
-  }
-};
-const expandedKeys = [...Object.keys(expansions), ...Object.keys(BANNED_PROPERTIES)];
-exports.expandedKeys = expandedKeys;
-function flatMapExpandedShorthands(objEntry) {
-  const [key, value] = objEntry;
-  const expansion = expansions[key];
-  if (expansion) {
-    if (Array.isArray(value)) {
-      throw new Error('Cannot use fallbacks for shorthands. Use the expansion instead.');
-    }
-    return expansion(value);
-  }
-  return [objEntry];
-}