@stylexjs/shared 0.2.0-beta.21 → 0.2.0-beta.22

package/lib/preprocess-rules/application-order.js

@@ -8,163 +8,140 @@ var _splitCssValue = _interopRequireDefault(require("../utils/split-css-value"))
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const shorthands = {
   all: _ => {
-    throw new Error("all is not supported");
+    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]],
-  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)];
+  animation: value => [['animation', value], ['animationComposition', null], ['animationName', null], ['animationDuration', null], ['animationTimingFunction', null], ['animationDelay', null], ['animationIterationCount', null], ['animationDirection', null], ['animationFillMode', null], ['animationPlayState', null], ...shorthands.animationRange(null), ['animationTimeline', null]],
+  animationRange: value => [['animationRange', value], ['animationRangeEnd', null], ['animationRangeStart', null]],
+  background: value => [['background', value], ['backgroundAttachment', null], ['backgroundClip', null], ['backgroundColor', null], ['backgroundImage', null], ['backgroundOrigin', null], ...shorthands.backgroundPosition(null), ['backgroundRepeat', null], ['backgroundSize', null]],
+  backgroundPosition: value => [['backgroundPosition', value], ['backgroundPositionX', null], ['backgroundPositionY', null]],
+  border: _rawValue => {
+    throw new Error('`border` shorthand is not supported. Use `borderWidth`, `borderStyle` and `borderColor` instead.');
   },
-  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)];
+  borderInline: _rawValue => {
+    throw new Error('`borderInline` shorthand is not supported. Use `borderInlineWidth`, `borderInlineStyle` and `borderInlineColor` instead.');
   },
-  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)];
+  borderBlock: _rawValue => {
+    throw new Error('`borderBlock` shorthand is not supported. Use `borderBlockWidth`, `borderBlockStyle` and `borderBlockColor` instead.');
   },
-  borderTop: rawValue => {
-    if (typeof rawValue === "number") {
-      return [["borderTopWidth", rawValue]];
-    }
-    const [width, style, color] = (0, _splitCssValue.default)(rawValue);
-    return [["borderTopWidth", width], ["borderTopStyle", style], ["borderTopColor", color]];
+  borderTop: _rawValue => {
+    throw new Error(['`borderTop` is not supported.', 'Use `borderTopWidth`, `borderTopStyle` and `borderTopColor`,'].join(' '));
   },
-  borderInlineEnd: rawValue => {
-    if (typeof rawValue === "number") {
-      return [["borderInlineEndWidth", rawValue]];
-    }
-    const [width, style, color] = (0, _splitCssValue.default)(rawValue);
-    return [["borderInlineEndWidth", width], ["borderInlineEndStyle", style], ["borderInlineEndColor", color]];
+  borderInlineEnd: _rawValue => {
+    throw new Error('`borderInlineEnd` shorthand is not supported. Use `borderInlineEndWidth`, `borderInlineEndStyle` and `borderInlineEndColor` instead.');
   },
   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(" "));
+    throw new Error('`borderRight` shorthand is not supported. Use `borderRightWidth`, `borderRightStyle` and `borderRightColor` instead.');
   },
-  borderBottom: rawValue => {
-    if (typeof rawValue === "number") {
-      return [["borderBottomWidth", rawValue]];
-    }
-    const [width, style, color] = (0, _splitCssValue.default)(rawValue);
-    return [["borderBottomWidth", width], ["borderBottomStyle", style], ["borderBottomColor", color]];
+  borderBottom: _rawValue => {
+    throw new Error('`borderBottom` shorthand is not supported. Use `borderBottomWidth`, `borderBottomStyle` and `borderBottomColor` instead.');
   },
-  borderInlineStart: rawValue => {
-    if (typeof rawValue === "number") {
-      return [["borderInlineStartWidth", rawValue]];
-    }
-    const [width, style, color] = (0, _splitCssValue.default)(rawValue);
-    return [["borderInlineStartWidth", width], ["borderInlineStartStyle", style], ["borderInlineStartColor", color]];
+  borderInlineStart: _rawValue => {
+    throw new Error('`borderInlineStart` shorthand is not supported. Use `borderInlineStartWidth`, `borderInlineStartStyle` and `borderInlineStartColor` instead.');
   },
   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], ["borderStartStartRadius", null], ["borderStartEndRadius", null], ["borderEndStartRadius", null], ["borderEndEndRadius", null], ["borderTopLeftRadius", null], ["borderTopRightRadius", null], ["borderBottomLeftRadius", null], ["borderBottomRightRadius", null]];
