@stylexjs/babel-plugin 0.2.0-beta.8 → 0.2.0-beta.9

package/lib/index.js

@@ -6,6 +6,7 @@ var t = require('@babel/types');
 var require$$0 = require('postcss-value-parser');
 var path = require('path');
 var require$$0$1 = require('invariant');
+var require$$1 = require('styleq');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -73,7 +74,7 @@ class StateManager {
       importSources: options.importSources ?? [name, 'stylex'],
       definedStylexCSSVariables: options.definedStylexCSSVariables ?? {},
       genConditionalClasses: !!options.genConditionalClasses,
-      allowUnsafeProperties: !!options.allowUnsafeProperties
+      skipShorthandExpansion: !!options.skipShorthandExpansion
     };
     return this._state.opts;
   }
@@ -257,8 +258,8 @@ function murmurhash2_32_gc(str, seed) {
   return h >>> 0;
 }
 const hash = str => murmurhash2_32_gc(str, 1).toString(36);
-var _default$1 = hash;
-hash$1.default = _default$1;
+var _default$4 = hash;
+hash$1.default = _default$4;
 
 var dashify$1 = {};
 
@@ -330,8 +331,8 @@ Object.defineProperty(leadingZero, "__esModule", {
   value: true
 });
 leadingZero.default = normalizeLeadingZero;
