@stylexjs/shared 0.17.5 → 0.18.0

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

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports._flattenRawStyleObject = _flattenRawStyleObject;
+exports.flattenRawStyleObject = flattenRawStyleObject;
+var _index = _interopRequireDefault(require("./index"));
+var _styleValueParser = require("style-value-parser");
+var messages = _interopRequireWildcard(require("../messages"));
+var _PreRule = require("./PreRule");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function flattenRawStyleObject(style, options) {
+  let processedStyle = style;
+  try {
+    processedStyle = options.enableMediaQueryOrder ? (0, _styleValueParser.lastMediaQueryWinsTransform)(style) : style;
+  } catch (error) {
+    throw new Error(messages.INVALID_MEDIA_QUERY_SYNTAX);
+  }
+  return _flattenRawStyleObject(processedStyle, [], options);
+}
+function _flattenRawStyleObject(style, keyPath, options) {
+  const flattened = [];
+  for (const _key in style) {
+    const value = style[_key];
+    const key = _key.match(/var\(--[a-z0-9]+\)/) ? _key.slice(4, -1) : _key;
+    if (value === null || typeof value === 'string' || typeof value === 'number') {
+      const pairs = (0, _index.default)([key, value], options);
+      for (const [property, value] of pairs) {
+        if (value === null) {
+          flattened.push([property, new _PreRule.NullPreRule()]);
+        } else {
+          flattened.push([property, new _PreRule.PreRule(property, value, keyPath.includes(key) ? keyPath.map(k => k === key ? property : k) : [...keyPath, property])]);
+        }
+      }
+      continue;
+    }
+    if (Array.isArray(value)) {
+      const equivalentPairs = {};
+      for (const eachVal of value) {
+        const pairs = (0, _index.default)([key, eachVal], options);
+        for (const [property, val] of pairs) {
+          if (Array.isArray(val)) {
+            if (equivalentPairs[property] == null) {
+              equivalentPairs[property] = [...val];
+            } else {
+              equivalentPairs[property].push(...val);
+            }
+          } else if (equivalentPairs[property] == null) {
+            equivalentPairs[property] = [val];
+          } else {
+            equivalentPairs[property].push(val);
+          }
+        }
+      }
+      Object.entries(equivalentPairs).map(([property, values]) => [property, [...new Set(values.filter(Boolean))]]).map(([property, values]) => [property, values.length === 0 ? null : values.length === 1 ? values[0] : values]).forEach(([property, value]) => {
+        if (value === null) {
+          flattened.push([property, new _PreRule.NullPreRule()]);
+        } else {
+          flattened.push([property, new _PreRule.PreRule(property, value, keyPath.includes(_key) ? keyPath.map(k => k === _key ? property : k) : [...keyPath, property])]);
+        }
+      });
+      continue;
+    }
+    if (typeof value === 'object' && !key.startsWith(':') && !key.startsWith('@') && !key.startsWith('[')) {
+      const equivalentPairs = {};
+      for (const condition in value) {
+        const innerValue = value[condition];
+        const pairs = _flattenRawStyleObject({
+          [key]: innerValue
+        }, keyPath.length > 0 ? [...keyPath, condition] : [key, condition], options);
+        for (const [property, preRule] of pairs) {
+          if (equivalentPairs[property] == null) {
+            equivalentPairs[property] = {
+              [condition]: preRule
+            };
+          } else {
+            equivalentPairs[property][condition] = preRule;
+          }
+        }
+      }
+      for (const [property, obj] of Object.entries(equivalentPairs)) {
+        const sortedKeys = Object.keys(obj);
+        const rules = [];
+        for (const condition of sortedKeys) {
+          rules.push(obj[condition]);
+        }
+        flattened.push([property, _PreRule.PreRuleSet.create(rules)]);
+      }
+    }
+    if (typeof value === 'object' && (key.startsWith(':') || key.startsWith('@') || key.startsWith('['))) {
+      const pairs = _flattenRawStyleObject(value, [...keyPath, _key], options);
+      for (const [property, preRule] of pairs) {
+        flattened.push([key + '_' + property, preRule]);
+      }
+    }
+  }
+  return flattened;
+}

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