-    }
-    const [startStart, startEnd = startStart, endEnd = startStart, endStart = startEnd] = values;
-    return [["borderStartStartRadius", startStart], ["borderStartEndRadius", startEnd], ["borderEndEndRadius", endEnd], ["borderEndStartRadius", endStart], ["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]],
-  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]];
-    }
-    const [top, right = top, bottom = top, left = right] = values;
-    return [["marginTop", top], ["marginInlineEnd", right], ["marginBottom", bottom], ["marginInlineStart", left], ["marginLeft", null], ["marginRight", null]];
+    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(' '));
   },
-  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]],
+  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], ...shorthands.borderInlineColor(null), ...shorthands.borderBlockColor(null)],
+  borderStyle: value => [['borderStyle', value], ...shorthands.borderInlineStyle(null), ...shorthands.borderBlockStyle(null)],
+  borderWidth: value => [['borderWidth', value], ...shorthands.borderInlineWidth(null), ...shorthands.borderBlockWidth(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 => [['borderRadius', value], ['borderStartStartRadius', null], ['borderStartEndRadius', null], ['borderEndStartRadius', null], ['borderEndEndRadius', null], ['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]],
+  borderImage: value => [['borderImage', value], ['borderImageOutset', null], ['borderImageRepeat', null], ['borderImageSlice', null], ['borderImageSource', null], ['borderImageWidth', null]],
+  columnRule: value => [['columnRule', value], ['columnRuleColor', null], ['columnRuleStyle', null], ['columnRuleWidth', null]],
+  columns: value => [['columns', value], ['columnCount', null], ['columnWidth', null]],
+  container: value => [['container', value], ['containerName', null], ['containerType', null]],
+  containIntrinsicSize: value => [['containIntrinsicSize', value], ['containIntrinsicWidth', null], ['containIntrinsicHeight', null]],
+  flex: value => [['flex', value], ['flexGrow', null], ['flexShrink', null], ['flexBasis', null]],
+  flexFlow: value => [['flexFlow', value], ['flexDirection', null], ['flexWrap', null]],
+  font: value => [['font', value], ['fontFamily', null], ['fontSize', null], ['fontStretch', null], ['fontStyle', null], ...shorthands.fontVariant(null), ['fontWeight', null], ['lineHeight', null]],
+  fontVariant: value => [['fontVariant', value], ['fontVariantAlternates', null], ['fontVariantCaps', null], ['fontVariantEastAsian', null], ['fontVariantEmoji', null], ['fontVariantLigatures', null], ['fontVariantNumeric', null], ['fontVariantPosition', null]],
+  gap: value => [['gap', value], ['rowGap', null], ['columnGap', null]],
+  grid: value => [['grid', value], ...shorthands.gridTemplate(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], ...shorthands.insetInline(null), ...shorthands.insetBlock(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 => [['margin', value], ...shorthands.marginInline(null), ...shorthands.marginBlock(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]],
+  maskBorder: value => [['maskBorder', value], ['maskBorderMode', null], ['maskBorderOutset', null], ['maskBorderRepeat', null], ['maskBorderSlice', null], ['maskBorderSource', null], ['maskBorderWidth', null]],
+  offset: value => [['offset', value], ['offsetAnchor', null], ['offsetDistance', null], ['offsetPath', null], ['offsetPosition', null], ['offsetRotate', null]],
+  outline: value => [['outline', value], ['outlineColor', null], ['outlineOffset', 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);
+    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]];
+      return [['padding', values[0]], ['paddingStart', null], ['paddingLeft', null], ['paddingEnd', null], ['paddingRight', null], ['paddingTop', null], ['paddingBottom', null]];
     }
     const [top, right = top, bottom = top, left = right] = values;
-    return [["paddingTop", top], ["paddingEnd", right], ["paddingBottom", bottom], ["paddingStart", left]];
+    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]]
+  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], ...shorthands.scrollMarginBlock(null), ...shorthands.scrollMarginInline(null)],
+  scrollMarginBlock: value => [['scrollMarginBlock', value], ['scrollMarginTop', null], ['scrollMarginBottom', null]],
+  scrollMarginInline: value => [['scrollMarginInline', value], ['scrollMarginInlineStart', null], ['scrollMarginInlineEnd', null], ['scrollMarginLeft', null], ['scrollMarginRight', null]],
+  scrollMarginInlineStart: value => [['scrollMarginInlineStart', value], ['scrollMarginLeft', null], ['scrollMarginRight', null]],
+  scrollMarginInlineEnd: value => [['scrollMarginInlineEnd', value], ['scrollMarginLeft', null], ['scrollMarginRight', null]],
+  scrollMarginLeft: value => [['scrollMarginLeft', value], ['scrollMarginInlineStart', null], ['scrollMarginInlineEnd', null]],
+  scrollMarginRight: value => [['scrollMarginRight', value], ['scrollMarginInlineStart', null], ['scrollMarginInlineEnd', null]],
+  scrollPadding: value => [['scrollPadding', value], ...shorthands.scrollPaddingBlock(null), ...shorthands.scrollPaddingInline(null)],
+  scrollPaddingBlock: value => [['scrollPaddingBlock', value], ['scrollPaddingTop', null], ['scrollPaddingBottom', null]],
+  scrollPaddingInline: value => [['scrollPaddingInline', value], ['scrollPaddingInlineStart', null], ['scrollPaddingInlineEnd', null], ['scrollPaddingLeft', null], ['scrollPaddingRight', null]],
+  scrollPaddingInlineStart: value => [['scrollPaddingInlineStart', value], ['scrollPaddingLeft', null], ['scrollPaddingRight', null]],
+  scrollPaddingInlineEnd: value => [['scrollPaddingInlineEnd', value], ['scrollPaddingLeft', null], ['scrollPaddingRight', null]],
+  scrollPaddingLeft: value => [['scrollPaddingLeft', value], ['scrollPaddingInlineStart', null], ['scrollPaddingInlineEnd', null]],
+  scrollPaddingRight: value => [['scrollPaddingRight', value], ['scrollPaddingInlineStart', null], ['scrollPaddingInlineEnd', null]],
+  scrollSnapType: value => [['scrollSnapType', value], ['scrollSnapTypeX', null], ['scrollSnapTypeY', 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], ['transitionBehavior', null], ['transitionDelay', null], ['transitionDuration', null], ['transitionProperty', null], ['transitionTimingFunction', null]]
 };
 const aliases = {
   borderHorizontal: shorthands.borderInline,
@@ -173,48 +150,57 @@ const aliases = {
   borderEnd: shorthands.borderInlineEnd,
   borderBlockEnd: shorthands.borderBottom,
   borderStart: shorthands.borderInlineStart,
-  blockSize: val => [["height", val]],
-  inlineSize: val => [["width", val]],
-  minBlockSize: val => [["minHeight", val]],
-  minInlineSize: val => [["minWidth", val]],
-  maxBlockSize: val => [["maxHeight", val]],
-  maxInlineSize: val => [["maxWidth", val]],
+  blockSize: val => [['height', val]],
+  inlineSize: val => [['width', val]],
+  minBlockSize: val => [['minHeight', val]],
+  minInlineSize: val => [['minWidth', val]],
+  maxBlockSize: val => [['maxHeight', val]],
+  maxInlineSize: val => [['maxWidth', val]],
   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]],
