@stylexjs/shared 0.2.0-beta.9 → 0.3.0

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

@@ -0,0 +1,64 @@
+/**
+ * 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 { InjectableStyle, StyleXOptions } from '../common-types';
+import type { IncludedStyles } from '../stylex-include';
+
+export type ComputedStyle = null | $ReadOnly<[string, InjectableStyle]>;
+
+// The classes in this file are used to represent objects that
+// can be compiled into one or CSS rules.
+//
+// These are thin wrappers around the "values" in Raw Style Objects
+// with all the metadata needed to compile them into CSS.
+export interface IPreRule {
+  compiled(
+    options: StyleXOptions,
+  ): IncludedStyles | $ReadOnlyArray<ComputedStyle>;
+  equals(other: IPreRule): boolean;
+}
+
+export type AnyPreRule = NullPreRule | PreRule | PreRuleSet;
+
+declare export class NullPreRule implements IPreRule {
+  compiled(_options: StyleXOptions): [null];
+  equals(other: IPreRule): boolean;
+}
+
+declare export class PreIncludedStylesRule implements IPreRule {
+  +includedStyles: IncludedStyles;
+  constructor(IncludedStyles: IncludedStyles): void;
+  equals(other: IPreRule): boolean;
+  compiled(_options: StyleXOptions): IncludedStyles;
+}
+
+declare export class PreRule implements IPreRule {
+  +property: string;
+  +value: string | number | $ReadOnlyArray<string | number>;
+  +pseudos: $ReadOnlyArray<string>;
+  +atRules: $ReadOnlyArray<string>;
+  constructor(
+    property: string,
+    value: string | number | $ReadOnlyArray<string | number>,
+    pseudos?: ?$ReadOnlyArray<string>,
+    atRules?: ?$ReadOnlyArray<string>,
+  ): void;
+  compiled(options: StyleXOptions): $ReadOnlyArray<[string, InjectableStyle]>;
+  equals(other: IPreRule): boolean;
+}
+
+declare export class PreRuleSet implements IPreRule {
+  +rules: $ReadOnlyArray<PreRule | NullPreRule>;
+  constructor(rules: $ReadOnlyArray<PreRule | NullPreRule>): void;
+  static create(
+    rules: $ReadOnlyArray<PreRule | NullPreRule | PreRuleSet>,
+  ): AnyPreRule;
+  compiled(options: StyleXOptions): $ReadOnlyArray<ComputedStyle>;
+  equals(other: IPreRule): boolean;
+}

package/lib/preprocess-rules/application-order.d.ts

@@ -0,0 +1,290 @@
+/**
+ * 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';
+/**
+ * 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
+ */
+
+/**
+ * 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
+ */
+
+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;
+  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;
+  borderLeft: (_rawValue: TStyleValue) => TReturn;
+  borderInlineWidth: (rawValue: TStyleValue) => TReturn;
+  borderInlineStyle: (rawValue: TStyleValue) => TReturn;
+  borderInlineColor: (rawValue: TStyleValue) => TReturn;
+  borderBlockWidth: (rawValue: TStyleValue) => TReturn;
+  borderBlockStyle: (rawValue: TStyleValue) => TReturn;
+  borderBlockColor: (rawValue: TStyleValue) => TReturn;
+  borderColor: (value: TStyleValue) => TReturn;
+  borderStyle: (value: TStyleValue) => TReturn;
+  borderWidth: (value: TStyleValue) => TReturn;
+  borderInlineStartColor: (value: TStyleValue) => TReturn;
+  borderInlineEndColor: (value: TStyleValue) => TReturn;
+  borderInlineStartStyle: (value: TStyleValue) => TReturn;
+  borderInlineEndStyle: (value: TStyleValue) => TReturn;
+  borderInlineStartWidth: (value: TStyleValue) => TReturn;
+  borderInlineEndWidth: (value: TStyleValue) => TReturn;
+  borderLeftColor: (value: TStyleValue) => TReturn;
+  borderRightColor: (value: TStyleValue) => TReturn;
+  borderLeftStyle: (value: TStyleValue) => TReturn;
+  borderRightStyle: (value: TStyleValue) => TReturn;
+  borderLeftWidth: (value: TStyleValue) => TReturn;
+  borderRightWidth: (value: TStyleValue) => TReturn;
+  borderRadius: (value: TStyleValue) => TReturn;
+  borderStartStartRadius: (value: TStyleValue) => TReturn;
+  borderStartEndRadius: (value: TStyleValue) => TReturn;
+  borderEndStartRadius: (value: TStyleValue) => TReturn;
+  borderEndEndRadius: (value: TStyleValue) => TReturn;
+  borderTopLeftRadius: (value: TStyleValue) => TReturn;
+  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;
+  gridRow: (value: TStyleValue) => TReturn;
+  gridColumn: (value: TStyleValue) => TReturn;
+  gridTemplate: (value: TStyleValue) => TReturn;
+  inset: (value: TStyleValue) => TReturn;
+  insetInline: (value: TStyleValue) => TReturn;
+  insetBlock: (value: TStyleValue) => TReturn;
+  insetInlineStart: (value: TStyleValue) => TReturn;
+  insetInlineEnd: (value: TStyleValue) => TReturn;
+  left: (value: TStyleValue) => TReturn;
+  right: (value: TStyleValue) => TReturn;
+  listStyle: (value: TStyleValue) => TReturn;
+  margin: (value: TStyleValue) => TReturn;
+  marginInline: (value: TStyleValue) => TReturn;
+  marginBlock: (value: TStyleValue) => TReturn;
+  marginInlineStart: (value: TStyleValue) => TReturn;
+  marginInlineEnd: (value: TStyleValue) => TReturn;
+  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;
+  padding: (rawValue: TStyleValue) => TReturn;
+  paddingInline: (rawValue: TStyleValue) => TReturn;
+  paddingBlock: (rawValue: TStyleValue) => TReturn;
+  paddingInlineStart: (value: TStyleValue) => TReturn;
+  paddingInlineEnd: (value: TStyleValue) => TReturn;
+  paddingLeft: (value: TStyleValue) => TReturn;
+  paddingRight: (value: TStyleValue) => TReturn;
+  placeContent: (value: TStyleValue) => TReturn;
+  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;
+  transition: (value: TStyleValue) => TReturn;
+};
+declare const aliases: {
+  borderHorizontal: any;
+  borderVertical: any;
+  borderBlockStart: any;
+  borderEnd: any;
+  borderBlockEnd: any;
+  borderStart: any;
+  blockSize: (val: TStyleValue) => TReturn;
+  inlineSize: (val: TStyleValue) => TReturn;
+  minBlockSize: (val: TStyleValue) => TReturn;
+  minInlineSize: (val: TStyleValue) => TReturn;
+  maxBlockSize: (val: TStyleValue) => TReturn;
+  maxInlineSize: (val: TStyleValue) => TReturn;
+  borderHorizontalWidth: any;
+  borderHorizontalStyle: any;
+  borderHorizontalColor: any;
+  borderVerticalWidth: any;
+  borderVerticalStyle: any;
+  borderVerticalColor: any;
+  borderBlockStartColor: (value: TStyleValue) => TReturn;
+  borderBlockEndColor: (value: TStyleValue) => TReturn;
+  borderBlockStartStyle: (value: TStyleValue) => TReturn;
+  borderBlockEndStyle: (value: TStyleValue) => TReturn;
+  borderBlockStartWidth: (value: TStyleValue) => TReturn;
+  borderBlockEndWidth: (value: TStyleValue) => TReturn;
+  borderStartColor: any;
+  borderEndColor: any;
+  borderStartStyle: any;
+  borderEndStyle: any;
+  borderStartWidth: any;
+  borderEndWidth: any;
+  borderTopStartRadius: (value: TStyleValue) => TReturn;
+  borderTopEndRadius: (value: TStyleValue) => TReturn;
+  borderBottomStartRadius: (value: TStyleValue) => TReturn;
+  borderBottomEndRadius: (value: TStyleValue) => TReturn;
+  containIntrinsicBlockSize: (value: TStyleValue) => TReturn;
+  containIntrinsicInlineSize: (value: TStyleValue) => TReturn;
+  gridGap: any;
+  gridRowGap: (value: TStyleValue) => TReturn;
+  gridColumnGap: (value: TStyleValue) => TReturn;
+  marginBlockStart: (value: TStyleValue) => TReturn;
+  marginBlockEnd: (value: TStyleValue) => TReturn;
+  marginStart: any;
+  marginEnd: any;
+  marginHorizontal: any;
+  marginVertical: any;
+  overflowBlock: (value: TStyleValue) => TReturn;
+  overflowInline: (value: TStyleValue) => TReturn;
+  paddingBlockStart: (rawValue: TStyleValue) => TReturn;
+  paddingBlockEnd: (rawValue: TStyleValue) => TReturn;
+  paddingStart: any;
+  paddingEnd: any;
+  paddingHorizontal: any;
+  paddingVertical: any;
+  scrollMarginBlockStart: (value: TStyleValue) => TReturn;
+  scrollMarginBlockEnd: (value: TStyleValue) => TReturn;
+  insetBlockStart: (value: TStyleValue) => TReturn;
+  insetBlockEnd: (value: TStyleValue) => TReturn;
+  start: any;
+  end: any;
+};
+declare const $$EXPORT_DEFAULT_DECLARATION$$: Readonly</**
+ * > 239 |   ...typeof shorthands,
+ *       |   ^^^^^^^^^^^^^^^^^^^^ Unsupported feature: Translating "object types with complex spreads" is currently not supported.
+ **/
+any>;
+export default $$EXPORT_DEFAULT_DECLARATION$$;

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