-var _postcssValueParser$5 = _interopRequireDefault$d(require$$0);
-function _interopRequireDefault$d(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _postcssValueParser$5 = _interopRequireDefault$h(require$$0);
+function _interopRequireDefault$h(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * Remove leading zeros from numbers
  */
@@ -399,8 +400,8 @@ Object.defineProperty(timings$1, "__esModule", {
   value: true
 });
 timings$1.default = normalizeTimings;
-var _postcssValueParser$4 = _interopRequireDefault$c(require$$0);
-function _interopRequireDefault$c(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _postcssValueParser$4 = _interopRequireDefault$g(require$$0);
+function _interopRequireDefault$g(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * Turn millisecond values to seconds (shorter), except when < 10ms
  */
@@ -494,8 +495,8 @@ Object.defineProperty(zeroDimensions, "__esModule", {
   value: true
 });
 zeroDimensions.default = normalizeZeroDimensions;
-var _postcssValueParser$3 = _interopRequireDefault$b(require$$0);
-function _interopRequireDefault$b(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _postcssValueParser$3 = _interopRequireDefault$f(require$$0);
+function _interopRequireDefault$f(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const angles = ['deg', 'grad', 'turn', 'rad'];
 const timings = ['ms', 's'];
 
@@ -541,7 +542,7 @@ var messages$4 = {};
 Object.defineProperty(messages$4, "__esModule", {
   value: true
 });
-messages$4.UNKNOWN_PROP_KEY = messages$4.UNKNOWN_NAMESPACE = messages$4.UNEXPECTED_ARGUMENT = messages$4.UNBOUND_STYLEX_CALL_VALUE = messages$4.ONLY_TOP_LEVEL = messages$4.NO_PARENT_PATH = messages$4.NO_CONDITIONAL_SHORTHAND = messages$4.NON_STATIC_VALUE = messages$4.NON_OBJECT_FOR_STYLEX_CALL = messages$4.MULTIPLE_DIRECTIONS_IN_SHORTHAND = messages$4.LOCAL_ONLY = messages$4.LINT_UNCLOSED_FUNCTION = messages$4.INVALID_SPREAD = messages$4.INVALID_PSEUDO = messages$4.ILLEGAL_PROP_VALUE = messages$4.ILLEGAL_PROP_ARRAY_VALUE = messages$4.ILLEGAL_NESTED_PSEUDO = messages$4.ILLEGAL_NAMESPACE_VALUE = messages$4.ILLEGAL_NAMESPACE_TYPE = messages$4.ILLEGAL_ARGUMENT_LENGTH = messages$4.EXPECTED_FUNCTION_CALL = messages$4.ESCAPED_STYLEX_VALUE = void 0;
+messages$4.UNKNOWN_PROP_KEY = messages$4.UNKNOWN_NAMESPACE = messages$4.UNEXPECTED_ARGUMENT = messages$4.UNBOUND_STYLEX_CALL_VALUE = messages$4.ONLY_TOP_LEVEL = messages$4.NO_PARENT_PATH = messages$4.NO_CONDITIONAL_SHORTHAND = messages$4.NON_STATIC_VALUE = messages$4.NON_OBJECT_FOR_STYLEX_CALL = messages$4.LOCAL_ONLY = messages$4.LINT_UNCLOSED_FUNCTION = messages$4.INVALID_SPREAD = messages$4.INVALID_PSEUDO = messages$4.ILLEGAL_PROP_VALUE = messages$4.ILLEGAL_PROP_ARRAY_VALUE = messages$4.ILLEGAL_NESTED_PSEUDO = messages$4.ILLEGAL_NAMESPACE_VALUE = messages$4.ILLEGAL_NAMESPACE_TYPE = messages$4.ILLEGAL_ARGUMENT_LENGTH = messages$4.EXPECTED_FUNCTION_CALL = messages$4.ESCAPED_STYLEX_VALUE = void 0;
 const ILLEGAL_ARGUMENT_LENGTH = 'stylex() should have 1 argument.';
 messages$4.ILLEGAL_ARGUMENT_LENGTH = ILLEGAL_ARGUMENT_LENGTH;
 const NON_STATIC_VALUE = 'Only static values are allowed inside of a stylex.create() call.';
@@ -564,7 +565,7 @@ const ILLEGAL_NAMESPACE_TYPE = 'Only a string literal namespace is allowed here.
 messages$4.ILLEGAL_NAMESPACE_TYPE = ILLEGAL_NAMESPACE_TYPE;
 const UNKNOWN_NAMESPACE = 'Unknown namespace';
 messages$4.UNKNOWN_NAMESPACE = UNKNOWN_NAMESPACE;
-const ILLEGAL_NESTED_PSEUDO = "Pseudo objects can't be nested.";
+const ILLEGAL_NESTED_PSEUDO = "Pseudo objects can't be nested more than one level deep.";
 messages$4.ILLEGAL_NESTED_PSEUDO = ILLEGAL_NESTED_PSEUDO;
 const ILLEGAL_PROP_VALUE = 'A style value can only contain an array, string or number.';
 messages$4.ILLEGAL_PROP_VALUE = ILLEGAL_PROP_VALUE;
@@ -584,8 +585,6 @@ const EXPECTED_FUNCTION_CALL = 'Expected a simple function call but found someth
 messages$4.EXPECTED_FUNCTION_CALL = EXPECTED_FUNCTION_CALL;
 const NO_PARENT_PATH = 'Unexpected AST node without a parent path.';
 messages$4.NO_PARENT_PATH = NO_PARENT_PATH;
-const MULTIPLE_DIRECTIONS_IN_SHORTHAND = 'Shorthand properties cannot contain different values for different directions.';
-messages$4.MULTIPLE_DIRECTIONS_IN_SHORTHAND = MULTIPLE_DIRECTIONS_IN_SHORTHAND;
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -600,9 +599,9 @@ Object.defineProperty(detectUnclosedFns$1, "__esModule", {
   value: true
 });
 detectUnclosedFns$1.default = detectUnclosedFns;
-var messages$3 = _interopRequireWildcard$4(messages$4);
-function _getRequireWildcardCache$4(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache$4 = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard$4(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache$4(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var messages$3 = _interopRequireWildcard$3(messages$4);
+function _getRequireWildcardCache$3(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache$3 = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard$3(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache$3(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /**
  * Remove leading zeros from numbers
  */
@@ -629,19 +628,22 @@ Object.defineProperty(normalizeValue$1, "__esModule", {
   value: true
 });
 normalizeValue$1.default = normalizeValue;
-var _fontSizePxToRem = _interopRequireDefault$a(fontSizePxToRem);
-var _leadingZero = _interopRequireDefault$a(leadingZero);
-var _quotes = _interopRequireDefault$a(quotes);
-var _timings = _interopRequireDefault$a(timings$1);
-var _whitespace = _interopRequireDefault$a(whitespace);
-var _zeroDimensions = _interopRequireDefault$a(zeroDimensions);
-var _detectUnclosedFns = _interopRequireDefault$a(detectUnclosedFns$1);
-var _postcssValueParser$2 = _interopRequireDefault$a(require$$0);
-function _interopRequireDefault$a(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _fontSizePxToRem = _interopRequireDefault$e(fontSizePxToRem);
+var _leadingZero = _interopRequireDefault$e(leadingZero);
+var _quotes = _interopRequireDefault$e(quotes);
+var _timings = _interopRequireDefault$e(timings$1);
+var _whitespace = _interopRequireDefault$e(whitespace);
+var _zeroDimensions = _interopRequireDefault$e(zeroDimensions);
+var _detectUnclosedFns = _interopRequireDefault$e(detectUnclosedFns$1);
+var _postcssValueParser$2 = _interopRequireDefault$e(require$$0);
+function _interopRequireDefault$e(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 // `Timings` should be before `LeadingZero`, because it
 // changes 500ms to 0.5s, then `LeadingZero` makes it .5s
 const normalizers = [_detectUnclosedFns.default, _whitespace.default, _timings.default, _zeroDimensions.default, _leadingZero.default, _quotes.default, _fontSizePxToRem.default];
 function normalizeValue(value, key) {
+  if (value == null) {
+    return value;
+  }
   const parsedAST = (0, _postcssValueParser$2.default)(value);
   return normalizers.reduce((ast, fn) => fn(ast, key), parsedAST).toString();
 }
@@ -650,8 +652,8 @@ Object.defineProperty(transformValue$1, "__esModule", {
   value: true
 });
 transformValue$1.default = transformValue;
-var _normalizeValue = _interopRequireDefault$9(normalizeValue$1);
-function _interopRequireDefault$9(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _normalizeValue = _interopRequireDefault$d(normalizeValue$1);
+function _interopRequireDefault$d(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -847,8 +849,8 @@ Object.defineProperty(generateRtl, "__esModule", {
   value: true
 });
 generateRtl.default = generateRTL;
-var _postcssValueParser$1 = _interopRequireDefault$8(require$$0);
-function _interopRequireDefault$8(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _postcssValueParser$1 = _interopRequireDefault$c(require$$0);
+function _interopRequireDefault$c(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -1083,14 +1085,132 @@ function generateCSSRule$1(className, decls, pseudo) {
 }
 const THUMB_VARIANTS = ['::-webkit-slider-thumb', '::-moz-range-thumb', '::-ms-thumb'];
 
+var propertyPriorities = {};
+
+Object.defineProperty(propertyPriorities, "__esModule", {
+  value: true
+});
+propertyPriorities.default = getPriority;
+/**
+ * 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 PRIORITIES = {
+  // These should never exist at runtime:
+  border: 1,
+  'border-block-end': 2,
+  'border-block-start': 2,
+  'border-top': 2.1,
+  'border-bottom': 2.1,
+  'border-inline-end': 2,
+  'border-inline-start': 2,
+  'border-left': 2,
+  'border-right': 2,
+  // End of never-exist-at-runtime properties.
+
+  // These are shorthands of shorthands:
+  grid: 2,
+  'grid-area': 2,
+  // These are shorthands of final properties:
+  'border-color': 3,
+  'border-style': 3,
+  'border-width': 3,
+  'border-image': 3,
+  'border-radius': 3,
+  animation: 3,
+  background: 3,
+  'column-rule': 3,
+  columns: 3,
+  flex: 3,
+  'flex-flow': 3,
+  font: 3,
+  gap: 3,
+  'grid-column': 3,
+  'grid-row': 3,
+  'grid-template': 3,
+  'list-style': 3,
+  margin: 3,
+  mask: 3,
+  offset: 3,
+  outline: 3,
+  overflow: 3,
+  padding: 3,
+  'place-content': 3,
+  'place-items': 3,
+  'place-self': 3,
+  'scroll-margin': 3,
+  'scroll-padding': 3,
+  'text-decoration': 3,
+  'text-emphasis': 3,
+  transition: 3,
+  ':has': 4.5,
+  ':dir': 5,
+  ':lang': 5.1,
+  ':first-child': 5.2,
+  ':last-child': 5.3,
+  ':only-child': 5.4,
+  ':nth-child': 6,
+  ':nth-of-type': 6.1,
+  ':only-of-type': 6.2,
+  ':empty': 7,
+  ':link': 8,
+  ':any-link': 8.1,
+  ':target': 8.2,
+  ':visited': 8.3,
+  ':enabled': 9.1,
+  ':disabled': 9.2,
+  ':required': 9.3,
+  ':optional': 9.4,
+  ':read-only': 9.5,
+  ':read-write': 9.6,
+  ':placeholder-shown': 9.7,
+  ':default': 10,
+  ':checked': 10.1,
+  ':indeterminate': 10.1,
+  ':blank': 10.2,
+  ':valid': 10.3,
+  ':invalid': 10.4,
+  ':autofill': 11,
+  ':picture-in-picture': 12,
+  ':fullscreen': 12.1,
+  ':paused': 12.2,
+  ':playing': 12.3,
+  ':hover': 13,
+  ':focusWithin': 14,
+  ':focusVisible': 15,
+  ':focus': 16,
+  ':active': 17
+};
+function getPriority(key) {
+  if (key.startsWith('@supports')) {
+    return 20;
+  }
+  if (key.startsWith('@media')) {
+    return 21;
+  }
+  const prop = key.startsWith(':') && key.includes('(') ? key.slice(0, key.indexOf('(')) : key;
+  let priority = PRIORITIES[prop] ?? 4;
+  if (key.toLowerCase().includes('left') || key.toLowerCase().includes('right')) {
+    // Bump priority for physical left/right values.
+    priority += 0.1;
+  }
+  return priority;
+}
+
 Object.defineProperty(generateCssRule, "__esModule", {
   value: true
 });
 generateCssRule.default = generateCSSRule;
-var _generateLtr$1 = _interopRequireDefault$7(generateLtr);
-var _generateRtl$1 = _interopRequireDefault$7(generateRtl);
-var _genCSSRule = _interopRequireDefault$7(genCSSRule);
-function _interopRequireDefault$7(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _generateLtr$1 = _interopRequireDefault$b(generateLtr);
+var _generateRtl$1 = _interopRequireDefault$b(generateRtl);
+var _genCSSRule = _interopRequireDefault$b(genCSSRule);
+var _propertyPriorities = _interopRequireDefault$b(propertyPriorities);
+function _interopRequireDefault$b(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -1100,61 +1220,32 @@ function _interopRequireDefault$7(obj) { return obj && obj.__esModule ? obj : {
  * 
  */
 
-function generateCSSRule(className, key, value, pseudo) {
+function generateCSSRule(className, key,
+// pre-dashed
+value, pseudo) {
   const pairs = Array.isArray(value) ? value.map(eachValue => [key, eachValue]) : [[key, value]];
   const ltrPairs = pairs.map(_generateLtr$1.default);
   const ltrDecls = ltrPairs.map(pair => pair.join(':')).join(';');
   const rtlDecls = pairs.map(_generateRtl$1.default).filter(Boolean).map(pair => pair.join(':')).join(';');
   const ltrRule = (0, _genCSSRule.default)(className, ltrDecls, pseudo);
   const rtlRule = !rtlDecls ? null : (0, _genCSSRule.default)(className, rtlDecls, pseudo);
-  let priority = 1;
-  if (pseudo != null) {
-    if (pseudo[0] === '@') {
-      priority = 2;
-    } else if (pseudo[0] === ':') {
-      priority = pseudoPriorities[pseudo] ?? 2;
-      if (pseudo.startsWith(':nth-child')) {
-        priority = 6;
-      }
-      if (pseudo.startsWith(':nth-of-type')) {
-        priority = 7;
-      }
-    }
-  }
-  if (key.toLowerCase().includes('left') || key.toLowerCase().includes('right')) {
-    // Bump priority for physical left/right values.
-    priority += 0.1;
-  }
+  const priority = (0, _propertyPriorities.default)(key) + (pseudo ? (0, _propertyPriorities.default)(pseudo) : 0);
   return {
     priority,
     ltr: ltrRule,
     rtl: rtlRule
   };
 }
-const pseudoPriorities = {
-  // Might become unsupported:
-  ':first-child': 3,
-  ':last-child': 4,
-  ':only-child': 5,
-  ':nth-child': 6,
-  ':nth-of-type': 7,
-  ':hover': 8,
-  ':focus': 9,
-  ':active': 10,
-  ':disabled': 11,
-  '::placeholder': 12,
-  '::thumb': 13
-};
 
 Object.defineProperty(convertToClassName$1, "__esModule", {
   value: true
 });
 convertToClassName$1.default = convertToClassName;
-var _hash$1 = _interopRequireDefault$6(hash$1);
-var _dashify$1 = _interopRequireDefault$6(dashify$1);
-var _transformValue$1 = _interopRequireDefault$6(transformValue$1);
-var _generateCssRule = _interopRequireDefault$6(generateCssRule);
-function _interopRequireDefault$6(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _hash$1 = _interopRequireDefault$a(hash$1);
+var _dashify$1 = _interopRequireDefault$a(dashify$1);
+var _transformValue$1 = _interopRequireDefault$a(transformValue$1);
+var _generateCssRule = _interopRequireDefault$a(generateCssRule);
+function _interopRequireDefault$a(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -1185,19 +1276,18 @@ function convertToClassName(objEntry, pseudo) {
   return [key, className, cssRules];
 }
 
-var expandShorthands = {};
+var preprocessRules = {};
+
+var applicationOrder = {};
+
+var splitCssValue = {};
 
-Object.defineProperty(expandShorthands, "__esModule", {
+Object.defineProperty(splitCssValue, "__esModule", {
   value: true
 });
-expandShorthands.BANNED_PROPERTIES = void 0;
-expandShorthands.default = flatMapExpandedShorthands;
-expandShorthands.expandedKeys = void 0;
-_interopRequireWildcard$3(messages$4);
-var _postcssValueParser = _interopRequireDefault$5(require$$0);
-function _interopRequireDefault$5(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache$3(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache$3 = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard$3(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache$3(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+splitCssValue.default = splitValue;
+var _postcssValueParser = _interopRequireDefault$9(require$$0);
+function _interopRequireDefault$9(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -1205,6 +1295,7 @@ function _interopRequireWildcard$3(obj, nodeInterop) { if (!nodeInterop && obj &
  * LICENSE file in the root directory of this source tree.
  *
  * 
+ *
  */
 
 function printNode(node) {
@@ -1221,6 +1312,11 @@ function printNode(node) {
 
 // Using split(' ') Isn't enough bcause of values like calc.
 function splitValue(str) {
+  if (str == null || typeof str === 'number') {
+    return [str];
+  }
+
+  // This will never happen, but keeping here for Flow.
   if (Array.isArray(str)) {
     return str;
   }
@@ -1232,283 +1328,408 @@ function splitValue(str) {
   return nodes;
 }
 
-// TODO: to be added later.
-// const aliases = {
-//   marginInlineStart: (rawValue) => [['marginStart', rawValue]],
-//   marginInlineEnd: (rawValue) => [['marginEnd', rawValue]],
-//   marginInline: (rawValue) => [
-//     ['marginStart', rawValue],
-//     ['marginEnd', rawValue],
-//   ],
-//   paddingInlineStart: (rawValue) => [['paddingStart', rawValue]],
-//   paddingInlineEnd: (rawValue) => [['paddingEnd', rawValue]],
-//   paddingInline: (rawValue) => [
-//     ['paddingStart', rawValue],
-//     ['paddingEnd', rawValue],
-//   ],
-//   // 'borderInlineStart': (rawValue) => [['borderStart', rawValue]],
-//   // 'borderInlineEnd': (rawValue) => [['borderEnd', rawValue]],
-//   // // This will need to change.
-//   // 'borderInline': (rawValue) => [
-//   //   ['borderStart', rawValue],
-//   //   ['borderEnd', rawValue],
-//   // ],
-// };
-
+Object.defineProperty(applicationOrder, "__esModule", {
+  value: true
+});
+applicationOrder.default = void 0;
+var _splitCssValue$2 = _interopRequireDefault$8(splitCssValue);
+function _interopRequireDefault$8(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
- * Shorthand properties:
- * - [!] all - BANNED
- * - [!] animation - BANNED
- * - [!] background - BANNED
- * - [x] border - adequate for now
- * - [ ] border-block-end
- * - [ ] border-block-start
- * - [x] border-bottom
- * - [x] border-color
- * - [o] border-image - Only the shorthand is allowed.
- * - [ ] border-inline-end
- * - [ ] border-inline-start
- * - [!] border-left - BANNED
- * - [x] border-radius
- * - [!] border-right
- * - [x] border-style
- * - [ ] border-top
- * - [x] border-width
- * - [o] column-rule - Only the shorthand is allowed.
- * - [!] columns - BANNED
- * - [!] flex - BANNED
- * - [!] flex-flow - BANNED
- * - [!] font - BANNED
- * - [x] gap
- * - [!] grid - BANNED
- * - [!] grid-area - BANNED
- * - [!] grid-column - BANNED
- * - [!] grid-row - BANNED
- * - [!] grid-template - BANNED
- * - [!] grid-template-areas - BANNED
- *
- * - [o] list-style - Only the shorthand is allowed.
- * - [x] margin
- * - [o] mask - Only the shorthand is allowed.
- * - [o] offset - Only the shorthand is allowed.
- * - [o] outline - Only the shorthand is allowed.
- * - [x] overflow
- * - [x] padding
- * - [x] place-content
- * - [x] place-items
- * - [x] place-self
- * - [X] scroll-margin
- * - [x] scroll-padding
- * - [o] text-decoration - Only the shorthand is allowed.
- * - [o] text-emphasis - Only the shorthand is allowed.
- * - [!] transition - BANNED
+ * 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 BANNED_PROPERTIES = {
-  all: '`all` is not supported. Use individual properties instead.',
-  animation: '`animation` is not supported. Use individual properties like `animationName`, `animationDuration`, etc. instead.',
-  background: '`background` is not supported. Use individual properties like `backgroundImage`, `backgroundPosition`, etc. instead.',
-  borderColor: '`borderColor` is not supported. Use `border`, `borderTop`, `borderEnd`, `borderBottom` or `borderStart` instead.',
-  borderStyle: '`borderStyle` is not supported. Use `border`, `borderTop`, `borderEnd`, `borderBottom` or `borderStart` instead.',
-  borderWidth: '`borderWidth` is not supported. Use `border`, `borderTop`, `borderEnd`, `borderBottom` or `borderStart` instead.',
-  borderTopColor: '`borderTopColor` is not supported. Use `borderTop` instead.',
-  borderTopStyle: '`borderTopStyle` is not supported. Use `borderTop` instead.',
-  borderTopWidth: '`borderTopWidth` is not supported. Use `borderTop` instead.',
-  borderEndColor: '`borderEndColor` is not supported. Use `borderEnd` instead.',
-  borderEndStyle: '`borderEndStyle` is not supported. Use `borderEnd` instead.',
-  borderEndWidth: '`borderEndWidth` is not supported. Use `borderEnd` instead.',
-  borderBottomColor: '`borderBottomColor` is not supported. Use `borderBottom` instead.',
-  borderBottomStyle: '`borderBottomStyle` is not supported. Use `borderBottom` instead.',
-  borderBottomWidth: '`borderBottomWidth` is not supported. Use `borderBottom` instead.',
-  borderStartColor: '`borderStartColor` is not supported. Use `borderStart` instead.',
-  borderStartStyle: '`borderStartStyle` is not supported. Use `borderStart` instead.',
-  borderStartWidth: '`borderStartWidth` is not supported. Use `borderStart` instead.',
-  borderBlockStartColor: '`borderBlockStartColor` is not supported. Use `borderTop` instead.',
-  borderBlockStartStyle: '`borderBlockStartStyle` is not supported. Use `borderTop` instead.',
-  borderBlockStartWidth: '`borderBlockStartWidth` is not supported. Use `borderTop` instead.',
-  borderBlockEndColor: '`borderBlockEndColor` is not supported. Use `borderBottom` instead.',
-  borderBlockEndStyle: '`borderBlockEndStyle` is not supported. Use `borderBottom` instead.',
-  borderBlockEndWidth: '`borderBlockEndWidth` is not supported. Use `borderBottom` instead.',
-  borderInlineStartColor: '`borderInlineStartColor` is not supported. Use `borderStart` instead.',
-  borderInlineStartStyle: '`borderInlineStartStyle` is not supported. Use `borderStart` instead.',
-  borderInlineStartWidth: '`borderInlineStartWidth` is not supported. Use `borderStart` instead.',
-  borderInlineEndColor: '`borderInlineEndColor` is not supported. Use `borderEnd` instead.',
-  borderInlineEndStyle: '`borderInlineEndStyle` is not supported. Use `borderEnd` instead.',
-  borderInlineEndWidth: '`borderInlineEndWidth` is not supported. Use `borderEnd` instead.',
-  borderLeft: '`borderLeft` is not supported. Use `borderStart` instead.',
-  borderLeftColor: '`borderLeftColor` is not supported. Use `borderStart` instead.',
-  borderLeftStyle: '`borderLeftStyle` is not supported. Use `borderStart` instead.',
-  borderLeftWidth: '`borderLeftWidth` is not supported. Use `borderStart` instead.',
-  borderRight: '`borderRight` is not supported. Use `borderEnd` instead.',
-  borderRightColor: '`borderRightColor` is not supported. Use `borderEnd` instead.',
-  borderRightStyle: '`borderRightStyle` is not supported. Use `borderEnd` instead.',
-  borderRightWidth: '`borderRightWidth` is not supported. Use `borderEnd` instead.',
-  borderTopLeftRadius: '`borderTopLeftRadius` is not supported. Use `borderTopStartRadius` instead.',
-  borderTopRightRadius: '`borderTopRightRadius` is not supported. Use `borderTopEndRadius` instead.',
-  borderBottomLeftRadius: '`borderBottomLeftRadius` is not supported. Use `borderBottomStartRadius` instead.',
-  borderBottomRightRadius: '`borderBottomRightRadius` is not supported. Use `borderBottomEndRadius` instead.',
-  borderImageSource: '`borderImageSource` is not supported. Use `borderImage` instead.',
-  borderImageSlice: '`borderImageSlice` is not supported. Use `borderImage` instead.',
-  borderImageWidth: '`borderImageWidth` is not supported. Use `borderImage` instead.',
-  borderImageOutset: '`borderImageOutset` is not supported. Use `borderImage` instead.',
-  borderImageRepeat: '`borderImageRepeat` is not supported. Use `borderImage` instead.',
-  marginLeft: '`marginLeft` is not supported. Use `marginStart` instead.',
-  marginRight: '`marginRight` is not supported. Use `marginEnd` instead.',
-  paddingLeft: '`paddingLeft` is not supported. Use `paddingStart` instead.',
-  paddingRight: '`paddingRight` is not supported. Use `paddingEnd` instead.',
-  columnRuleWidth: '`columnRuleWidth` is not supported. Use `columnRule` instead.',
-  columnRuleStyle: '`columnRuleStyle` is not supported. Use `columnRule` instead.',
-  columnRuleColor: '`columnRuleColor` is not supported. Use `columnRule` instead.',
-  columns: '`columns` is not supported. Use `columnCount` and `columnWidth` instead.',
-  flex: '`flex` is not supported. Use `flexGrow`, `flexShrink`, and `flexBasis` instead.',
-  flexFlow: '`flexFlow` is not supported. Use `flexDirection` and `flexWrap` instead.',
-  font: '`font` is not supported. Use individual properties like `fontFamily`, `fontSize`, etc. instead.',
-  grid: '`grid` is not supported. Use individual properties like `gridTemplateColumns`, `gridTemplateRows`, etc. instead.',
-  gridColumn: '`gridColumn` is not supported. Use `gridColumnStart` and `gridColumnEnd` instead.',
-  gridRow: '`gridRow` is not supported. Use `gridRowStart` and `gridRowEnd` instead.',
-  gridArea: '`gridArea` is not supported. Use `gridRowStart`, `gridColumnStart`, `gridRowEnd`, and `gridColumnEnd` instead.',
-  gridTemplate: '`gridTemplate` is not supported. Use individual properties like `gridTemplateColumns`, `gridTemplateRows`, etc. instead.',
-  gridTemplateAreas: '`gridTemplateAreas` is not supported. Use `gridTemplateRows` and `gridTemplateColumns` instead.',
-  listStyleImage: '`listStyleImage` is not supported. Use `listStyle` instead.',
-  listStylePosition: '`listStylePosition` is not supported. Use `listStyle` instead.',
-  listStyleType: '`listStyleType` is not supported. Use `listStyle` instead.',
-  maskClip: '`maskClip` is not supported. Use `mask` instead.',
-  maskComposite: '`maskComposite` is not supported. Use `mask` instead.',
-  maskImage: '`maskImage` is not supported. Use `mask` instead.',
-  maskMode: '`maskMode` is not supported. Use `mask` instead.',
-  maskOrigin: '`maskOrigin` is not supported. Use `mask` instead.',
-  maskPosition: '`maskPosition` is not supported. Use `mask` instead.',
-  maskRepeat: '`maskRepeat` is not supported. Use `mask` instead.',
-  maskSize: '`maskSize` is not supported. Use `mask` instead.',
-  offsetAnchor: '`offsetAnchor` is not supported. Use `offset` instead.',
-  offsetDistance: '`offsetDistance` is not supported. Use `offset` instead.',
-  offsetPath: '`offsetPath` is not supported. Use `offset` instead.',
-  offsetPosition: '`offsetPosition` is not supported. Use `offset` instead.',
-  offsetRotate: '`offsetRotate` is not supported. Use `offset` instead.',
-  outlineColor: '`outlineColor` is not supported. Use `outline` instead.',
-  outlineStyle: '`outlineStyle` is not supported. Use `outline` instead.',
-  outlineWidth: '`outlineWidth` is not supported. Use `outline` instead.',
-  textDecorationColor: '`textDecorationColor` is not supported. Use `textDecoration` instead.',
-  textDecorationLine: '`textDecorationLine` is not supported. Use `textDecoration` instead.',
-  textDecorationStyle: '`textDecorationStyle` is not supported. Use `textDecoration` instead.',
-  textDecorationThickness: '`textDecorationThickness` is not supported. Use `textDecoration` instead.',
-  textEmphasisColor: '`textEmphasisColor` is not supported. Use `textEmphasis` instead.',
-  textEmphasisStyle: '`textEmphasisStyle` is not supported. Use `textEmphasis` instead.',
-  transition: '`transition` is not supported. Use individual properties like `transitionProperty`, `transitionDuration`, etc. instead.'
+const shorthands$1 = {
+  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$1.borderWidth(rawValue);
+    }
+    const [width, style, color] = (0, _splitCssValue$2.default)(rawValue);
+    return [...shorthands$1.borderWidth(width), ...shorthands$1.borderStyle(style), ...shorthands$1.borderColor(color)];
+  },
+  // @Deprecated
+  borderInline: rawValue => {
+    if (typeof rawValue === 'number') {
+      return [['borderInlineWidth', rawValue], ['borderInlineStartWidth', null], ['borderInlineEndWidth', null]];
+    }
+    const [width, style, color] = (0, _splitCssValue$2.default)(rawValue);
+    return [...shorthands$1.borderInlineWidth(width), ...shorthands$1.borderInlineStyle(style), ...shorthands$1.borderInlineColor(color)];
+  },
+  // @Deprecated
+  borderBlock: rawValue => {
+    if (typeof rawValue === 'number') {
+      return [['borderBlockWidth', rawValue], ['borderTopWidth', null], ['borderBottomWidth', null]];
+    }
+    const [width, style, color] = (0, _splitCssValue$2.default)(rawValue);
+    return [...shorthands$1.borderBlockWidth(width), ...shorthands$1.borderBlockStyle(style), ...shorthands$1.borderBlockColor(color)];
+  },
+  // @Deprecated
+  borderTop: rawValue => {
+    if (typeof rawValue === 'number') {
+      return [['borderTopWidth', rawValue]];
+    }
+    const [width, style, color] = (0, _splitCssValue$2.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$2.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$2.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$2.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$2.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$2.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$2.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]]
 };
-expandShorthands.BANNED_PROPERTIES = BANNED_PROPERTIES;
-const expansions = {
+const aliases$1 = {
+  // @Deprecated
+  borderHorizontal: shorthands$1.borderInline,
+  // @Deprecated
+  borderVertical: shorthands$1.borderBlock,
+  // @Deprecated
+  borderBlockStart: shorthands$1.borderTop,
+  // @Deprecated
+  borderEnd: shorthands$1.borderInlineEnd,
+  // @Deprecated
+  borderBlockEnd: shorthands$1.borderBottom,
+  // @Deprecated
+  borderStart: shorthands$1.borderInlineStart,
+  borderHorizontalWidth: shorthands$1.borderInlineWidth,
+  borderHorizontalStyle: shorthands$1.borderInlineStyle,
+  borderHorizontalColor: shorthands$1.borderInlineColor,
+  borderVerticalWidth: shorthands$1.borderBlockWidth,
+  borderVerticalStyle: shorthands$1.borderBlockStyle,
+  borderVerticalColor: shorthands$1.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$1.borderInlineStartColor,
+  borderEndColor: shorthands$1.borderInlineEndColor,
+  borderStartStyle: shorthands$1.borderInlineStartStyle,
+  borderEndStyle: shorthands$1.borderInlineEndStyle,
+  borderStartWidth: shorthands$1.borderInlineStartWidth,
+  borderEndWidth: shorthands$1.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$1.marginInlineStart,
+  marginEnd: shorthands$1.marginInlineEnd,
+  marginHorizontal: shorthands$1.marginInline,
+  marginVertical: shorthands$1.marginBlock,
+  paddingBlockStart: rawValue => [['paddingTop', rawValue]],
+  paddingBlockEnd: rawValue => [['paddingBottom', rawValue]],
+  paddingStart: shorthands$1.paddingInlineStart,
+  paddingEnd: shorthands$1.paddingInlineEnd,
+  paddingHorizontal: shorthands$1.paddingInline,
+  paddingVertical: shorthands$1.paddingBlock,
+  insetBlockStart: value => [['top', value]],
+  insetBlockEnd: value => [['bottom', value]],
+  start: shorthands$1.insetInlineStart,
+  end: shorthands$1.insetInlineEnd
+};
+const expansions$3 = {
+  ...shorthands$1,
+  ...aliases$1
+};
+var _default$3 = expansions$3;
+applicationOrder.default = _default$3;
+
+var legacyExpandShorthands = {};
+
+Object.defineProperty(legacyExpandShorthands, "__esModule", {
+  value: true
+});
+legacyExpandShorthands.default = void 0;
+var _splitCssValue$1 = _interopRequireDefault$7(splitCssValue);
+function _interopRequireDefault$7(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$2 = {
   border: rawValue => {
-    return [['borderTop', rawValue], ['borderEnd', rawValue], ['borderBottom', rawValue], ['borderStart', rawValue]];
-  },
-  // border: (rawValue: string) => {
-  //   if (typeof rawValue === 'number') {
-  //     return expansions.borderWidth(rawValue);
-  //   }
-  //   const [width, style, color, more] = splitValue(rawValue);
-  //   if (more != null) {
-  //     throw new Error(messages.MULTIPLE_DIRECTIONS_IN_SHORTHAND);
-  //   }
-  //   if (style == null || color == null) {
-  //     throw new Error(
-  //       'Border shorthand requires at least 2 values - width, style and color.'
-  //     );
-  //   }
-  //   return [
-  //     ...expansions.borderWidth(width),
-  //     ...expansions.borderStyle(style),
-  //     ...expansions.borderColor(color),
-  //   ];
-  // },
-  // borderTop: (rawValue: string) => {
-  //   if (typeof rawValue === 'number') {
-  //     return [['borderTopWidth', rawValue + 'px']];
-  //   }
-  //   const [width, style, color] = splitValue(rawValue);
-  //   if (style == null || color == null) {
-  //     throw new Error(
-  //       'BorderTop shorthand requires at least 2 values - width, style and color.'
-  //     );
-  //   }
-  //   return [
-  //     ['borderTopWidth', width],
-  //     ['borderTopStyle', style],
-  //     ['borderTopColor', color],
-  //   ];
-  // },
-  // borderEnd: (rawValue: string) => {
-  //   if (typeof rawValue === 'number') {
-  //     return [['borderEndWidth', rawValue + 'px']];
-  //   }
-  //   const [width, style, color] = splitValue(rawValue);
-  //   if (style == null || color == null) {
-  //     throw new Error(
-  //       'BorderEnd shorthand requires at least 2 values - width, style and color.'
-  //     );
-  //   }
-  //   return [
-  //     ['borderEndWidth', width],
-  //     ['borderEndStyle', style],
-  //     ['borderEndColor', color],
-  //   ];
-  // },
-  // borderBottom: (rawValue: string) => {
-  //   if (typeof rawValue === 'number') {
-  //     return [['borderBottomWidth', rawValue + 'px']];
-  //   }
-  //   const [width, style, color] = splitValue(rawValue);
-  //   if (style == null || color == null) {
-  //     throw new Error(
-  //       'BorderBottom shorthand requires at least 2 values - width, style and color.'
-  //     );
-  //   }
-  //   return [
-  //     ['borderBottomWidth', width],
-  //     ['borderBottomStyle', style],
-  //     ['borderBottomColor', color],
-  //   ];
-  // },
-  // borderStart: (rawValue: string) => {
-  //   if (typeof rawValue === 'number') {
-  //     return [['borderStartWidth', rawValue + 'px']];
-  //   }
-  //   const [width, style, color] = splitValue(rawValue);
-  //   if (style == null || color == null) {
-  //     throw new Error(
-  //       'BorderStart shorthand requires at least 2 values - width, style and color.'
-  //     );
-  //   }
-  //   return [
-  //     ['borderStartWidth', width],
-  //     ['borderStartStyle', style],
-  //     ['borderStartColor', color],
-  //   ];
-  // },
+    if (typeof rawValue === 'number') {
+      return expansions$2.borderWidth(rawValue);
+    }
+    const parts = (0, _splitCssValue$1.default)(rawValue);
+    const [width, style, color] = borderDetector(parts);
+    return [...(width != null ? expansions$2.borderWidth(width) : []), ...(style != null ? expansions$2.borderStyle(style) : []), ...(color != null ? expansions$2.borderColor(color) : [])];
+  },
+  borderTop: rawValue => {
+    if (typeof rawValue === 'number') {
+      return [['borderTopWidth', rawValue]];
+    }
+    const parts = (0, _splitCssValue$1.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$1.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$1.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$1.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$1.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$1.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] = splitValue(rawValue);
+    const [top, right = top, bottom = top, left = right] = (0, _splitCssValue$1.default)(rawValue);
     return [['borderTopColor', top], ['borderEndColor', right], ['borderBottomColor', bottom], ['borderStartColor', left]];
   },
   borderHorizontal: rawValue => {
-    return [['borderStart', rawValue], ['borderEnd', rawValue]];
+    return [...expansions$2.borderStart(rawValue), ...expansions$2.borderEnd(rawValue)];
   },
   borderStyle: rawValue => {
-    const [top, right = top, bottom = top, left = right] = splitValue(rawValue);
+    const [top, right = top, bottom = top, left = right] = (0, _splitCssValue$1.default)(rawValue);
     return [['borderTopStyle', top], ['borderEndStyle', right], ['borderBottomStyle', bottom], ['borderStartStyle', left]];
   },
   borderVertical: rawValue => {
-    return [['borderTop', rawValue], ['borderBottom', rawValue]];
+    return [...expansions$2.borderTop(rawValue), ...expansions$2.borderBottom(rawValue)];
   },
   borderWidth: rawValue => {
-    const [top, right = top, bottom = top, left = right] = typeof rawValue === 'number' ? [rawValue] : splitValue(rawValue);
+    const [top, right = top, bottom = top, left = right] = (0, _splitCssValue$1.default)(rawValue);
     return [['borderTopWidth', top], ['borderEndWidth', right], ['borderBottomWidth', bottom], ['borderStartWidth', left]];
   },
   borderRadius: rawValue => {
-    const [top, right = top, bottom = top, left = right] = typeof rawValue === 'string' ? splitValue(rawValue) : typeof rawValue === 'number' ? [rawValue] : rawValue; // remove
-
+    const [top, right = top, bottom = top, left = right] = (0, _splitCssValue$1.default)(rawValue);
     return [['borderTopStartRadius', top], ['borderTopEndRadius', right], ['borderBottomEndRadius', bottom], ['borderBottomStartRadius', left]];
   },
   margin: rawValue => {
-    const [top, right = top, bottom = top, left = right] = typeof rawValue === 'number' ? [rawValue] : splitValue(rawValue);
+    const [top, right = top, bottom = top, left = right] = (0, _splitCssValue$1.default)(rawValue);
     return [['marginTop', top], ['marginEnd', right], ['marginBottom', bottom], ['marginStart', left]];
   },
   marginHorizontal: rawValue => {
@@ -1518,11 +1739,11 @@ const expansions = {
     return [['marginTop', rawValue], ['marginBottom', rawValue]];
   },
   overflow: rawValue => {
-    const [x, y = x] = splitValue(rawValue);
+    const [x, y = x] = (0, _splitCssValue$1.default)(rawValue);
     return [['overflowX', x], ['overflowY', y]];
   },
   padding: rawValue => {
-    const [top, right = top, bottom = top, left = right] = typeof rawValue === 'number' ? [rawValue] : splitValue(rawValue);
+    const [top, right = top, bottom = top, left = right] = (0, _splitCssValue$1.default)(rawValue);
     return [['paddingTop', top], ['paddingEnd', right], ['paddingBottom', bottom], ['paddingStart', left]];
   },
   paddingHorizontal: rawValue => {
@@ -1530,47 +1751,183 @@ const expansions = {
   },
   paddingVertical: rawValue => {
     return [['paddingTop', rawValue], ['paddingBottom', rawValue]];
+  }
+};
+var _default$2 = expansions$2;
+legacyExpandShorthands.default = _default$2;
+
+var propertySpecificity = {};
+
+Object.defineProperty(propertySpecificity, "__esModule", {
+  value: true
+});
+propertySpecificity.default = void 0;
+var _splitCssValue = _interopRequireDefault$6(splitCssValue);
+function _interopRequireDefault$6(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');
   },
-  gap: rawValue => {
-    if (typeof rawValue === 'number') {
-      return [['rowGap', rawValue], ['columnGap', rawValue]];
-    }
-    const [row, column = row] = splitValue(rawValue);
-    return [['rowGap', row], ['columnGap', column]];
+  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.');
   },
-  placeContent: rawValue => {
-    const [align, justify = align] = splitValue(rawValue);
-    return [['alignContent', align], ['justifyContent', justify]];
+  borderInline: rawValue => {
+    throw new Error('borderInline is not supported. Use borderInlineWidth, borderInlineStyle and borderInlineColor instead.');
   },
-  placeItems: rawValue => {
-    const [align, justify = align] = splitValue(rawValue);
-    return [['alignItems', align], ['justifyItems', justify]];
+  // @Deprecated
+  borderBlock: rawValue => {
+    throw new Error('borderBlock is not supported. Use borderBlockWidth, borderBlockStyle and borderBlockColor instead.');
   },
-  placeSelf: rawValue => {
-    const [align, justify = align] = splitValue(rawValue);
-    return [['alignSelf', align], ['justifySelf', justify]];
+  // @Deprecated
+  borderTop: rawValue => {
+    throw new Error('borderTop is not supported. Use borderTopWidth, borderTopStyle and borderTopColor instead.');
   },
-  scrollMargin: rawValue => {
-    const [top, right = top, bottom = top, left = right] = typeof rawValue === 'number' ? [rawValue] : splitValue(rawValue);
-    return [['scrollMarginTop', top], ['scrollMarginEnd', right], ['scrollMarginBottom', bottom], ['scrollMarginStart', left]];
+  // @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.');
+    }
   },
-  scrollPadding: rawValue => {
-    const [top, right = top, bottom = top, left = right] = typeof rawValue === 'number' ? [rawValue] : splitValue(rawValue);
-    return [['scrollPaddingTop', top], ['scrollPaddingEnd', right], ['scrollPaddingBottom', bottom], ['scrollPaddingStart', left]];
+  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 expandedKeys = [...Object.keys(expansions), ...Object.keys(BANNED_PROPERTIES)];
-expandShorthands.expandedKeys = expandedKeys;
-function flatMapExpandedShorthands(objEntry) {
+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$1 = {
+  ...shorthands,
+  ...aliases
+};
+var _default$1 = expansions$1;
+propertySpecificity.default = _default$1;
+
+Object.defineProperty(preprocessRules, "__esModule", {
+  value: true
+});
+preprocessRules.default = flatMapExpandedShorthands;
+preprocessRules.getExpandedKeys = getExpandedKeys;
+var _applicationOrder = _interopRequireDefault$5(applicationOrder);
+var _legacyExpandShorthands = _interopRequireDefault$5(legacyExpandShorthands);
+var _propertySpecificity = _interopRequireDefault$5(propertySpecificity);
+function _interopRequireDefault$5(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[key];
+  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 [objEntry];
+  return [[key, value]];
 }
 
 var objectUtils = {};
@@ -1712,7 +2069,7 @@ Object.defineProperty(stylexCreate$1, "__esModule", {
 });
 stylexCreate$1.default = styleXCreateSet;
 var _convertToClassName = _interopRequireDefault$4(convertToClassName$1);
-var _expandShorthands$1 = _interopRequireWildcard$1(expandShorthands);
+var _index$1 = _interopRequireWildcard$1(preprocessRules);
 var _objectUtils$1 = objectUtils;
 var messages$1 = _interopRequireWildcard$1(messages$4);
 var _stylexInclude$1 = stylexInclude$1;
@@ -1747,6 +2104,9 @@ function styleXCreateSet(namespaces) {
     if (typeof namespace !== 'object' || Array.isArray(namespace)) {
       throw new Error(messages$1.ILLEGAL_NAMESPACE_VALUE);
     }
+
+    // namespace = preflatten(namespace);
+
     const [resolvedNamespace, injected] = styleXCreateNamespace(namespace, options);
     const compiledNamespace = (0, _objectUtils$1.flattenObject)(resolvedNamespace);
     resolvedNamespaces[namespaceName] = {
@@ -1779,16 +2139,18 @@ function styleXCreateSet(namespaces) {
 function styleXCreateNamespace(style, options) {
   const namespaceEntries = (0, _objectUtils$1.objEntries)(style);
 
-  // First the shorthand properties are expanded.
-  // e.g. `margin` gets expanded to `marginTop`, `marginBottom`, `marginStart`, `marginEnd`.
-  // `entries` is an array of [key, value] pairs.
+  // First handle shorthands. The strategy for this is based on the `styleResolution` option.
   const entries = namespaceEntries.flatMap(_ref => {
     let [key, value] = _ref;
+    // Detect style ...spreads and leave them unmodified
     if (value instanceof _stylexInclude$1.IncludedStyles) {
       return [[key, value]];
     }
+    // Detect nested style objects.
     if (value != null && typeof value === 'object' && !Array.isArray(value)) {
-      if (!key.startsWith(':') && !key.startsWith('@') && _expandShorthands$1.expandedKeys.includes(key)) {
+      // Nested Objects are only allowed for legacy :pseudo, @media or long-hand properties for now.
+      // In the future, we will try to support shorthands as well.
+      if (!key.startsWith(':') && !key.startsWith('@') && (0, _index$1.getExpandedKeys)(options).includes(key)) {
         throw new Error(messages$1.INVALID_PSEUDO);
       }
       return [[key, (0, _objectUtils$1.objFromEntries)((0, _objectUtils$1.objEntries)(value).flatMap(_ref2 => {
@@ -1796,10 +2158,7 @@ function styleXCreateNamespace(style, options) {
         if (innerValue != null && typeof innerValue === 'object' && !Array.isArray(innerValue)) {
           throw new Error(messages$1.ILLEGAL_NESTED_PSEUDO);
         }
-        if (!options.allowUnsafeProperties && _expandShorthands$1.BANNED_PROPERTIES[key]) {
-          throw new Error(_expandShorthands$1.BANNED_PROPERTIES[key]);
-        }
-        return (0, _expandShorthands$1.default)([innerKey, innerValue]);
+        return (0, _index$1.default)([innerKey, innerValue], options);
       }))]];
     } else {
       if (value !== null && typeof value !== 'string' && typeof value !== 'number' && !Array.isArray(value)) {
@@ -1808,10 +2167,7 @@ function styleXCreateNamespace(style, options) {
       if (Array.isArray(value) && value.some(val => typeof val === 'object')) {
         throw new Error(messages$1.ILLEGAL_PROP_ARRAY_VALUE);
       }
-      if (!options.allowUnsafeProperties && _expandShorthands$1.BANNED_PROPERTIES[key]) {
-        throw new Error(_expandShorthands$1.BANNED_PROPERTIES[key]);
-      }
-      return (0, _expandShorthands$1.default)([key, value]);
+      return (0, _index$1.default)([key, value], options);
     }
   });
 
@@ -1832,6 +2188,8 @@ function styleXCreateNamespace(style, options) {
         for (const [innerKey, innerVal] of (0, _objectUtils$1.objEntries)(val)) {
           if (innerVal === null) {
             innerObj[innerKey] = null;
+          } else if (typeof innerVal === 'object' && !Array.isArray(innerVal)) {
+            throw new Error(messages$1.ILLEGAL_NESTED_PSEUDO);
           } else {
             const [updatedKey, className, cssRule] = (0, _convertToClassName.default)([innerKey, innerVal], pseudo, options);
             innerObj[updatedKey] = className;
@@ -1846,6 +2204,9 @@ function styleXCreateNamespace(style, options) {
           if (pseudo !== 'default' && !pseudo.startsWith(':') && !pseudo.startsWith('@')) {
             throw new Error(messages$1.INVALID_PSEUDO);
           }
+          if (typeof innerVal === 'object' && !Array.isArray(innerVal)) {
+            throw new Error(messages$1.ILLEGAL_NESTED_PSEUDO);
+          }
           if (innerVal !== null) {
             const [updatedKey, className, cssRule] = (0, _convertToClassName.default)([propKey, innerVal], pseudo === 'default' ? undefined : pseudo, options);
             injectedStyles[updatedKey + pseudo] = [className, cssRule];
@@ -1875,7 +2236,7 @@ Object.defineProperty(stylexKeyframes, "__esModule", {
 });
 stylexKeyframes.default = styleXKeyframes;
 var _hash = _interopRequireDefault$3(hash$1);
-var _expandShorthands = _interopRequireDefault$3(expandShorthands);
+var _index = _interopRequireDefault$3(preprocessRules);
 var _generateLtr = _interopRequireDefault$3(generateLtr);
 var _generateRtl = _interopRequireDefault$3(generateRtl);
 var _transformValue = _interopRequireDefault$3(transformValue$1);
@@ -1897,11 +2258,12 @@ function _interopRequireDefault$3(obj) { return obj && obj.__esModule ? obj : {
 // It also expands shorthand properties to maintain parity with
 // `stylex.create`.
 function styleXKeyframes(frames) {
-  let {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const {
     stylexSheetName = '<>',
     classNamePrefix = 'x'
-  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  const expandedObject = (0, _objectUtils.objMap)(frames, frame => _objectUtils.Pipe.create(frame).pipe(expandFrameShorthands).pipe(x => (0, _objectUtils.objMapKeys)(x, _dashify.default)).pipe(x => (0, _objectUtils.objMap)(x, (value, key) => (0, _transformValue.default)(key, value))).done());
+  } = options;
+  const expandedObject = (0, _objectUtils.objMap)(frames, frame => _objectUtils.Pipe.create(frame).pipe(frame => expandFrameShorthands(frame, options)).pipe(x => (0, _objectUtils.objMapKeys)(x, _dashify.default)).pipe(x => (0, _objectUtils.objMap)(x, (value, key) => (0, _transformValue.default)(key, value))).done());
   const ltrStyles = (0, _objectUtils.objMap)(expandedObject, frame => (0, _objectUtils.objMapEntry)(frame, _generateLtr.default));
   const rtlStyles = (0, _objectUtils.objMap)(expandedObject, frame => (0, _objectUtils.objMapEntry)(frame, entry => (0, _generateRtl.default)(entry) ?? entry));
   const ltrString = constructKeyframesObj(ltrStyles);
@@ -1917,16 +2279,27 @@ function styleXKeyframes(frames) {
     priority: 1
   }];
 }
-function expandFrameShorthands(frame) {
-  return (0, _objectUtils.objFromEntries)((0, _objectUtils.objEntries)(frame).flatMap(pair => (0, _expandShorthands.default)(pair)));
+function expandFrameShorthands(frame, options) {
+  return (0, _objectUtils.objFromEntries)((0, _objectUtils.objEntries)(frame).flatMap(pair => (0, _index.default)(pair, options).map(_ref => {
+    let [key, value] = _ref;
+    if (typeof value === 'string' || typeof value === 'number') {
+      return [key, value];
+    }
+    return null;
+  }).filter(Boolean))
+  // Keyframes are not combined. The nulls can be skipped
+  .filter(_ref2 => {
+    let [key, value] = _ref2;
+    return value != null;
+  }));
 }
 
 // Create t
 function constructKeyframesObj(frames) {
-  return (0, _objectUtils.objEntries)(frames).map(_ref => {
-    let [key, value] = _ref;
-    return `${key}{${(0, _objectUtils.objEntries)(value).map(_ref2 => {
-      let [k, v] = _ref2;
+  return (0, _objectUtils.objEntries)(frames).map(_ref3 => {
+    let [key, value] = _ref3;
+    return `${key}{${(0, _objectUtils.objEntries)(value).map(_ref4 => {
+      let [k, v] = _ref4;
       return `${k}:${v};`;
     }).join('')}}`;
   }).join('');
@@ -1981,18 +2354,18 @@ function _interopRequireDefault$2(obj) { return obj && obj.__esModule ? obj : {
 
 // These are the implementations of those functions.
 
-const create = _stylexCreate.default;
-var create_1 = lib.create = create;
-const keyframes = _stylexKeyframes.default;
-var keyframes_1 = lib.keyframes = keyframes;
-const include = _stylexInclude.default;
-var include_1 = lib.include = include;
+const create$1 = _stylexCreate.default;
+var create_1 = lib.create = create$1;
+const keyframes$1 = _stylexKeyframes.default;
+var keyframes_1 = lib.keyframes = keyframes$1;
+const include$1 = _stylexInclude.default;
+var include_1 = lib.include = include$1;
 const messages = m;
 messages_1 = lib.messages = messages;
 const IncludedStyles = _stylexInclude.IncludedStyles;
 var IncludedStyles_1 = lib.IncludedStyles = IncludedStyles;
-const firstThatWorks = _stylexFirstThatWorks.default;
-var firstThatWorks_1 = lib.firstThatWorks = firstThatWorks;
+const firstThatWorks$1 = _stylexFirstThatWorks.default;
+var firstThatWorks_1 = lib.firstThatWorks = firstThatWorks$1;
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -3059,7 +3432,7 @@ StyleXSheet$1.styleSheet = styleSheet;
 Object.defineProperty(stylexInject, "__esModule", {
   value: true
 });
-stylexInject.default = inject;
+stylexInject.default = inject$1;
 var _StyleXSheet = StyleXSheet$1;
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -3070,7 +3443,7 @@ var _StyleXSheet = StyleXSheet$1;
  * 
  */
 
-function inject(ltrRule, priority) {
+function inject$1(ltrRule, priority) {
   let rtlRule = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
   _StyleXSheet.styleSheet.insert(ltrRule, priority, rtlRule);
 }
@@ -3087,101 +3460,63 @@ function inject(ltrRule, priority) {
 Object.defineProperty(stylex$1, "__esModule", {
   value: true
 });
-var default_1 = stylex$1.default = void 0;
+stylex$1.UNSUPPORTED_PROPERTY = void 0;
+stylex$1.apply = apply;
+stylex$1.stylex = stylex$1.keyframes = stylex$1.inject = stylex$1.include = stylex$1.firstThatWorks = default_1 = stylex$1.default = stylex$1.create = void 0;
 var _stylexInject = _interopRequireDefault(stylexInject);
+var _styleq = require$$1;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const cache = new WeakMap() ;
-function stylex() {
-  // Keep a set of property commits to the className
-  const definedProperties = [];
-  let className = '';
-  let nextCache = cache;
+const stylex = function stylex() {
   for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
     styles[_key] = arguments[_key];
   }
-  while (styles.length) {
-    // Push nested styles back onto the stack to be processed
-    const possibleStyle = styles.pop();
-    if (Array.isArray(possibleStyle)) {
-      for (let i = 0; i < possibleStyle.length; i++) {
-        styles.push(possibleStyle[i]);
-      }
-      continue;
-    }
-
-    // Process an individual style object
-    const styleObj = possibleStyle;
-    if (styleObj != null && typeof styleObj === 'object') {
-      // Build up the class names defined by this object
-      let classNameChunk = '';
-      if (nextCache != null && nextCache.has(styleObj)) {
-        // Cache: read
-        const cacheEntry = nextCache.get(styleObj);
-        if (cacheEntry != null) {
-          classNameChunk = cacheEntry.classNameChunk;
-          definedProperties.push(...cacheEntry.definedPropertiesChunk);
-          nextCache = cacheEntry.next;
-        }
-      } else {
-        // Record the properties this object defines (and that haven't already
-        // been defined by later objects.)
-        const definedPropertiesChunk = [];
-        for (const prop in styleObj) {
-          const value = styleObj[prop];
-          // Style declarations, e.g., opacity: 's3fkgpd'
-          if (typeof value === 'string' || value === null) {
-            // Skip adding to the chunks if property has already been seen
-            if (!definedProperties.includes(prop)) {
-              definedProperties.push(prop);
-              definedPropertiesChunk.push(prop);
-              if (typeof value === 'string') {
-                classNameChunk += classNameChunk ? ' ' + value : value;
-              }
-            }
-          }
-        }
-        // Cache: write
-        if (nextCache != null) {
-          const emptyCache = new WeakMap();
-          nextCache.set(styleObj, {
-            classNameChunk,
-            definedPropertiesChunk,
-            next: emptyCache
-          });
-          nextCache = emptyCache;
-        }
-      }
-
-      // Order of classes in chunks matches property-iteration order of style
-      // object. Order of chunks matches passed order of styles from first to
-      // last (which we iterate over in reverse).
-      if (classNameChunk) {
-        className = className ? classNameChunk + ' ' + className : classNameChunk;
-      }
-    }
-  }
+  const [className] = (0, _styleq.styleq)(styles);
   return className;
+};
+stylex$1.stylex = stylex;
+function apply() {
+  for (var _len2 = arguments.length, styles = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    styles[_key2] = arguments[_key2];
+  }
+  const [className, style] = (0, _styleq.styleq)(styles);
+  return {
+    className,
+    style
+  };
 }
+stylex.apply = apply;
 function stylexCreate(_styles) {
   throw new Error('stylex.create should never be called. It should be compiled away.');
 }
 function stylexIncludes(_styles) {
   throw new Error('stylex.extends should never be called. It should be compiled away.');
 }
-stylex.create = stylexCreate;
-stylex.include = stylexIncludes;
-stylex.keyframes = _keyframes => {
+const create = stylexCreate;
+stylex$1.create = create;
+stylex.create = create;
+const include = stylexIncludes;
+stylex$1.include = include;
+stylex.include = include;
+const keyframes = _keyframes => {
   throw new Error('stylex.keyframes should never be called');
 };
-stylex.firstThatWorks = function () {
+stylex$1.keyframes = keyframes;
+stylex.keyframes = keyframes;
+const firstThatWorks = function () {
   throw new Error('stylex.firstThatWorks should never be called.');
 };
-stylex.inject = _stylexInject.default;
-stylex.UNSUPPORTED_PROPERTY = props => {
+stylex$1.firstThatWorks = firstThatWorks;
+stylex.firstThatWorks = firstThatWorks;
+const inject = _stylexInject.default;
+stylex$1.inject = inject;
+stylex.inject = inject;
+const UNSUPPORTED_PROPERTY = props => {
   throw new Error('stylex.UNSUPPORTED_PROPERTY should never be called. It should be compiled away.');
 };
+stylex$1.UNSUPPORTED_PROPERTY = UNSUPPORTED_PROPERTY;
+stylex.UNSUPPORTED_PROPERTY = UNSUPPORTED_PROPERTY;
 var _default = stylex;
-default_1 = stylex$1.default = _default;
+var default_1 = stylex$1.default = _default;
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -3518,16 +3853,30 @@ function isExported(path) {
  *
  * End-users can choose to not use this function and use their own logic instead.
  */
+
 const processStylexRules = function processStylexRules(rules) {
   if (rules.length === 0) {
     return '';
   }
   const sortedRules = rules.sort((_ref2, _ref3) => {
-    let [firstSelector,, firstPriority] = _ref2;
-    let [secondSelector,, secondPriority] = _ref3;
+    let [_1, {
+      ltr: rule1
+    }, firstPriority] = _ref2;
+    let [_2, {
+      ltr: rule2
+    }, secondPriority] = _ref3;
     const priorityComparison = firstPriority - secondPriority;
     if (priorityComparison !== 0) return priorityComparison;
-    return firstSelector < secondSelector ? -1 : 1;
+    if (rule1.startsWith('@') && !rule2.startsWith('@')) {
+      const query1 = rule1.slice(0, rule1.indexOf('{'));
+      const query2 = rule2.slice(0, rule2.indexOf('{'));
+      if (query1 !== query2) {
+        return query1.localeCompare(query2);
+      }
+    }
+    const property1 = rule1.slice(rule1.lastIndexOf('{'));
+    const property2 = rule2.slice(rule2.lastIndexOf('{'));
+    return property1.localeCompare(property2);
   });
   const collectedCSS = Array.from(new Map(sortedRules).values()).flatMap(_ref4 => {
     let {