+  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]],
+  borderTopStartRadius: value => [['borderStartStartRadius', value]],
+  borderTopEndRadius: value => [['borderStartEndRadius', value]],
+  borderBottomStartRadius: value => [['borderEndStartRadius', value]],
+  borderBottomEndRadius: value => [['borderEndEndRadius', value]],
+  containIntrinsicBlockSize: value => [['containIntrinsicHeight', value]],
+  containIntrinsicInlineSize: value => [['containIntrinsicWidth', value]],
+  gridGap: shorthands.gap,
+  gridRowGap: value => [['rowGap', value]],
+  gridColumnGap: value => [['columnGap', 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]],
+  overflowBlock: value => [['overflowY', value]],
+  overflowInline: value => [['overflowX', value]],
+  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]],
+  scrollMarginBlockStart: value => [['scrollMarginTop', value]],
+  scrollMarginBlockEnd: value => [['scrollMarginBottom', value]],
+  insetBlockStart: value => [['top', value]],
+  insetBlockEnd: value => [['bottom', value]],
   start: shorthands.insetInlineStart,
   end: shorthands.insetInlineEnd
 };
@@ -222,5 +208,4 @@ const expansions = {
   ...shorthands,
   ...aliases
 };
-var _default = expansions;
-exports.default = _default;
+var _default = exports.default = expansions;