@@ -6,96 +6,32 @@ Object.defineProperty(exports, "__esModule", {
 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 => [['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(' '));
-  },
+  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 => [['border', rawValue], ...shorthands.borderWidth(null), ...shorthands.borderStyle(null), ...shorthands.borderColor(null)],
+  borderInline: rawValue => [['borderInline', rawValue], ...shorthands.borderInlineWidth(null), ...shorthands.borderInlineStyle(null), ...shorthands.borderInlineColor(null)],
+  borderBlock: rawValue => [['borderBlock', rawValue], ...shorthands.borderBlockWidth(null), ...shorthands.borderBlockStyle(null), ...shorthands.borderBlockColor(null)],
+  borderTop: rawValue => [['borderTop', rawValue], ['borderTopWidth', null], ['borderTopStyle', null], ['borderTopColor', null]],
+  borderInlineEnd: rawValue => [['borderInlineEnd', rawValue], ...shorthands.borderInlineEndWidth(null), ...shorthands.borderInlineEndStyle(null), ...shorthands.borderInlineEndColor(null)],
+  borderRight: rawValue => [['borderRight', rawValue], ...shorthands.borderRightWidth(null), ...shorthands.borderRightStyle(null), ...shorthands.borderRightColor(null)],
+  borderBottom: rawValue => [['borderBottom', rawValue], ['borderBottomWidth', null], ['borderBottomStyle', null], ['borderBottomColor', null]],
+  borderInlineStart: _rawValue => [['borderInlineStart', null], ...shorthands.borderInlineStartWidth(null), ...shorthands.borderInlineStartStyle(null), ...shorthands.borderInlineStartColor(null)],
+  borderLeft: _rawValue => [['borderLeft', null], ...shorthands.borderLeftWidth(null), ...shorthands.borderLeftStyle(null), ...shorthands.borderLeftColor(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], ['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]],
+  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]],
@@ -108,24 +44,7 @@ const shorthands = {
   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]];
-  },
+  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]],
@@ -134,20 +53,22 @@ const shorthands = {
   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]],
