@stylexjs/shared 0.1.0-beta.7 → 0.2.0-beta.9

package/lib/preprocess-rules/index.js

@@ -0,0 +1,39 @@
+"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(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 expansions = {
+  'application-order': _applicationOrder.default,
+  'property-specificity': _propertySpecificity.default,
+  'legacy-expand-shorthands': _legacyExpandShorthands.default
+};
+function getExpandedKeys(options) {
+  return Object.keys(expansions[options.styleResolution ?? 'application-order']);
+}
+function flatMapExpandedShorthands(objEntry, options) {
+  const [key, value] = objEntry;
+  const expansion = expansions[options.styleResolution ?? 'application-order'][key];
+  if (expansion) {
+    if (Array.isArray(value)) {
+      throw new Error('Cannot use fallbacks for shorthands. Use the expansion instead.');
+    }
+    return expansion(value);
+  }
+  return [[key, value]];
+}

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

@@ -0,0 +1,169 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _splitCssValue = _interopRequireDefault(require("../utils/split-css-value"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * 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 = {
+  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);
+  },
+  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)];
+  },
+  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)];
+  },
+  borderWidth: rawValue => {
+    const [top, right = top, bottom = top, left = right] = (0, _splitCssValue.default)(rawValue);
+    return [['borderTopWidth', top], ['borderEndWidth', right], ['borderBottomWidth', bottom], ['borderStartWidth', left]];
+  },
+  borderRadius: rawValue => {
+    const [top, right = top, bottom = top, left = right] = (0, _splitCssValue.default)(rawValue);
+    return [['borderTopStartRadius', top], ['borderTopEndRadius', right], ['borderBottomEndRadius', bottom], ['borderBottomStartRadius', left]];
+  },
+  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]];
+  },
+  marginVertical: rawValue => {
+    return [['marginTop', rawValue], ['marginBottom', rawValue]];
+  },
+  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], ['paddingEnd', right], ['paddingBottom', bottom], ['paddingStart', left]];
+  },
+  paddingHorizontal: rawValue => {
+    return [['paddingStart', rawValue], ['paddingEnd', rawValue]];
+  },
+  paddingVertical: rawValue => {
+    return [['paddingTop', rawValue], ['paddingBottom', rawValue]];
+  }
+};
+var _default = expansions;
+exports.default = _default;

package/lib/preprocess-rules/null-out-longhand.js