@@ -0,0 +1,23 @@
+/**
+ * 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 { RawStyles, StyleXOptions } from '../common-types';
+
+import { type AnyPreRule, type IPreRule } from './PreRule';
+
+declare export function flattenRawStyleObject(
+  style: RawStyles,
+  options: StyleXOptions,
+): $ReadOnlyArray<$ReadOnly<[string, IPreRule]>>;
+
+declare export function _flattenRawStyleObject(
+  style: RawStyles,
+  keyPath: $ReadOnlyArray<string>,
+  options: StyleXOptions,
+): Array<$ReadOnly<[string, AnyPreRule]>>;

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

@@ -0,0 +1,21 @@
+/**
+ * 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 { StyleXOptions, TStyleValue } from '../common-types';
+export declare function getExpandedKeys(
+  options: StyleXOptions,
+): ReadonlyArray<string>;
+declare function flatMapExpandedShorthands(
+  objEntry: Readonly<[string, TStyleValue]>,
+  options: Readonly<{
+    styleResolution: StyleXOptions['styleResolution'];
+    propertyValidationMode?: StyleXOptions['propertyValidationMode'];
+  }>,
+): ReadonlyArray<[string, TStyleValue]>;
+export default flatMapExpandedShorthands;

package/lib/preprocess-rules/index.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = flatMapExpandedShorthands;
+exports.getExpandedKeys = getExpandedKeys;
+var _applicationOrder = _interopRequireDefault(require("./application-order"));
+var _legacyExpandShorthands = _interopRequireDefault(require("./legacy-expand-shorthands"));
+var _propertySpecificity = _interopRequireDefault(require("./property-specificity"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const expansions = {
+  'application-order': _applicationOrder.default,
+  'property-specificity': _propertySpecificity.default,
+  'legacy-expand-shorthands': _legacyExpandShorthands.default
+};
+function getExpandedKeys(options) {
+  return Object.keys(expansions[options.styleResolution ?? 'property-specificity']);
+}
+function flatMapExpandedShorthands(objEntry, options) {
+  let [key, value] = objEntry;
+  if (key.startsWith('var(') && key.endsWith(')')) {
+    key = key.slice(4, -1);
+  }
+  const expansion = expansions[options.styleResolution ?? 'property-specificity'][key];
+  if (expansion) {
+    if (Array.isArray(value)) {
+      throw new Error('Cannot use fallbacks for shorthands. Use the expansion instead.');
+    }
+    try {
+      return expansion(value);
+    } catch (error) {
+      const validationMode = options.propertyValidationMode ?? 'silent';
+      if (validationMode === 'throw') {
+        throw error;
+      } else if (validationMode === 'warn') {
+        console.warn(`[stylex] ${error.message}`);
+        return [];
+      } else {
+        return [];
+      }
+    }
+  }
+  return [[key, value]];
+}

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

@@ -0,0 +1,23 @@
+/**
+ * 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 { StyleXOptions, TStyleValue } from '../common-types';
+
+declare export function getExpandedKeys(
+  options: StyleXOptions,
+): $ReadOnlyArray<string>;
+
+declare export default function flatMapExpandedShorthands(
+  objEntry: $ReadOnly<[string, TStyleValue]>,
+  options: $ReadOnly<{
+    styleResolution: StyleXOptions['styleResolution'],
+    propertyValidationMode?: StyleXOptions['propertyValidationMode'],
+    ...
+  }>,
+): $ReadOnlyArray<[string, TStyleValue]>;

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

@@ -0,0 +1,170 @@
+/**
+ * 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';
+export declare const LOGICAL_FLOAT_START_VAR: '--stylex-logical-start';
+export declare type LOGICAL_FLOAT_START_VAR = typeof LOGICAL_FLOAT_START_VAR;
+export declare const LOGICAL_FLOAT_END_VAR: '--stylex-logical-end';
+export declare type LOGICAL_FLOAT_END_VAR = typeof LOGICAL_FLOAT_END_VAR;
+/**
+ * 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
+ * - [ ] corner-shape
+ * - [ ] 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
+ * - [ ] corner-shape
+ * - [ ] 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: Readonly<{
+  [key: string]: ($$PARAM_0$$: TStyleValue) => TReturn;
+}>;
+declare const aliases: {
+  insetBlockStart: (val: TStyleValue) => TReturn;
+  insetBlockEnd: (val: TStyleValue) => TReturn;
+  insetInlineStart: typeof shorthands.start;
+  insetInlineEnd: typeof shorthands.end;
+  blockSize: (val: TStyleValue) => TReturn;
+  inlineSize: (val: TStyleValue) => TReturn;
+  minBlockSize: (val: TStyleValue) => TReturn;
+  minInlineSize: (val: TStyleValue) => TReturn;
+  maxBlockSize: (val: TStyleValue) => TReturn;
+  maxInlineSize: (val: TStyleValue) => TReturn;
+  borderStart: (val: TStyleValue) => TReturn;
+  borderEnd: (val: TStyleValue) => TReturn;
+  borderBlockWidth: typeof shorthands.borderVerticalWidth;
+  borderBlockStyle: typeof shorthands.borderVerticalStyle;
+  borderBlockColor: typeof shorthands.borderVerticalColor;
+  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: typeof shorthands.borderHorizontalWidth;
+  borderInlineStyle: typeof shorthands.borderHorizontalStyle;
+  borderInlineColor: typeof shorthands.borderHorizontalColor;
+  borderTopStartRadius: (val: TStyleValue) => TReturn;
+  borderTopEndRadius: (val: TStyleValue) => TReturn;
+  borderBottomStartRadius: (val: TStyleValue) => TReturn;
+  borderBottomEndRadius: (val: TStyleValue) => TReturn;
+  gridGap: typeof shorthands.gap;
+  gridRowGap: (value: TStyleValue) => TReturn;
+  gridColumnGap: (value: TStyleValue) => TReturn;
+  marginBlock: typeof shorthands.marginVertical;
+  marginBlockStart: (val: TStyleValue) => TReturn;
+  marginBlockEnd: (val: TStyleValue) => TReturn;
+  marginInline: typeof shorthands.marginHorizontal;
+  overflowBlock: (value: TStyleValue) => TReturn;
+  overflowInline: (value: TStyleValue) => TReturn;
+  paddingBlock: typeof shorthands.paddingVertical;
+  paddingBlockStart: (val: TStyleValue) => TReturn;
+  paddingBlockEnd: (val: TStyleValue) => TReturn;
+  paddingInline: typeof shorthands.paddingHorizontal;
+  scrollMarginBlockStart: (value: TStyleValue) => TReturn;
+  scrollMarginBlockEnd: (value: TStyleValue) => TReturn;
+  float: (value: TStyleValue) => TReturn;
+  clear: (value: TStyleValue) => TReturn;
+};
+declare const expansions: Omit<
+  typeof shorthands,
+  keyof typeof aliases | keyof {}
+> &
+  Omit<typeof aliases, keyof {}> & {};
+declare const $$EXPORT_DEFAULT_DECLARATION$$: typeof expansions;
+declare type $$EXPORT_DEFAULT_DECLARATION$$ =
+  typeof $$EXPORT_DEFAULT_DECLARATION$$;
+export default $$EXPORT_DEFAULT_DECLARATION$$;

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

@@ -0,0 +1,222 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.LOGICAL_FLOAT_START_VAR = exports.LOGICAL_FLOAT_END_VAR = void 0;
+var _splitCssValue = _interopRequireDefault(require("../utils/split-css-value"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const LOGICAL_FLOAT_START_VAR = exports.LOGICAL_FLOAT_START_VAR = '--stylex-logical-start';
+const LOGICAL_FLOAT_END_VAR = exports.LOGICAL_FLOAT_END_VAR = '--stylex-logical-end';
+const listStyleGlobalValues = new Set(['inherit', 'initial', 'revert', 'unset']);
+const listStylePositionValues = new Set(['inside', 'outside']);
+const listStyleTypeRegex = /^([a-z-]+|".*?"|'.*?')$/;
+const shorthands = {
+  border: rawValue => {
+    return [['borderTop', rawValue], ['borderInlineEnd', rawValue], ['borderBottom', rawValue], ['borderInlineStart', rawValue]];
+  },
+  borderColor: rawValue => {
+    const [top, right = top, bottom = top, left = right] = (0, _splitCssValue.default)(rawValue);
+    return [['borderTopColor', top], ['borderInlineEndColor', right], ['borderBottomColor', bottom], ['borderInlineStartColor', left]];
+  },
+  borderHorizontal: rawValue => {
+    return [['borderInlineStart', rawValue], ['borderInlineEnd', rawValue]];
+  },
+  borderStyle: rawValue => {
+    const [top, right = top, bottom = top, left = right] = (0, _splitCssValue.default)(rawValue);
+    return [['borderTopStyle', top], ['borderInlineEndStyle', right], ['borderBottomStyle', bottom], ['borderInlineStartStyle', left]];
+  },
+  borderVertical: rawValue => {
+    return [['borderTop', rawValue], ['borderBottom', rawValue]];
+  },
+  borderWidth: rawValue => {
+    const [top, right = top, bottom = top, left = right] = (0, _splitCssValue.default)(rawValue);
+    return [['borderTopWidth', top], ['borderInlineEndWidth', right], ['borderBottomWidth', bottom], ['borderInlineStartWidth', left]];
+  },
+  borderHorizontalColor: rawValue => [['borderInlineStartColor', rawValue], ['borderInlineEndColor', rawValue]],
+  borderHorizontalStyle: rawValue => [['borderInlineStartStyle', rawValue], ['borderInlineEndStyle', rawValue]],
+  borderHorizontalWidth: rawValue => [['borderInlineStartWidth', rawValue], ['borderInlineEndWidth', 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 [['borderStartStartRadius', top], ['borderStartEndRadius', right], ['borderEndEndRadius', bottom], ['borderEndStartRadius', left]];
+  },
+  containIntrinsicSize: rawValue => {
+    const parts = (0, _splitCssValue.default)(rawValue);
+    const [width, height = width] = parts.reduce((coll, part) => {
+      const lastElement = coll[coll.length - 1];
+      if (lastElement === 'auto' && part != null) {
+        return [...coll.slice(0, -1), `auto ${part}`];
+      }
+      return [...coll, part];
+    }, []);
+    return [['containIntrinsicWidth', width], ['containIntrinsicHeight', height]];
+  },
+  inset: rawValue => {
+    const [top, right = top, bottom = top, left = right] = (0, _splitCssValue.default)(rawValue);
+    return [['top', top], ['insetInlineEnd', right], ['bottom', bottom], ['insetInlineStart', left]];
+  },
+  insetInline: rawValue => {
+    const [start, end = start] = (0, _splitCssValue.default)(rawValue);
+    return [...shorthands.start(start), ...shorthands.end(end)];
+  },
+  insetBlock: rawValue => {
+    const [top, bottom = top] = (0, _splitCssValue.default)(rawValue);
+    return [['top', top], ['bottom', bottom]];
+  },
+  start: rawValue => [['insetInlineStart', rawValue], ['left', null], ['right', null]],
+  end: rawValue => [['insetInlineEnd', rawValue], ['left', null], ['right', null]],
+  left: rawValue => [['left', rawValue], ['insetInlineStart', null], ['insetInlineEnd', null]],
+  right: rawValue => [['right', rawValue], ['insetInlineStart', null], ['insetInlineEnd', null]],
+  gap: rawValue => {
+    const [row, column = row] = (0, _splitCssValue.default)(rawValue);
+    return [['rowGap', row], ['columnGap', column]];
+  },
+  listStyle: rawValue => {
+    if (rawValue == null) {
+      return [['listStyleType', null], ['listStylePosition', null], ['listStyleImage', null]];
+    }
+    const parts = (0, _splitCssValue.default)(rawValue);
+    let image = null;
+    let position = null;
+    let type = null;
+    if (parts.length === 1 && parts[0] != null && typeof parts[0] === 'string' && listStyleGlobalValues.has(parts[0])) {
+      const globalValue = parts[0];
+      return [['listStyleType', globalValue], ['listStylePosition', globalValue], ['listStyleImage', globalValue]];
+    }
+    const remainingParts = [];
+    for (const part of parts) {
+      if (part == null || typeof part !== 'string') continue;
+      if (listStyleGlobalValues.has(part) || part.includes('var(--')) {
+        throw new Error(`invalid "listStyle" value of "${JSON.stringify(rawValue)}"`);
+      } else if (listStylePositionValues.has(part)) {
+        if (position != null) {
+          throw new Error(`invalid "listStyle" value of ${JSON.stringify(rawValue)}`);
+        }
+        position = part;
+      } else if (part !== 'none' && listStyleTypeRegex.test(part)) {
+        if (type != null) {
+          throw new Error(`invalid "listStyle" value of ${JSON.stringify(rawValue)}`);
+        }
+        type = part;
+      } else {
+        remainingParts.push(part);
+      }
+    }
+    for (const part of remainingParts) {
+      if (part === 'none' && type == null) {
+        type = part;
+      } else {
+        if (image != null) {
+          throw new Error(`invalid "listStyle" value of ${JSON.stringify(rawValue)}`);
+        }
+        image = part;
+      }
+    }
+    return [['listStyleType', type], ['listStylePosition', position], ['listStyleImage', image]];
+  },
+  margin: rawValue => {
+    const [top, right = top, bottom = top, left = right] = (0, _splitCssValue.default)(rawValue);
+    return [['marginTop', top], ['marginInlineEnd', right], ['marginBottom', bottom], ['marginInlineStart', left]];
+  },
+  marginHorizontal: rawValue => {
+    const [start, end = start] = (0, _splitCssValue.default)(rawValue);
+    return [...shorthands.marginStart(start), ...shorthands.marginEnd(end)];
+  },
+  marginStart: rawValue => [['marginInlineStart', rawValue], ['marginLeft', null], ['marginRight', null]],
+  marginEnd: rawValue => [['marginInlineEnd', rawValue], ['marginLeft', null], ['marginRight', null]],
+  marginLeft: rawValue => [['marginLeft', rawValue], ['marginInlineStart', null], ['marginInlineEnd', null]],
+  marginRight: rawValue => [['marginRight', rawValue], ['marginInlineStart', null], ['marginInlineEnd', null]],
+  marginVertical: rawValue => {
+    const [top, bottom = top] = (0, _splitCssValue.default)(rawValue);
+    return [['marginTop', top], ['marginBottom', bottom]];
+  },
+  overflow: rawValue => {
+    const [x, y = x] = (0, _splitCssValue.default)(rawValue);
+    return [['overflowX', x], ['overflowY', y]];
+  },
+  padding: rawValue => {
+    const [top, right = top, bottom = top, left = right] = (0, _splitCssValue.default)(rawValue);
+    return [['paddingTop', top], ['paddingInlineEnd', right], ['paddingBottom', bottom], ['paddingInlineStart', left]];
+  },
+  paddingHorizontal: val => {
+    const [start, end = start] = (0, _splitCssValue.default)(val);
+    return [...shorthands.paddingStart(start), ...shorthands.paddingEnd(end)];
+  },
+  paddingStart: val => [['paddingInlineStart', val], ['paddingLeft', null], ['paddingRight', null]],
+  paddingEnd: val => [['paddingInlineEnd', val], ['paddingLeft', null], ['paddingRight', null]],
+  paddingLeft: val => [['paddingLeft', val], ['paddingInlineStart', null], ['paddingInlineEnd', null]],
+  paddingRight: val => [['paddingRight', val], ['paddingInlineStart', null], ['paddingInlineEnd', null]],
+  paddingVertical: val => {
+    const [top, bottom = top] = (0, _splitCssValue.default)(val);
+    return [['paddingTop', top], ['paddingBottom', bottom]];
+  }
+};
+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]],
+  borderStart: val => [['borderInlineStart', val]],
+  borderEnd: val => [['borderInlineEnd', 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,
+  borderTopStartRadius: val => [['borderStartStartRadius', val]],
+  borderTopEndRadius: val => [['borderStartEndRadius', val]],
+  borderBottomStartRadius: val => [['borderEndStartRadius', val]],
+  borderBottomEndRadius: val => [['borderEndEndRadius', 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,
+  overflowBlock: value => [['overflowY', value]],
+  overflowInline: value => [['overflowX', value]],
+  paddingBlock: shorthands.paddingVertical,
+  paddingBlockStart: val => [['paddingTop', val]],
+  paddingBlockEnd: val => [['paddingBottom', val]],
+  paddingInline: shorthands.paddingHorizontal,
+  scrollMarginBlockStart: value => [['scrollMarginTop', value]],
+  scrollMarginBlockEnd: value => [['scrollMarginBottom', value]],
+  float: value => {
+    if (value === 'inline-start' || value === 'start') {
+      return [['float', `var(${LOGICAL_FLOAT_START_VAR})`]];
+    } else if (value === 'inline-end' || value === 'end') {
+      return [['float', `var(${LOGICAL_FLOAT_END_VAR})`]];
+    }
+    return [['float', value]];
+  },
+  clear: value => {
+    if (value === 'inline-start' || value === 'start') {
+      return [['clear', `var(${LOGICAL_FLOAT_START_VAR})`]];
+    } else if (value === 'inline-end' || value === 'end') {
+      return [['clear', `var(${LOGICAL_FLOAT_END_VAR})`]];
+    }
+    return [['clear', value]];
+  }
+};
+const expansions = {
+  ...shorthands,
+  ...aliases
+};
+var _default = exports.default = expansions;