+  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]],
-  // @Deprecated ?
-  font: value => [['font', value], ['fontFamily', null], ['fontSize', null], ['fontStretch', null], ['fontStyle', null], ['fontVariant', null], ['fontWeight', null], ['lineHeight', 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], ['gridTemplate', null], ['gridTemplateAreas', null], ['gridTemplateColumns', null], ['gridTemplateRows', null], ['gridAutoRows', null], ['gridAutoColumns', null], ['gridAutoFlow', 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], ['insetInline', null], ['insetBlock', null], ['insetInlineStart', null], ['insetInlineEnd', null], ['top', null], ['right', null], ['bottom', null], ['left', 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]],
@@ -155,15 +76,7 @@ const shorthands = {
   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]];
-  },
+  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]],
@@ -171,15 +84,15 @@ const shorthands = {
   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], ['outlineStyle', null], ['outlineWidth', 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);
     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]];
   },
@@ -192,26 +105,39 @@ const shorthands = {
   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]],
+  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], ['transitionDelay', null], ['transitionDuration', null], ['transitionProperty', null], ['transitionTimingFunction', null]]
+  transition: value => [['transition', value], ['transitionBehavior', null], ['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,
+  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,
@@ -234,18 +160,27 @@ const aliases = {
   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,
+  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,
+  scrollMarginBlockStart: value => [['scrollMarginTop', value]],
+  scrollMarginBlockEnd: value => [['scrollMarginBottom', value]],
   insetBlockStart: value => [['top', value]],
   insetBlockEnd: value => [['bottom', value]],
   start: shorthands.insetInlineStart,
@@ -255,5 +190,4 @@ const expansions = {
   ...shorthands,
   ...aliases
 };
-var _default = expansions;
-exports.default = _default;
+var _default = exports.default = expansions;