@@ -0,0 +1,310 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _splitCssValue = _interopRequireDefault(require("../utils/split-css-value"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * 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.
+ *
+ * 
+ */
+
+/**
+ * Shorthand properties:
+ * - [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
+ * - [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
+ * - [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
+ * - [x] mask
+ * - [x] offset
+ * - [x] outline
+ * - [x] overflow
+ * - [x] padding
+ * - [x] place-content
+ * - [x] place-items
+ * - [x] place-self
+ * - [x] scroll-margin
+ * - [x] scroll-padding
+ * - [x] text-decoration
+ * - [x] text-emphasis
+ * - [x] transition
+ */
+
+const shorthands = {
+  all: _ => {
+    throw new Error('all is not supported');
+  },
+  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] = (0, _splitCssValue.default)(rawValue);
+    return [...shorthands.borderWidth(width), ...shorthands.borderStyle(style), ...shorthands.borderColor(color)];
+  },
+  // @Deprecated
+  borderInline: rawValue => {
+    if (typeof rawValue === 'number') {
+      return [['borderInlineWidth', rawValue], ['borderInlineStartWidth', null], ['borderInlineEndWidth', null]];
+    }
+    const [width, style, color] = (0, _splitCssValue.default)(rawValue);
+    return [...shorthands.borderInlineWidth(width), ...shorthands.borderInlineStyle(style), ...shorthands.borderInlineColor(color)];
+  },
+  // @Deprecated
+  borderBlock: rawValue => {
+    if (typeof rawValue === 'number') {
+      return [['borderBlockWidth', rawValue], ['borderTopWidth', null], ['borderBottomWidth', null]];
+    }
+    const [width, style, color] = (0, _splitCssValue.default)(rawValue);
+    return [...shorthands.borderBlockWidth(width), ...shorthands.borderBlockStyle(style), ...shorthands.borderBlockColor(color)];
+  },
+  // @Deprecated
+  borderTop: rawValue => {
+    if (typeof rawValue === 'number') {
+      return [['borderTopWidth', rawValue]];
+    }
+    const [width, style, color] = (0, _splitCssValue.default)(rawValue);
+    return [['borderTopWidth', width], ['borderTopStyle', style], ['borderTopColor', color]];
+  },
+  // @Deprecated
+  borderInlineEnd: rawValue => {
+    if (typeof rawValue === 'number') {
+      return [['borderInlineEndWidth', rawValue]];
+    }
+    const [width, style, color] = (0, _splitCssValue.default)(rawValue);
+    return [['borderInlineEndWidth', width], ['borderInlineEndStyle', style], ['borderInlineEndColor', color]];
+  },
+  // @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(' '));
+  },
+  // @Deprecated
+  borderBottom: rawValue => {
+    if (typeof rawValue === 'number') {
+      return [['borderBottomWidth', rawValue]];
+    }
+    const [width, style, color] = (0, _splitCssValue.default)(rawValue);
+    return [['borderBottomWidth', width], ['borderBottomStyle', style], ['borderBottomColor', color]];
+  },
+  // @Deprecated
+  borderInlineStart: rawValue => {
+    if (typeof rawValue === 'number') {
+      return [['borderInlineStartWidth', rawValue]];
+    }
+    const [width, style, color] = (0, _splitCssValue.default)(rawValue);
+    return [['borderInlineStartWidth', width], ['borderInlineStartStyle', style], ['borderInlineStartColor', color]];
+  },
+  // @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(' '));
+  },
+  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]],
+  borderInlineStartColor: value => [['borderInlineStartColor', value], ['borderLeftColor', null], ['borderRightColor', null]],
+  borderInlineEndColor: value => [['borderInlineEndColor', value], ['borderLeftColor', null], ['borderRightColor', null]],
+  borderInlineStartStyle: value => [['borderInlineStartStyle', value], ['borderLeftStyle', null], ['borderRightStyle', null]],
+  borderInlineEndStyle: value => [['borderInlineEndStyle', value], ['borderLeftStyle', null], ['borderRightStyle', null]],
+  borderInlineStartWidth: value => [['borderInlineStartWidth', value], ['borderLeftWidth', null], ['borderRightWidth', null]],
+  borderInlineEndWidth: value => [['borderInlineEndWidth', value], ['borderLeftWidth', null], ['borderRightWidth', null]],
+  borderLeftColor: value => [['borderLeftColor', value], ['borderInlineStartColor', null], ['borderInlineEndColor', null]],
+  borderRightColor: value => [['borderRightColor', value], ['borderInlineStartColor', null], ['borderInlineEndColor', null]],
+  borderLeftStyle: value => [['borderLeftStyle', value], ['borderInlineStartStyle', null], ['borderInlineEndStyle', null]],
+  borderRightStyle: value => [['borderRightStyle', value], ['borderInlineStartStyle', null], ['borderInlineEndStyle', null]],
+  borderLeftWidth: value => [['borderLeftWidth', value], ['borderInlineStartWidth', null], ['borderInlineEndWidth', null]],
+  borderRightWidth: value => [['borderRightWidth', value], ['borderInlineStartWidth', null], ['borderInlineEndWidth', null]],
+  borderRadius: value => {
+    const values = typeof value === 'number' ? [value] : (0, _splitCssValue.default)(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]];
+  },
+  borderStartStartRadius: value => [['borderStartStartRadius', value], ['borderTopLeftRadius', null], ['borderTopRightRadius', null]],
+  borderStartEndRadius: value => [['borderStartEndRadius', value], ['borderTopLeftRadius', null], ['borderTopRightRadius', null]],
+  borderEndStartRadius: value => [['borderEndStartRadius', value], ['borderBottomLeftRadius', null], ['borderBottomRightRadius', null]],
+  borderEndEndRadius: value => [['borderEndEndRadius', value], ['borderBottomLeftRadius', null], ['borderBottomRightRadius', null]],
+  borderTopLeftRadius: value => [['borderTopLeftRadius', value], ['borderStartStartRadius', null], ['borderStartEndRadius', null]],
+  borderTopRightRadius: value => [['borderTopRightRadius', value], ['borderStartStartRadius', null], ['borderStartEndRadius', null]],
+  borderBottomLeftRadius: value => [['borderBottomLeftRadius', value], ['borderEndStartRadius', null], ['borderEndEndRadius', null]],
+  borderBottomRightRadius: value => [['borderBottomRightRadius', value], ['borderEndStartRadius', null], ['borderEndEndRadius', null]],
+  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]],
+  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]],
+  insetInlineStart: value => [['insetInlineStart', value], ['left', null], ['right', null]],
+  insetInlineEnd: value => [['insetInlineEnd', value], ['left', null], ['right', null]],
+  left: value => [['left', value], ['insetInlineStart', null], ['insetInlineEnd', null]],
+  right: value => [['right', value], ['insetInlineStart', null], ['insetInlineEnd', null]],
+  listStyle: value => [['listStyle', value], ['listStyleImage', null], ['listStylePosition', null], ['listStyleType', null]],
+  margin: value => {
+    const values = typeof value === 'number' ? [value] : (0, _splitCssValue.default)(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]];
+  },
+  marginInline: value => [['marginInline', value], ['marginInlineStart', null], ['marginLeft', null], ['marginInlineEnd', null], ['marginRight', null]],
+  marginBlock: value => [['marginBlock', value], ['marginTop', null], ['marginBottom', null]],
+  marginInlineStart: value => [['marginInlineStart', value], ['marginLeft', null], ['marginRight', null]],
+  marginInlineEnd: value => [['marginInlineEnd', value], ['marginLeft', null], ['marginRight', null]],
+  marginLeft: value => [['marginLeft', value], ['marginInlineStart', null], ['marginInlineEnd', null]],
+  marginRight: value => [['marginRight', value], ['marginInlineStart', null], ['marginInlineEnd', 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] : (0, _splitCssValue.default)(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]];
+  },
+  paddingInline: rawValue => [['paddingInline', rawValue], ['paddingStart', null], ['paddingLeft', null], ['paddingEnd', null], ['paddingRight', null]],
+  paddingBlock: rawValue => [['paddingBlock', rawValue], ['paddingTop', null], ['paddingBottom', null]],
+  paddingInlineStart: value => [['paddingInlineStart', value], ['paddingLeft', null], ['paddingRight', null]],
+  paddingInlineEnd: value => [['paddingInlineEnd', value], ['paddingLeft', null], ['paddingRight', null]],
+  paddingLeft: value => [['paddingLeft', value], ['paddingInlineStart', null], ['paddingInlineEnd', null]],
+  paddingRight: value => [['paddingRight', value], ['paddingInlineStart', null], ['paddingInlineEnd', 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]],
+  borderBlockStartStyle: value => [['borderTopStyle', value]],
+  borderBlockEndStyle: value => [['borderBottomStyle', value]],
+  borderBlockStartWidth: value => [['borderTopWidth', value]],
+  borderBlockEndWidth: value => [['borderBottomWidth', value]],
+  borderStartColor: shorthands.borderInlineStartColor,
+  borderEndColor: shorthands.borderInlineEndColor,
+  borderStartStyle: shorthands.borderInlineStartStyle,
+  borderEndStyle: shorthands.borderInlineEndStyle,
+  borderStartWidth: shorthands.borderInlineStartWidth,
+  borderEndWidth: shorthands.borderInlineEndWidth,
+  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: shorthands.marginInlineStart,
+  marginEnd: shorthands.marginInlineEnd,
+  marginHorizontal: shorthands.marginInline,
+  marginVertical: shorthands.marginBlock,
+  paddingBlockStart: rawValue => [['paddingTop', rawValue]],
+  paddingBlockEnd: rawValue => [['paddingBottom', rawValue]],
+  paddingStart: shorthands.paddingInlineStart,
+  paddingEnd: shorthands.paddingInlineEnd,
+  paddingHorizontal: shorthands.paddingInline,
+  paddingVertical: shorthands.paddingBlock,
+  insetBlockStart: value => [['top', value]],
+  insetBlockEnd: value => [['bottom', value]],
+  start: shorthands.insetInlineStart,
+  end: shorthands.insetInlineEnd
+};
+const expansions = {
+  ...shorthands,
+  ...aliases
+};
+var _default = expansions;
+exports.default = _default;

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