package/lib/preprocess-rules/application-order.js.flow

@@ -65,15 +65,17 @@ type TReturn = $ReadOnlyArray<[string, TStyleValue]>;
 declare const shorthands: {
   all: (_: TStyleValue) => TReturn,
   animation: (value: TStyleValue) => Array<[string, TStyleValue]>,
+  animationRange: (value: TStyleValue) => TReturn,
   background: (value: TStyleValue) => TReturn,
-  border: (rawValue: TStyleValue) => TReturn,
-  borderInline: (rawValue: TStyleValue) => TReturn,
-  borderBlock: (rawValue: TStyleValue) => TReturn,
-  borderTop: (rawValue: TStyleValue) => TReturn,
-  borderInlineEnd: (rawValue: TStyleValue) => TReturn,
+  backgroundPosition: (value: TStyleValue) => TReturn,
+  border: (_rawValue: TStyleValue) => TReturn,
+  borderInline: (_rawValue: TStyleValue) => TReturn,
+  borderBlock: (_rawValue: TStyleValue) => TReturn,
+  borderTop: (_rawValue: TStyleValue) => TReturn,
+  borderInlineEnd: (_rawValue: TStyleValue) => TReturn,
   borderRight: (_rawValue: TStyleValue) => TReturn,
-  borderBottom: (rawValue: TStyleValue) => TReturn,
-  borderInlineStart: (rawValue: TStyleValue) => TReturn,
+  borderBottom: (_rawValue: TStyleValue) => TReturn,
+  borderInlineStart: (_rawValue: TStyleValue) => TReturn,
   borderLeft: (_rawValue: TStyleValue) => TReturn,
   borderInlineWidth: (rawValue: TStyleValue) => TReturn,
   borderInlineStyle: (rawValue: TStyleValue) => TReturn,
@@ -105,12 +107,15 @@ declare const shorthands: {
   borderTopRightRadius: (value: TStyleValue) => TReturn,
   borderBottomLeftRadius: (value: TStyleValue) => TReturn,
   borderBottomRightRadius: (value: TStyleValue) => TReturn,
+  borderImage: (value: TStyleValue) => TReturn,
   columnRule: (value: TStyleValue) => TReturn,
   columns: (value: TStyleValue) => TReturn,
   container: (value: TStyleValue) => TReturn,
+  containIntrinsicSize: (value: TStyleValue) => TReturn,
   flex: (value: TStyleValue) => TReturn,
   flexFlow: (value: TStyleValue) => TReturn,
   font: (value: TStyleValue) => TReturn,
+  fontVariant: (value: TStyleValue) => TReturn,
   gap: (value: TStyleValue) => TReturn,
   grid: (value: TStyleValue) => TReturn,
   gridArea: (value: TStyleValue) => TReturn,
@@ -133,6 +138,7 @@ declare const shorthands: {
   marginLeft: (value: TStyleValue) => TReturn,
   marginRight: (value: TStyleValue) => TReturn,
   mask: (value: TStyleValue) => TReturn,
+  maskBorder: (value: TStyleValue) => TReturn,
   offset: (value: TStyleValue) => TReturn,
   outline: (value: TStyleValue) => TReturn,
   overflow: (value: TStyleValue) => TReturn,
@@ -147,7 +153,20 @@ declare const shorthands: {
   placeItems: (value: TStyleValue) => TReturn,
   placeSelf: (value: TStyleValue) => TReturn,
   scrollMargin: (value: TStyleValue) => TReturn,
+  scrollMarginBlock: (value: TStyleValue) => TReturn,
+  scrollMarginInline: (value: TStyleValue) => TReturn,
+  scrollMarginInlineStart: (value: TStyleValue) => TReturn,
+  scrollMarginInlineEnd: (value: TStyleValue) => TReturn,
+  scrollMarginLeft: (value: TStyleValue) => TReturn,
+  scrollMarginRight: (value: TStyleValue) => TReturn,
   scrollPadding: (value: TStyleValue) => TReturn,
+  scrollPaddingBlock: (value: TStyleValue) => TReturn,
+  scrollPaddingInline: (value: TStyleValue) => TReturn,
+  scrollPaddingInlineStart: (value: TStyleValue) => TReturn,
+  scrollPaddingInlineEnd: (value: TStyleValue) => TReturn,
+  scrollPaddingLeft: (value: TStyleValue) => TReturn,
+  scrollPaddingRight: (value: TStyleValue) => TReturn,
+  scrollSnapType: (value: TStyleValue) => TReturn,
   scrollTimeline: (value: TStyleValue) => TReturn,
   textDecoration: (value: TStyleValue) => TReturn,
   textEmphasis: (value: TStyleValue) => TReturn,
@@ -189,18 +208,27 @@ declare const aliases: {
   borderTopEndRadius: (value: TStyleValue) => TReturn,
   borderBottomStartRadius: (value: TStyleValue) => TReturn,
   borderBottomEndRadius: (value: TStyleValue) => TReturn,
+  containIntrinsicBlockSize: (value: TStyleValue) => TReturn,
+  containIntrinsicInlineSize: (value: TStyleValue) => TReturn,
+  gridGap: $FlowFixMe,
+  gridRowGap: (value: TStyleValue) => TReturn,
+  gridColumnGap: (value: TStyleValue) => TReturn,
   marginBlockStart: (value: TStyleValue) => TReturn,
   marginBlockEnd: (value: TStyleValue) => TReturn,
   marginStart: $FlowFixMe,
   marginEnd: $FlowFixMe,
   marginHorizontal: $FlowFixMe,
   marginVertical: $FlowFixMe,
+  overflowBlock: (value: TStyleValue) => TReturn,
+  overflowInline: (value: TStyleValue) => TReturn,
   paddingBlockStart: (rawValue: TStyleValue) => TReturn,
   paddingBlockEnd: (rawValue: TStyleValue) => TReturn,
   paddingStart: $FlowFixMe,
   paddingEnd: $FlowFixMe,
   paddingHorizontal: $FlowFixMe,
   paddingVertical: $FlowFixMe,
+  scrollMarginBlockStart: (value: TStyleValue) => TReturn,
+  scrollMarginBlockEnd: (value: TStyleValue) => TReturn,
   insetBlockStart: (value: TStyleValue) => TReturn,
   insetBlockEnd: (value: TStyleValue) => TReturn,
   start: $FlowFixMe,

package/lib/preprocess-rules/basic-validation.js

@@ -17,12 +17,12 @@ function validateNamespace(namespace) {
   const ns = namespace;
   for (const key in ns) {
     const val = ns[key];
-    if (val === null || typeof val === "string" || typeof val === "number") {
+    if (val === null || typeof val === 'string' || typeof val === 'number') {
       continue;
     }
     if (Array.isArray(val)) {
       for (const v of val) {
-        if (v === null || typeof v === "string" || typeof v === "number") {
+        if (v === null || typeof v === 'string' || typeof v === 'number') {
           continue;
         }
         throw new Error(messages.ILLEGAL_PROP_ARRAY_VALUE);
@@ -36,7 +36,7 @@ function validateNamespace(namespace) {
       throw new Error(messages.ONLY_TOP_LEVEL_INLCUDES);
     }
     if ((0, _objectUtils.isPlainObject)(val)) {
-      if (key.startsWith("@") || key.startsWith(":")) {
+      if (key.startsWith('@') || key.startsWith(':')) {
         if (conditions.includes(key)) {
           throw new Error(messages.DUPLICATE_CONDITIONAL);
         }
@@ -53,18 +53,18 @@ function validateConditionalStyles(val) {
   let conditions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   for (const key in val) {
     const v = val[key];
-    if (!(key.startsWith("@") || key.startsWith(":") || key === "default")) {
+    if (!(key.startsWith('@') || key.startsWith(':') || key === 'default')) {
       throw new Error(messages.INVALID_PSEUDO_OR_AT_RULE);
     }
     if (conditions.includes(key)) {
       throw new Error(messages.DUPLICATE_CONDITIONAL);
     }
-    if (v === null || typeof v === "string" || typeof v === "number") {
+    if (v === null || typeof v === 'string' || typeof v === 'number') {
       continue;
     }
     if (Array.isArray(v)) {
       for (const vv of v) {
-        if (vv === null || typeof vv === "string" || typeof vv === "number") {
+        if (vv === null || typeof vv === 'string' || typeof vv === 'number') {
           continue;
         }
         throw new Error(messages.ILLEGAL_PROP_VALUE);

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

@@ -16,11 +16,11 @@ function _flattenRawStyleObject(style, pseudos, atRules, options) {
   const flattened = [];
   for (const key in style) {
     const value = style[key];
-    if (typeof value === "object" && value instanceof _stylexInclude.IncludedStyles) {
+    if (typeof value === 'object' && value instanceof _stylexInclude.IncludedStyles) {
       flattened.push([key, new _PreRule.PreIncludedStylesRule(value)]);
       continue;
     }
-    if (value === null || typeof value === "string" || typeof value === "number") {
+    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) {
@@ -65,15 +65,15 @@ function _flattenRawStyleObject(style, pseudos, atRules, options) {
       });
       continue;
     }
-    if (typeof value === "object" && !key.startsWith(":") && !key.startsWith("@")) {
+    if (typeof value === 'object' && !key.startsWith(':') && !key.startsWith('@')) {
       const equivalentPairs = {};
       for (const condition in value) {
         const innerValue = value[condition];
         const pseudosToPassDown = [...pseudos];
         const atRulesToPassDown = [...atRules];
-        if (condition.startsWith(":")) {
+        if (condition.startsWith(':')) {
           pseudosToPassDown.push(condition);
-        } else if (condition.startsWith("@")) {
+        } else if (condition.startsWith('@')) {
           atRulesToPassDown.push(condition);
         }
         const pairs = _flattenRawStyleObject({
@@ -81,7 +81,7 @@ function _flattenRawStyleObject(style, pseudos, atRules, options) {
         }, pseudosToPassDown, atRulesToPassDown, options);
         for (const [property, preRule] of pairs) {
           if (preRule instanceof _PreRule.PreIncludedStylesRule) {
-            throw new Error("stylex.include can only be used at the top-level");
+            throw new Error('stylex.include can only be used at the top-level');
           }
           if (equivalentPairs[property] == null) {
             equivalentPairs[property] = {
@@ -101,17 +101,17 @@ function _flattenRawStyleObject(style, pseudos, atRules, options) {
         flattened.push([property, _PreRule.PreRuleSet.create(rules)]);
       }
     }
-    if (typeof value === "object" && (key.startsWith(":") || key.startsWith("@"))) {
+    if (typeof value === 'object' && (key.startsWith(':') || key.startsWith('@'))) {
       const pseudosToPassDown = [...pseudos];
       const atRulesToPassDown = [...atRules];
-      if (key.startsWith(":")) {
+      if (key.startsWith(':')) {
         pseudosToPassDown.push(key);
-      } else if (key.startsWith("@")) {
+      } else if (key.startsWith('@')) {
         atRulesToPassDown.push(key);
       }
       const pairs = _flattenRawStyleObject(value, pseudosToPassDown, atRulesToPassDown, options);
       for (const [property, preRule] of pairs) {
-        flattened.push([key + "_" + property, preRule]);
+        flattened.push([key + '_' + property, preRule]);
       }
     }
   }