@@ -0,0 +1,135 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _splitCssValue = _interopRequireDefault(require("../utils/split-css-value"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * 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 shorthands = {
+  all: _ => {
+    throw new Error('all is not supported');
+  },
+  animation: value => {
+    throw new Error('animation is not supported');
+  },
+  background: value => {
+    throw new Error('background is not supported. Use background-color, border-image etc. instead.');
+  },
+  border: rawValue => {
+    throw new Error('border is not supported. Use border-width, border-style and border-color instead.');
+  },
+  borderInline: rawValue => {
+    throw new Error('borderInline is not supported. Use borderInlineWidth, borderInlineStyle and borderInlineColor instead.');
+  },
+  // @Deprecated
+  borderBlock: rawValue => {
+    throw new Error('borderBlock is not supported. Use borderBlockWidth, borderBlockStyle and borderBlockColor instead.');
+  },
+  // @Deprecated
+  borderTop: rawValue => {
+    throw new Error('borderTop is not supported. Use borderTopWidth, borderTopStyle and borderTopColor instead.');
+  },
+  // @Deprecated
+  borderInlineEnd: rawValue => {
+    throw new Error('borderInlineEnd is not supported. Use borderInlineEndWidth, borderInlineEndStyle and borderInlineEndColor instead.');
+  },
+  // @Deprecated
+  borderRight: rawValue => {
+    throw new Error('borderRight is not supported. Use borderRightWidth, borderRightStyle and borderRightColor instead.');
+  },
+  // @Deprecated
+  borderBottom: rawValue => {
+    throw new Error('borderBottom is not supported. Use borderBottomWidth, borderBottomStyle and borderBottomColor instead.');
+  },
+  // @Deprecated
+  borderInlineStart: rawValue => {
+    throw new Error('borderInlineStart is not supported. Use borderInlineStartWidth, borderInlineStartStyle and borderInlineStartColor instead.');
+  },
+  // @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(' '));
+  },
+  margin: value => {
+    const values = (0, _splitCssValue.default)(value);
+    if (values.length === 1) {
+      return [['margin', values[0]]];
+    } else {
+      throw new Error('margin shorthand with multiple values is not supported. Use marginTop, marginInlineEnd, marginBottom and marginInlineStart instead.');
+    }
+  },
+  padding: rawValue => {
+    const values = (0, _splitCssValue.default)(rawValue);
+    if (values.length === 1) {
+      return [['padding', values[0]]];
+    }
+    throw new Error('padding shorthand with multiple values is not supported. Use paddingTop, paddingInlineEnd, paddingBottom and paddingInlineStart instead.');
+  }
+};
+const aliases = {
+  // @UNSUPPORTED
+  borderHorizontal: shorthands.borderInline,
+  // @UNSUPPORTED
+  borderVertical: shorthands.borderBlock,
+  // @UNSUPPORTED
+  borderBlockStart: shorthands.borderTop,
+  // @UNSUPPORTED
+  borderEnd: shorthands.borderInlineEnd,
+  // @UNSUPPORTED
+  borderBlockEnd: shorthands.borderBottom,
+  // @UNSUPPORTED
+  borderStart: shorthands.borderInlineStart,
+  borderHorizontalWidth: value => [['borderInlineWidth', value]],
+  borderHorizontalStyle: value => [['borderInlineStyle', value]],
+  borderHorizontalColor: value => [['borderInlineColor', value]],
+  borderVerticalWidth: value => [['borderBlockWidth', value]],
+  borderVerticalStyle: value => [['borderBlockStyle', value]],
+  borderVerticalColor: value => [['borderBlockColor', value]],
+  borderBlockStartColor: value => [['borderTopColor', value]],
+  borderBlockEndColor: value => [['borderBottomColor', value]],
+  borderBlockStartStyle: value => [['borderTopStyle', value]],
+  borderBlockEndStyle: value => [['borderBottomStyle', value]],
+  borderBlockStartWidth: value => [['borderTopWidth', value]],
+  borderBlockEndWidth: value => [['borderBottomWidth', value]],
+  borderStartColor: value => [['borderInlineStartColor', value]],
+  borderEndColor: value => [['borderInlineEndColor', value]],
+  borderStartStyle: value => [['borderInlineStartStyle', value]],
+  borderEndStyle: value => [['borderInlineEndStyle', value]],
+  borderStartWidth: value => [['borderInlineStartWidth', value]],
+  borderEndWidth: value => [['borderInlineEndWidth', value]],
+  borderTopStartRadius: value => [['borderStartStartRadius', value]],
+  borderTopEndRadius: value => [['borderStartEndRadius', value]],
+  borderBottomStartRadius: value => [['borderEndStartRadius', value]],
+  borderBottomEndRadius: value => [['borderEndEndRadius', value]],
+  marginBlockStart: value => [['marginTop', value]],
+  marginBlockEnd: value => [['marginBottom', value]],
+  marginStart: value => [['marginInlineStart', value]],
+  marginEnd: value => [['marginInlineEnd', value]],
+  marginHorizontal: value => [['marginInline', value]],
+  marginVertical: value => [['marginBlock', value]],
+  paddingBlockStart: rawValue => [['paddingTop', rawValue]],
+  paddingBlockEnd: rawValue => [['paddingBottom', rawValue]],
+  paddingStart: value => [['paddingInlineStart', value]],
+  paddingEnd: value => [['paddingInlineEnd', value]],
+  paddingHorizontal: value => [['paddingInline', value]],
+  paddingVertical: value => [['paddingBlock', value]],
+  insetBlockStart: value => [['top', value]],
+  insetBlockEnd: value => [['bottom', value]],
+  start: value => [['insetInlineStart', value]],
+  end: value => [['insetInlineEnd', value]]
+};
+const expansions = {
+  ...shorthands,
+  ...aliases
+};
+var _default = expansions;
+exports.default = _default;