@stylexjs/babel-plugin 0.1.0-beta.6 → 0.2.0-beta.8

package/lib/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var t = require('@babel/types');
 var require$$0 = require('postcss-value-parser');
 var path = require('path');
+var require$$0$1 = require('invariant');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -25,7 +26,7 @@ function _interopNamespaceDefault(e) {
 
 var t__namespace = /*#__PURE__*/_interopNamespaceDefault(t);
 
-function _defineProperty(obj, key, value) {
+function _defineProperty$1(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value: value,
@@ -49,15 +50,15 @@ class StateManager {
   // resuls of `stylex.create` calls that should be kept
 
   constructor(state) {
-    _defineProperty(this, "_state", void 0);
-    _defineProperty(this, "stylexImport", new Set());
-    _defineProperty(this, "stylexCreateImport", new Set());
-    _defineProperty(this, "stylexIncludeImport", new Set());
-    _defineProperty(this, "stylexFirstThatWorksImport", new Set());
-    _defineProperty(this, "stylexKeyframesImport", new Set());
-    _defineProperty(this, "styleMap", new Map());
-    _defineProperty(this, "styleVars", new Map());
-    _defineProperty(this, "styleVarsToKeep", new Set());
+    _defineProperty$1(this, "_state", void 0);
+    _defineProperty$1(this, "stylexImport", new Set());
+    _defineProperty$1(this, "stylexCreateImport", new Set());
+    _defineProperty$1(this, "stylexIncludeImport", new Set());
+    _defineProperty$1(this, "stylexFirstThatWorksImport", new Set());
+    _defineProperty$1(this, "stylexKeyframesImport", new Set());
+    _defineProperty$1(this, "styleMap", new Map());
+    _defineProperty$1(this, "styleVars", new Map());
+    _defineProperty$1(this, "styleVarsToKeep", new Set());
     this._state = state;
     state.file.metadata.stylex = [];
   }
@@ -70,7 +71,9 @@ class StateManager {
       stylexSheetName: options.stylexSheetName ?? undefined,
       classNamePrefix: options.classNamePrefix ?? 'x',
       importSources: options.importSources ?? [name, 'stylex'],
-      definedStylexCSSVariables: options.definedStylexCSSVariables ?? {}
+      definedStylexCSSVariables: options.definedStylexCSSVariables ?? {},
+      genConditionalClasses: !!options.genConditionalClasses,
+      allowUnsafeProperties: !!options.allowUnsafeProperties
     };
     return this._state.opts;
   }
@@ -191,7 +194,7 @@ function readRequires(path, state) {
 
 var lib = {};
 
-var stylexCreate = {};
+var stylexCreate$1 = {};
 
 var convertToClassName$1 = {};
 
@@ -254,8 +257,8 @@ function murmurhash2_32_gc(str, seed) {
   return h >>> 0;
 }
 const hash = str => murmurhash2_32_gc(str, 1).toString(36);
-var _default = hash;
-hash$1.default = _default;
+var _default$1 = hash;
+hash$1.default = _default$1;
 
 var dashify$1 = {};
 
@@ -327,8 +330,8 @@ Object.defineProperty(leadingZero, "__esModule", {
   value: true
 });
 leadingZero.default = normalizeLeadingZero;
-var _postcssValueParser$5 = _interopRequireDefault$b(require$$0);
-function _interopRequireDefault$b(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _postcssValueParser$5 = _interopRequireDefault$d(require$$0);
+function _interopRequireDefault$d(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * Remove leading zeros from numbers
  */
@@ -396,8 +399,8 @@ Object.defineProperty(timings$1, "__esModule", {
   value: true
 });
 timings$1.default = normalizeTimings;
-var _postcssValueParser$4 = _interopRequireDefault$a(require$$0);
-function _interopRequireDefault$a(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _postcssValueParser$4 = _interopRequireDefault$c(require$$0);
+function _interopRequireDefault$c(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * Turn millisecond values to seconds (shorter), except when < 10ms
  */
@@ -491,8 +494,8 @@ Object.defineProperty(zeroDimensions, "__esModule", {
   value: true
 });
 zeroDimensions.default = normalizeZeroDimensions;
-var _postcssValueParser$3 = _interopRequireDefault$9(require$$0);
-function _interopRequireDefault$9(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _postcssValueParser$3 = _interopRequireDefault$b(require$$0);
+function _interopRequireDefault$b(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const angles = ['deg', 'grad', 'turn', 'rad'];
 const timings = ['ms', 's'];
 
@@ -538,7 +541,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.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;
+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;
 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.';
@@ -555,6 +558,8 @@ const UNKNOWN_PROP_KEY = 'Unknown property key';
 messages$4.UNKNOWN_PROP_KEY = UNKNOWN_PROP_KEY;
 const INVALID_PSEUDO = 'Invalid pseudo selector, not on the whitelist.';
 messages$4.INVALID_PSEUDO = INVALID_PSEUDO;
+const NO_CONDITIONAL_SHORTHAND = 'You cannot use conditional style values for a shorthand property.';
+messages$4.NO_CONDITIONAL_SHORTHAND = NO_CONDITIONAL_SHORTHAND;
 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';
@@ -579,6 +584,8 @@ 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.
@@ -593,9 +600,9 @@ Object.defineProperty(detectUnclosedFns$1, "__esModule", {
   value: true
 });
 detectUnclosedFns$1.default = detectUnclosedFns;
-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; }
+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; }
 /**
  * Remove leading zeros from numbers
  */
@@ -622,15 +629,15 @@ Object.defineProperty(normalizeValue$1, "__esModule", {
   value: true
 });
 normalizeValue$1.default = normalizeValue;
-var _fontSizePxToRem = _interopRequireDefault$8(fontSizePxToRem);
-var _leadingZero = _interopRequireDefault$8(leadingZero);
-var _quotes = _interopRequireDefault$8(quotes);
-var _timings = _interopRequireDefault$8(timings$1);
-var _whitespace = _interopRequireDefault$8(whitespace);
-var _zeroDimensions = _interopRequireDefault$8(zeroDimensions);
-var _detectUnclosedFns = _interopRequireDefault$8(detectUnclosedFns$1);
-var _postcssValueParser$2 = _interopRequireDefault$8(require$$0);
-function _interopRequireDefault$8(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 }; }
 // `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];
@@ -643,8 +650,8 @@ Object.defineProperty(transformValue$1, "__esModule", {
   value: true
 });
 transformValue$1.default = transformValue;
-var _normalizeValue = _interopRequireDefault$7(normalizeValue$1);
-function _interopRequireDefault$7(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _normalizeValue = _interopRequireDefault$9(normalizeValue$1);
+function _interopRequireDefault$9(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -840,8 +847,8 @@ Object.defineProperty(generateRtl, "__esModule", {
   value: true
 });
 generateRtl.default = generateRTL;
-var _postcssValueParser$1 = _interopRequireDefault$6(require$$0);
-function _interopRequireDefault$6(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _postcssValueParser$1 = _interopRequireDefault$8(require$$0);
+function _interopRequireDefault$8(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -1080,10 +1087,10 @@ Object.defineProperty(generateCssRule, "__esModule", {
   value: true
 });
 generateCssRule.default = generateCSSRule;
-var _generateLtr$1 = _interopRequireDefault$5(generateLtr);
-var _generateRtl$1 = _interopRequireDefault$5(generateRtl);
-var _genCSSRule = _interopRequireDefault$5(genCSSRule);
-function _interopRequireDefault$5(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 }; }
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -1143,11 +1150,11 @@ Object.defineProperty(convertToClassName$1, "__esModule", {
   value: true
 });
 convertToClassName$1.default = convertToClassName;
-var _hash$1 = _interopRequireDefault$4(hash$1);
-var _dashify$1 = _interopRequireDefault$4(dashify$1);
-var _transformValue$1 = _interopRequireDefault$4(transformValue$1);
-var _generateCssRule = _interopRequireDefault$4(generateCssRule);
-function _interopRequireDefault$4(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 }; }
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -1183,9 +1190,14 @@ var expandShorthands = {};
 Object.defineProperty(expandShorthands, "__esModule", {
   value: true
 });
+expandShorthands.BANNED_PROPERTIES = void 0;
 expandShorthands.default = flatMapExpandedShorthands;
-var _postcssValueParser = _interopRequireDefault$3(require$$0);
-function _interopRequireDefault$3(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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; }
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -1245,70 +1257,233 @@ function splitValue(str) {
 
 /**
  * Shorthand properties:
- * - [x] all - Should be banned
- * - [ ] animation
- * - [ ] background
- * - [-] border
- * - [x] border-block-end
- * - [x] border-block-start
- * - [ ] border-bottom
+ * - [!] all - BANNED
+ * - [!] animation - BANNED
+ * - [!] background - BANNED
+ * - [x] border - adequate for now
+ * - [ ] border-block-end
+ * - [ ] border-block-start
+ * - [x] border-bottom
  * - [x] border-color
- * - [x] border-image
- * - [x] border-inline-end
- * - [x] border-inline-start
- * - [ ] border-left
+ * - [o] border-image - Only the shorthand is allowed.
+ * - [ ] border-inline-end
+ * - [ ] border-inline-start
+ * - [!] border-left - BANNED
  * - [x] border-radius
- * - [ ] border-right
+ * - [!] border-right
  * - [x] border-style
  * - [ ] border-top
  * - [x] border-width
- * - [ ] column-rule
- * - [ ] columns
- * - [ ] flex
- * - [ ] flex-flow
- * - [ ] font
- * - [ ] gap
- * - [ ] grid
- * - [ ] grid-area
- * - [ ] grid-column
- * - [ ] grid-row
- * - [ ] grid-template
- * - [ ] list-style
+ * - [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
- * - [ ] mask
- * - [ ] offset
- * - [ ] outline
+ * - [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
- * - [ ] place-content
- * - [ ] place-items
- * - [ ] place-self
- * - [ ] scroll-margin
- * - [ ] scroll-padding
- * - [ ] text-decoration
- * - [ ] text-emphasis
- * - [ ] transition
+ * - [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
  */
 
+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.'
+};
+expandShorthands.BANNED_PROPERTIES = BANNED_PROPERTIES;
 const expansions = {
-  // ...aliases,
   border: rawValue => {
     return [['borderTop', rawValue], ['borderEnd', rawValue], ['borderBottom', rawValue], ['borderStart', rawValue]];
   },
-  /*
-  // Add this later, as this will be a breaking change
-  border: (rawValue: string) => {
-    if (typeof rawValue === 'number') {
-      return expansions.borderWidth(rawValue);
-    }
-    const [width, style, color] = splitValue(rawValue);
-    return [
-      ...expansions.borderWidth(width),
-      ...expansions.borderStyle(style),
-      ...expansions.borderColor(color),
-    ];
-  }
-  */
+  // 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],
+  //   ];
+  // },
   borderColor: rawValue => {
     const [top, right = top, bottom = top, left = right] = splitValue(rawValue);
     return [['borderTopColor', top], ['borderEndColor', right], ['borderBottomColor', bottom], ['borderStartColor', left]];
@@ -1355,8 +1530,37 @@ const expansions = {
   },
   paddingVertical: rawValue => {
     return [['paddingTop', rawValue], ['paddingBottom', rawValue]];
+  },
+  gap: rawValue => {
+    if (typeof rawValue === 'number') {
+      return [['rowGap', rawValue], ['columnGap', rawValue]];
+    }
+    const [row, column = row] = splitValue(rawValue);
+    return [['rowGap', row], ['columnGap', column]];
+  },
+  placeContent: rawValue => {
+    const [align, justify = align] = splitValue(rawValue);
+    return [['alignContent', align], ['justifyContent', justify]];
+  },
+  placeItems: rawValue => {
+    const [align, justify = align] = splitValue(rawValue);
+    return [['alignItems', align], ['justifyItems', justify]];
+  },
+  placeSelf: rawValue => {
+    const [align, justify = align] = splitValue(rawValue);
+    return [['alignSelf', align], ['justifySelf', justify]];
+  },
+  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]];
+  },
+  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]];
   }
 };
+const expandedKeys = [...Object.keys(expansions), ...Object.keys(BANNED_PROPERTIES)];
+expandShorthands.expandedKeys = expandedKeys;
 function flatMapExpandedShorthands(objEntry) {
   const [key, value] = objEntry;
   const expansion = expansions[key];
@@ -1414,7 +1618,7 @@ Object.defineProperty(objectUtils, "__esModule", {
   value: true
 });
 objectUtils.Pipe = void 0;
-objectUtils.flattenObject = flattenObject$1;
+objectUtils.flattenObject = flattenObject;
 objectUtils.objEntries = objEntries;
 objectUtils.objFromEntries = objFromEntries;
 objectUtils.objMap = objMap;
@@ -1433,10 +1637,10 @@ var _stylexInclude$2 = stylexInclude$1;
 
 // A bunch of object utils with better Flow types
 
-function flattenObject$1(obj) {
+function flattenObject(obj) {
   const result = {};
   for (const [key, value] of objEntries(obj)) {
-    if (typeof value === 'string') {
+    if (typeof value === 'string' || value == null) {
       result[key] = value;
     } else if (value instanceof _stylexInclude$2.IncludedStyles) {
       result[key] = value;
@@ -1503,18 +1707,18 @@ class Pipe {
 }
 objectUtils.Pipe = Pipe;
 
-Object.defineProperty(stylexCreate, "__esModule", {
+Object.defineProperty(stylexCreate$1, "__esModule", {
   value: true
 });
-stylexCreate.default = styleXCreateSet;
-var _convertToClassName = _interopRequireDefault$2(convertToClassName$1);
-var _expandShorthands$1 = _interopRequireDefault$2(expandShorthands);
+stylexCreate$1.default = styleXCreateSet;
+var _convertToClassName = _interopRequireDefault$4(convertToClassName$1);
+var _expandShorthands$1 = _interopRequireWildcard$1(expandShorthands);
 var _objectUtils$1 = objectUtils;
 var messages$1 = _interopRequireWildcard$1(messages$4);
 var _stylexInclude$1 = stylexInclude$1;
 function _getRequireWildcardCache$1(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache$1 = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard$1(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache$1(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; }
-function _interopRequireDefault$2(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault$4(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -1544,7 +1748,11 @@ function styleXCreateSet(namespaces) {
       throw new Error(messages$1.ILLEGAL_NAMESPACE_VALUE);
     }
     const [resolvedNamespace, injected] = styleXCreateNamespace(namespace, options);
-    resolvedNamespaces[namespaceName] = (0, _objectUtils$1.flattenObject)(resolvedNamespace);
+    const compiledNamespace = (0, _objectUtils$1.flattenObject)(resolvedNamespace);
+    resolvedNamespaces[namespaceName] = {
+      ...compiledNamespace,
+      $$css: true
+    };
     for (const cn of Object.keys(injected)) {
       if (injectedStyles[cn] == null) {
         injectedStyles[cn] = injected[cn];
@@ -1580,7 +1788,7 @@ function styleXCreateNamespace(style, options) {
       return [[key, value]];
     }
     if (value != null && typeof value === 'object' && !Array.isArray(value)) {
-      if (!key.startsWith(':') && !key.startsWith('@')) {
+      if (!key.startsWith(':') && !key.startsWith('@') && _expandShorthands$1.expandedKeys.includes(key)) {
         throw new Error(messages$1.INVALID_PSEUDO);
       }
       return [[key, (0, _objectUtils$1.objFromEntries)((0, _objectUtils$1.objEntries)(value).flatMap(_ref2 => {
@@ -1588,15 +1796,21 @@ 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]);
       }))]];
     } else {
-      if (typeof value !== 'string' && typeof value !== 'number' && !Array.isArray(value)) {
+      if (value !== null && typeof value !== 'string' && typeof value !== 'number' && !Array.isArray(value)) {
         throw new Error(messages$1.ILLEGAL_PROP_VALUE);
       }
       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]);
     }
   });
@@ -1612,18 +1826,42 @@ function styleXCreateNamespace(style, options) {
     if (val instanceof _stylexInclude$1.IncludedStyles) {
       resolvedNamespace[key] = val;
     } else if (val != null && typeof val === 'object' && !Array.isArray(val)) {
-      const pseudo = key;
-      const innerObj = {};
-      for (const [innerKey, innerVal] of (0, _objectUtils$1.objEntries)(val)) {
-        const [updatedKey, className, cssRule] = (0, _convertToClassName.default)([innerKey, innerVal], pseudo, options);
-        innerObj[updatedKey] = className;
-        injectedStyles[updatedKey + pseudo] = [className, cssRule];
+      if (key.startsWith(':') || key.startsWith('@')) {
+        const pseudo = key;
+        const innerObj = {};
+        for (const [innerKey, innerVal] of (0, _objectUtils$1.objEntries)(val)) {
+          if (innerVal === null) {
+            innerObj[innerKey] = null;
+          } else {
+            const [updatedKey, className, cssRule] = (0, _convertToClassName.default)([innerKey, innerVal], pseudo, options);
+            innerObj[updatedKey] = className;
+            injectedStyles[updatedKey + pseudo] = [className, cssRule];
+          }
+        }
+        resolvedNamespace[key] = innerObj;
+      } else {
+        const propKey = key;
+        const classNames = [];
+        for (const [pseudo, innerVal] of (0, _objectUtils$1.objEntries)(val)) {
+          if (pseudo !== 'default' && !pseudo.startsWith(':') && !pseudo.startsWith('@')) {
+            throw new Error(messages$1.INVALID_PSEUDO);
+          }
+          if (innerVal !== null) {
+            const [updatedKey, className, cssRule] = (0, _convertToClassName.default)([propKey, innerVal], pseudo === 'default' ? undefined : pseudo, options);
+            injectedStyles[updatedKey + pseudo] = [className, cssRule];
+            classNames.push(className);
+          }
+        }
+        resolvedNamespace[key] = classNames.join(' ');
       }
-      resolvedNamespace[key] = innerObj;
     } else {
-      const [updatedKey, className, cssRule] = (0, _convertToClassName.default)([key, val], undefined, options);
-      resolvedNamespace[updatedKey] = className;
-      injectedStyles[updatedKey] = [className, cssRule];
+      if (val === null) {
+        resolvedNamespace[key] = null;
+      } else {
+        const [updatedKey, className, cssRule] = (0, _convertToClassName.default)([key, val], undefined, options);
+        resolvedNamespace[updatedKey] = className;
+        injectedStyles[updatedKey] = [className, cssRule];
+      }
     }
   }
   const finalInjectedStyles = (0, _objectUtils$1.objFromEntries)((0, _objectUtils$1.objValues)(injectedStyles));
@@ -1636,14 +1874,14 @@ Object.defineProperty(stylexKeyframes, "__esModule", {
   value: true
 });
 stylexKeyframes.default = styleXKeyframes;
-var _hash = _interopRequireDefault$1(hash$1);
-var _expandShorthands = _interopRequireDefault$1(expandShorthands);
-var _generateLtr = _interopRequireDefault$1(generateLtr);
-var _generateRtl = _interopRequireDefault$1(generateRtl);
-var _transformValue = _interopRequireDefault$1(transformValue$1);
-var _dashify = _interopRequireDefault$1(dashify$1);
+var _hash = _interopRequireDefault$3(hash$1);
+var _expandShorthands = _interopRequireDefault$3(expandShorthands);
+var _generateLtr = _interopRequireDefault$3(generateLtr);
+var _generateRtl = _interopRequireDefault$3(generateRtl);
+var _transformValue = _interopRequireDefault$3(transformValue$1);
+var _dashify = _interopRequireDefault$3(dashify$1);
 var _objectUtils = objectUtils;
-function _interopRequireDefault$1(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault$3(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -1721,14 +1959,14 @@ Object.defineProperty(lib, "__esModule", {
   value: true
 });
 var messages_1 = lib.messages = keyframes_1 = lib.keyframes = include_1 = lib.include = firstThatWorks_1 = lib.firstThatWorks = create_1 = lib.create = IncludedStyles_1 = lib.IncludedStyles = void 0;
-var _stylexCreate = _interopRequireDefault(stylexCreate);
-var _stylexKeyframes = _interopRequireDefault(stylexKeyframes);
+var _stylexCreate = _interopRequireDefault$2(stylexCreate$1);
+var _stylexKeyframes = _interopRequireDefault$2(stylexKeyframes);
 var _stylexInclude = _interopRequireWildcard(stylexInclude$1);
-var _stylexFirstThatWorks = _interopRequireDefault(stylexFirstThatWorks$1);
+var _stylexFirstThatWorks = _interopRequireDefault$2(stylexFirstThatWorks$1);
 var m = _interopRequireWildcard(messages$4);
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(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; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault$2(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -1788,7 +2026,8 @@ function convertToTestStyles(obj, varName, state) {
   for (const [key, value] of Object.entries(obj)) {
     const devClassName = namespaceToDevClassName(key, varName, state.filename ?? 'UnkownFile');
     result[key] = {
-      [devClassName]: devClassName
+      [devClassName]: devClassName,
+      $$css: true
     };
   }
   return result;
@@ -1803,7 +2042,7 @@ function convertToTestStyles(obj, varName, state) {
 function convertObjectToAST(obj) {
   return t__namespace.objectExpression(Object.entries(obj).map(_ref => {
     let [key, value] = _ref;
-    return value instanceof IncludedStyles_1 ? t__namespace.spreadElement(value.astNode) : t__namespace.objectProperty(canBeIdentifier(key) ? t__namespace.identifier(key) : t__namespace.stringLiteral(key), typeof value === 'string' ? t__namespace.stringLiteral(value) : convertObjectToAST(value));
+    return value instanceof IncludedStyles_1 ? t__namespace.spreadElement(value.astNode) : t__namespace.objectProperty(canBeIdentifier(key) ? t__namespace.identifier(key) : t__namespace.stringLiteral(key), typeof value === 'string' ? t__namespace.stringLiteral(value) : typeof value === 'boolean' ? t__namespace.booleanLiteral(value) : value === null ? t__namespace.nullLiteral() : convertObjectToAST(value));
   }));
 }
 function canBeIdentifier(str) {
@@ -1836,14 +2075,10 @@ function canBeIdentifier(str) {
 const VALID_CALLEES = ['String', 'Number', 'Math'];
 const INVALID_METHODS = ['random'];
 function isValidCallee(val) {
-  return VALID_CALLEES.includes(
-  // @ts-expect-error
-  val);
+  return VALID_CALLEES.includes(val);
 }
 function isInvalidMethod(val) {
-  return INVALID_METHODS.includes(
-  // @ts-expect-error
-  val);
+  return INVALID_METHODS.includes(val);
 }
 /**
  * Deopts the evaluation
@@ -2190,6 +2425,13 @@ function evaluateQuasis(path, quasis, state) {
   let str = '';
   let i = 0;
   const exprs = path.get('expressions');
+
+  // const exprs: Array<NodePath<t.Node>> = path.isTemplateLiteral()
+  //   ? path.get('expressions')
+  //   : (path as NodePath<t.TaggedTemplateExpression>)
+  //       .get('quasi')
+  //       .get('expressions');
+
   for (const elem of quasis) {
     // not confident, evaluated an expression we don't like
     if (!state.confident) break;
@@ -2270,7 +2512,7 @@ function transformStyleXCreate(path, state) {
     if (firstArg == null || !firstArg.isObjectExpression()) {
       throw new Error(messages_1.ILLEGAL_ARGUMENT_LENGTH);
     }
-    const processingState = preProcessStyleArg(firstArg);
+    preProcessStyleArg(firstArg, state);
     const injectedKeyframes = {};
     function keyframes(animation) {
       const [animationName, injectedStyle] = keyframes_1(animation, state.options);
@@ -2343,20 +2585,12 @@ function transformStyleXCreate(path, state) {
       state.styleVars.set(varName, path.parentPath);
     }
     path.replaceWith(convertObjectToAST(compiledStyles));
-    postProcessStyles(path, processingState);
     if (Object.keys(injectedStyles).length === 0) {
       return;
     }
     if (state.isDev || state.stylexSheetName == null) {
       const statementPath = findNearestStatementAncestor(path);
-      let stylexName;
-      state.stylexImport.forEach(importName => {
-        stylexName = importName;
-      });
-      if (stylexName == null) {
-        stylexName = '__stylex__';
-        statementPath.insertBefore(t__namespace.importDeclaration([t__namespace.importDefaultSpecifier(t__namespace.identifier(stylexName))], t__namespace.stringLiteral('stylex')));
-      }
+      let stylexName = getStylexDefaultImport(path, state);
       for (const [key, {
         ltr,
         priority,
@@ -2402,13 +2636,8 @@ function findNearestStatementAncestor(path) {
   return findNearestStatementAncestor(path.parentPath);
 }
 
-// These functions are for special handling of dynamic parts of the style object
-// Currently they handle spreading pre-defined style objects with stylex.create calls.
-//
-// It converts the spreads into a special string and remembers the original value in an object...
-
-function preProcessStyleArg(objPath) {
-  const state = {};
+// Converts typed spreads to `stylex.include` calls.
+function preProcessStyleArg(objPath, state) {
   objPath.traverse({
     SpreadElement(path) {
       const argument = path.get('argument');
@@ -2431,36 +2660,23 @@ function preProcessStyleArg(objPath) {
         // Disallow spreads within pseudo or media query objects
         throw new Error(messages_1.ILLEGAL_NESTED_PSEUDO);
       }
-      const key = `include(${toString(expression)})`;
-      path.replaceWith(t__namespace.objectProperty(t__namespace.stringLiteral(key), t__namespace.stringLiteral(key)));
-      state[key] = expression.node;
+      let stylexName = getStylexDefaultImport(path, state);
+      argument.replaceWith(t__namespace.callExpression(t__namespace.memberExpression(t__namespace.identifier(stylexName), t__namespace.identifier('include')), [expression.node]));
     }
   });
-  return state;
 }
-
-// Later, it finds those strings and replaces them back with their original values.
-function postProcessStyles(objPath, state) {
-  objPath.traverse({
-    ObjectProperty(path) {
-      const node = path.node.key;
-      if (node.type === 'StringLiteral' && state[node.value] != null) {
-        path.replaceWith(t__namespace.spreadElement(state[node.value]));
-      }
-    }
+function getStylexDefaultImport(path, state) {
+  const statementPath = findNearestStatementAncestor(path);
+  let stylexName;
+  state.stylexImport.forEach(importName => {
+    stylexName = importName;
   });
-}
-
-// A function to deterministicly convert a spreadded expression to a string.
-function toString(path) {
-  if (path.isIdentifier()) {
-    return path.node.name;
-  } else if (path.isStringLiteral() || path.isNumericLiteral()) {
-    return String(path.node.value);
-  } else if (path.isMemberExpression()) {
-    return `${toString(path.get('object'))}.${toString(path.get('property'))}`;
+  if (stylexName == null) {
+    stylexName = '__stylex__';
+    statementPath.insertBefore(t__namespace.importDeclaration([t__namespace.importDefaultSpecifier(t__namespace.identifier(stylexName))], t__namespace.stringLiteral('stylex')));
+    state.stylexImport.add(stylexName);
   }
-  throw new Error(path.node.type);
+  return stylexName;
 }
 
 /**
@@ -2551,6 +2767,422 @@ function assertValidKeyframes(obj) {
   }
 }
 
+var stylex$1 = {};
+
+var stylexInject = {};
+
+var StyleXSheet$1 = {};
+
+/**
+ * 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.
+ *
+ * 
+ */
+
+Object.defineProperty(StyleXSheet$1, "__esModule", {
+  value: true
+});
+StyleXSheet$1.styleSheet = StyleXSheet$1.StyleXSheet = void 0;
+var _invariant = _interopRequireDefault$1(require$$0$1);
+function _interopRequireDefault$1(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+const LIGHT_MODE_CLASS_NAME = '__fb-light-mode';
+const DARK_MODE_CLASS_NAME = '__fb-dark-mode';
+/**
+ * Take a theme and generate it's accompanying CSS variables
+ */
+function buildTheme(selector, theme) {
+  const lines = [];
+  lines.push(`${selector} {`);
+  for (const key in theme) {
+    const value = theme[key];
+    lines.push(`  --${key}: ${value};`);
+  }
+  lines.push('}');
+  return lines.join('\n');
+}
+
+/**
+ * Create a <style> tag and add it to the head.
+ */
+function makeStyleTag() {
+  const tag = document.createElement('style');
+  tag.setAttribute('type', 'text/css');
+  tag.setAttribute('data-stylex', 'true');
+  const head = document.head || document.getElementsByTagName('head')[0];
+  (0, _invariant.default)(head, 'expected head');
+  head.appendChild(tag);
+  return tag;
+}
+
+/**
+ * Check if the browser supports CSS variables
+ */
+function doesSupportCSSVariables() {
+  return globalThis.CSS != null && globalThis.CSS.supports != null && globalThis.CSS.supports('--fake-var:0');
+}
+
+// Regex to replace var(--foo) with an inlined version
+const VARIABLE_MATCH = /var\(--(.*?)\)/g;
+
+// Stylesheet options
+
+/**
+ * This class manages the CSS stylesheet for the page and the injection of new
+ * CSS rules.
+ */
+class StyleXSheet {
+  constructor(opts) {
+    this.tag = null;
+    this.injected = false;
+    this.ruleForPriority = new Map();
+    this.rules = [];
+    this.rootTheme = opts.rootTheme;
+    this.rootDarkTheme = opts.rootDarkTheme;
+    this.supportsVariables = opts.supportsVariables ?? doesSupportCSSVariables();
+  }
+  getVariableMatch() {
+    return VARIABLE_MATCH;
+  }
+
+  /**
+   * Check if we have don't have access to the dom
+   */
+  isHeadless() {
+    var _globalThis$document;
+    return this.tag == null || (globalThis === null || globalThis === void 0 ? void 0 : (_globalThis$document = globalThis.document) === null || _globalThis$document === void 0 ? void 0 : _globalThis$document.body) == null;
+  }
+
+  /**
+   * Get the stylesheet tag. Throw if none exists.
+   */
+  getTag() {
+    const {
+      tag
+    } = this;
+    (0, _invariant.default)(tag != null, 'expected tag');
+    return tag;
+  }
+
+  /**
+   * Get the current stylesheet CSS.
+   */
+  getCSS() {
+    return this.rules.join('\n');
+  }
+
+  /**
+   * Get the position of the rule in the stylesheet.
+   */
+  getRulePosition(rule) {
+    return this.rules.indexOf(rule);
+  }
+
+  /**
+   * Count of the current rules in the stylesheet. Used in tests.
+   */
+  getRuleCount() {
+    return this.rules.length;
+  }
+
+  /**
+   * Inject a style tag into the document head
+   */
+  inject() {
+    var _globalThis$document2;
+    if (this.injected) {
+      return;
+    }
+    this.injected = true;
+
+    // Running in a server environment
+    if (((_globalThis$document2 = globalThis.document) === null || _globalThis$document2 === void 0 ? void 0 : _globalThis$document2.body) == null) {
+      this.injectTheme();
+      return;
+    }
+
+    // Create style tag if in browser
+    this.tag = makeStyleTag();
+    this.injectTheme();
+  }
+
+  /**
+   * Inject the theme styles
+   */
+  injectTheme() {
+    if (this.rootTheme != null) {
+      this.insert(buildTheme(`:root, .${LIGHT_MODE_CLASS_NAME}`, this.rootTheme), 0);
+    }
+    if (this.rootDarkTheme != null) {
+      this.insert(buildTheme(`.${DARK_MODE_CLASS_NAME}:root, .${DARK_MODE_CLASS_NAME}`, this.rootDarkTheme), 0);
+    }
+  }
+
+  /**
+   * Inject custom theme styles (only for internal testing)
+   */
+  __injectCustomThemeForTesting(selector, theme) {
+    if (theme != null) {
+      this.insert(buildTheme(selector, theme), 0);
+    }
+  }
+
+  /**
+   * Delete the requested rule from the stylesheet
+   */
+  delete(rule) {
+    // Get the index of this rule
+    const index = this.rules.indexOf(rule);
+    (0, _invariant.default)(index >= 0, "Couldn't find the index for rule %s", rule);
+
+    // Remove the rule from our index
+    this.rules.splice(index, 1);
+    if (this.isHeadless()) {
+      return;
+    }
+    const tag = this.getTag();
+    const sheet = tag.sheet;
+    (0, _invariant.default)(sheet, 'expected sheet');
+    sheet.deleteRule(index);
+  }
+
+  /**
+   *
+   */
+  normalizeRule(rule) {
+    const {
+      rootTheme
+    } = this;
+    if (this.supportsVariables || rootTheme == null) {
+      return rule;
+    }
+    return rule.replace(VARIABLE_MATCH, (_match, name) => {
+      return rootTheme[name];
+    });
+  }
+
+  /**
+   * Get the rule position a rule should be inserted at according to the
+   * specified priority.
+   */
+  getInsertPositionForPriority(priority) {
+    // If there's an end rule associated with this priority, then get the next
+    // rule which will belong to the next priority
+    // The rule will be inserted before it and assigned to the current priority
+    const priorityRule = this.ruleForPriority.get(priority);
+    if (priorityRule != null) {
+      return this.rules.indexOf(priorityRule) + 1;
+    }
+
+    // If we've never created this priority before, then let's find the highest
+    // priority to target
+    const priorities = Array.from(this.ruleForPriority.keys()).sort((a, b) => b - a).filter(num => num > priority ? 1 : 0);
+
+    // If there's no priorities then place us at the start
+    if (priorities.length === 0) {
+      return this.getRuleCount();
+    }
+
+    // Place us next to the next highest priority
+    const lastPriority = priorities.pop();
+    return this.rules.indexOf(this.ruleForPriority.get(lastPriority));
+  }
+
+  /**
+   * Insert a rule into the stylesheet.
+   */
+  insert(rawLTRRule, priority, rawRTLRule) {
+    // Inject the stylesheet if it hasn't already been
+    if (this.injected === false) {
+      this.inject();
+    }
+    if (rawRTLRule != null) {
+      this.insert(addAncestorSelector$1(rawLTRRule, "html:not([dir='rtl'])"), priority);
+      this.insert(addAncestorSelector$1(rawRTLRule, "html[dir='rtl']"), priority);
+      return;
+    }
+    const rawRule = rawLTRRule;
+
+    // Don't insert this rule if it already exists
+    if (this.rules.includes(rawRule)) {
+      return;
+    }
+    const rule = this.normalizeRule(rawRule);
+
+    // Get the position where we should insert the rule
+    const insertPos = this.getInsertPositionForPriority(priority);
+    this.rules.splice(insertPos, 0, rule);
+
+    // Set this rule as the end of the priority group
+    this.ruleForPriority.set(priority, rule);
+    if (this.isHeadless()) {
+      return;
+    }
+    const tag = this.getTag();
+    const sheet = tag.sheet;
+    if (sheet != null) {
+      try {
+        sheet.insertRule(rule, insertPos);
+      } catch {
+        // Ignore: error likely due to inserting prefixed rules (e.g. `::-moz-range-thumb`).
+      }
+    }
+    // Ignore the case where sheet == null. It's an edge-case Edge 17 bug.
+  }
+}
+
+/**
+ * Adds an ancestor selector in a media-query-aware way.
+ */
+StyleXSheet$1.StyleXSheet = StyleXSheet;
+_defineProperty(StyleXSheet, "LIGHT_MODE_CLASS_NAME", LIGHT_MODE_CLASS_NAME);
+_defineProperty(StyleXSheet, "DARK_MODE_CLASS_NAME", DARK_MODE_CLASS_NAME);
+function addAncestorSelector$1(selector, ancestorSelector) {
+  if (!selector.startsWith('@')) {
+    return `${ancestorSelector} ${selector}`;
+  }
+  const firstBracketIndex = selector.indexOf('{');
+  const mediaQueryPart = selector.slice(0, firstBracketIndex + 1);
+  const rest = selector.slice(firstBracketIndex + 1);
+  return `${mediaQueryPart}${ancestorSelector} ${rest}`;
+}
+const styleSheet = new StyleXSheet({
+  supportsVariables: true,
+  rootTheme: {},
+  rootDarkTheme: {}
+});
+StyleXSheet$1.styleSheet = styleSheet;
+
+Object.defineProperty(stylexInject, "__esModule", {
+  value: true
+});
+stylexInject.default = inject;
+var _StyleXSheet = StyleXSheet$1;
+/**
+ * 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.
+ *
+ * 
+ */
+
+function inject(ltrRule, priority) {
+  let rtlRule = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+  _StyleXSheet.styleSheet.insert(ltrRule, priority, rtlRule);
+}
+
+/**
+ * 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.
+ *
+ * 
+ */
+
+Object.defineProperty(stylex$1, "__esModule", {
+  value: true
+});
+var default_1 = stylex$1.default = void 0;
+var _stylexInject = _interopRequireDefault(stylexInject);
+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;
+  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;
+      }
+    }
+  }
+  return className;
+}
+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 => {
+  throw new Error('stylex.keyframes should never be called');
+};
+stylex.firstThatWorks = function () {
+  throw new Error('stylex.firstThatWorks should never be called.');
+};
+stylex.inject = _stylexInject.default;
+stylex.UNSUPPORTED_PROPERTY = props => {
+  throw new Error('stylex.UNSUPPORTED_PROPERTY should never be called. It should be compiled away.');
+};
+var _default = stylex;
+default_1 = stylex$1.default = _default;
+
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -2578,38 +3210,21 @@ function transformStyleXMerge(path, state) {
     return;
   }
   let bailOut = false;
-  const resolvedStyles = {};
-  for (const arg of node.arguments) {
+  let conditional = false;
+  const resolvedArgs = [];
+  loop: for (const arg of node.arguments) {
     switch (arg.type) {
       case 'MemberExpression':
-        const {
-          property,
-          object,
-          computed
-        } = arg;
-        let objName = null;
-        let propName = null;
-        if (object.type === 'Identifier' && state.styleMap.has(object.name) && property.type === 'Identifier' && !computed) {
-          objName = object.name;
-          propName = property.name;
-        }
-        if (object.type === 'Identifier' && state.styleMap.has(object.name) && (property.type === 'StringLiteral' || property.type === 'NumericLiteral') && computed) {
-          objName = object.name;
-          propName = property.value;
-        }
-        if (objName != null && propName != null) {
-          const style = state.styleMap.get(objName);
-          if (style == null || style[propName] == null) {
-            throw new Error(`Unknown style ${objName}.${propName}. The defined style ${objName}, contains the following keys: ${Object.keys(style ?? {}).join(', ')}`);
-          }
-          const namespace = flattenObject(style[propName]);
-          Object.assign(resolvedStyles, namespace);
-        } else {
-          // Unknown style found. bail out.
+        const resolved = parseNullableStyle(arg, state);
+        if (resolved === 'other') {
           bailOut = true;
+          break loop;
+        } else {
+          resolvedArgs.push(resolved);
         }
         break;
       case 'ConditionalExpression':
+        conditional = true;
         const {
           test,
           consequent,
@@ -2619,53 +3234,36 @@ function transformStyleXMerge(path, state) {
         const fallback = parseNullableStyle(alternate, state);
         if (primary === 'other' || fallback === 'other') {
           bailOut = true;
-          break;
-        }
-        if (primary === null && fallback === null) {
-          // A no-op
-          break;
-        }
-        const allKeys = new Set([...Object.keys(primary ?? {}), ...Object.keys(fallback ?? {})]);
-        for (const key of allKeys) {
-          if (resolvedStyles[key] == null) {
-            const primaryValue = (primary === null || primary === void 0 ? void 0 : primary[key]) ?? resolvedStyles[key] ?? '';
-            const fallbackValue = (fallback === null || fallback === void 0 ? void 0 : fallback[key]) ?? resolvedStyles[key] ?? '';
-            resolvedStyles[key] = [test, primaryValue, fallbackValue];
-          }
+          break loop;
         }
+        resolvedArgs.push([test, primary, fallback]);
         break;
       case 'LogicalExpression':
+        conditional = true;
         if (arg.operator !== '&&') {
           bailOut = true;
-          break;
+          break loop;
         }
         const {
           left,
           right
         } = arg;
-        if (left.type === 'MemberExpression' && left.object.type === 'Identifier' && state.styleMap.has(left.object.name)) {
-          // We don't support `a && b` in stylex calls where `a` is a style namespace.
+        const leftResolved = parseNullableStyle(left, state);
+        const rightResolved = parseNullableStyle(right, state);
+        if (leftResolved !== 'other' || rightResolved === 'other') {
           bailOut = true;
-          break;
-        }
-        const value = parseNullableStyle(right, state);
-        if (value === 'other') {
-          bailOut = true;
-          break;
-        }
-        if (value === null) {
-          // A no-op??
-          break;
-        }
-        for (const [key, val] of Object.entries(value)) {
-          resolvedStyles[key] = [left, val, resolvedStyles[key] ?? ''];
+          break loop;
         }
+        resolvedArgs.push([left, rightResolved, null]);
         break;
       default:
         bailOut = true;
         break;
     }
   }
+  if (!state.options.genConditionalClasses && conditional) {
+    bailOut = true;
+  }
   if (bailOut) {
     path.traverse({
       MemberExpression(path) {
@@ -2692,27 +3290,11 @@ function transformStyleXMerge(path, state) {
     path.skip();
     // convert resolvedStyles to a string + ternary expressions
     // We no longer need the keys, so we can just use the values.
-    const stringExpression = makeStringExpression(Object.values(resolvedStyles));
+    const stringExpression = makeStringExpression(resolvedArgs);
     path.replaceWith(stringExpression);
   }
 }
 
-// This function takes nested objects with styles collapses them to a single level deep.
-// `':hover': {color: 'red'}` becomes `':hover.color': 'red'`
-function flattenObject(object) {
-  const result = {};
-  for (const [key, value] of Object.entries(object)) {
-    if (typeof value === 'string') {
-      result[key] = value;
-    } else if (typeof value === 'object') {
-      for (const [subKey, subValue] of Object.entries(value)) {
-        result[`${key}.${subKey}`] = subValue;
-      }
-    }
-  }
-  return result;
-}
-
 // Looks for Null or locally defined style namespaces.
 // Otherwise it returns the string "other"
 // Which is used as an indicator to bail out of this optimization.
@@ -2722,72 +3304,81 @@ function parseNullableStyle(node, state) {
   }
   if (t__namespace.isMemberExpression(node)) {
     const {
-      object: obj,
-      property: prop,
+      object,
+      property,
       computed: computed
     } = node;
-    if (obj.type !== 'Identifier' || !state.styleMap.has(obj.name) || prop.type !== 'Identifier' || computed) {
-      return 'other';
-    }
-    const namespace1 = state.styleMap.get(obj.name);
-    if (namespace1 == null) {
-      return 'other';
-    }
-    const style = namespace1[prop.name];
-    if (style == null) {
-      return 'other';
+    let objName = null;
+    let propName = null;
+    if (object.type === 'Identifier' && state.styleMap.has(object.name) && property.type === 'Identifier' && !computed) {
+      objName = object.name;
+      propName = property.name;
+    }
+    if (object.type === 'Identifier' && state.styleMap.has(object.name) && (property.type === 'StringLiteral' || property.type === 'NumericLiteral') && computed) {
+      objName = object.name;
+      propName = property.value;
+    }
+    if (objName != null && propName != null) {
+      const style = state.styleMap.get(objName);
+      if (style != null && style[propName] != null) {
+        return style[propName];
+      }
     }
-    return flattenObject(style);
-  } else {
-    return 'other';
   }
+  return 'other';
 }
 function makeStringExpression(values) {
-  let inTernary = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  // To start let's split the plain strings and everything else.
-  let strings = values.filter(value => typeof value === 'string').join(' ').trim();
-  if (inTernary && strings !== '') {
-    strings = ' ' + strings;
-  }
-  const nonStrings = values.filter(value => typeof value !== 'string');
-  const groupedByTest = groupBy(nonStrings, _ref => {
-    let [test, _a, _b] = _ref;
-    return test;
-  });
-  const eachTernary = [...groupedByTest.entries()].map(_ref2 => {
-    let [test, value] = _ref2;
-    const consequents = makeStringExpression(value.map(_ref3 => {
-      let [_a, a, _b] = _ref3;
-      return a;
-    }), true);
-    const fallbacks = makeStringExpression(value.map(_ref4 => {
-      let [_a, _b, b] = _ref4;
-      return b;
-    }), true);
-    return t__namespace.conditionalExpression(test, consequents, fallbacks);
+  const conditions = values.filter(v => Array.isArray(v)).map(v => v[0]);
+  if (conditions.length === 0) {
+    return t__namespace.stringLiteral(default_1(...values));
+  }
+  const conditionPermutations = genConditionPermutations(conditions.length);
+  const objEntries = conditionPermutations.map(permutation => {
+    let i = 0;
+    const args = values.map(v => {
+      if (Array.isArray(v)) {
+        const [test, primary, fallback] = v;
+        return permutation[i++] ? primary : fallback;
+      } else {
+        return v;
+      }
+    });
+    const key = permutation.reduce((soFar, bool) => soFar << 1 | (bool ? 1 : 0), 0);
+    return t__namespace.objectProperty(t__namespace.numericLiteral(key), t__namespace.stringLiteral(default_1(...args)));
   });
-  return addAll([t__namespace.stringLiteral(strings), ...eachTernary]);
-}
-function addAll(_ref5) {
-  let [first, ...nodes] = _ref5;
-  if (nodes.length === 0) {
-    return first;
-  }
-  return t__namespace.binaryExpression('+', first, addAll(nodes));
+  const objExpressions = t__namespace.objectExpression(objEntries);
+  const conditionsToKey = genBitwiseOrOfConditions(conditions);
+  return t__namespace.memberExpression(objExpressions, conditionsToKey, true);
 }
 
-// Array groupBy function
-function groupBy(array, key) {
-  const result = new Map();
-  for (const item of array) {
-    const k = key(item);
-    const array = result.get(k) ?? [];
-    array.push(item);
-    result.set(k, array);
+// A function to generate a list of all possible permutations of true and false for a given count of conditional expressions.
+// For example, if there are 2 conditional expressions, this function will return:
+// [[true, true], [true, false], [false, true], [false, false]]
+function genConditionPermutations(count) {
+  const result = [];
+  for (let i = 0; i < 2 ** count; i++) {
+    const combination = [];
+    for (let j = 0; j < count; j++) {
+      combination.push(Boolean(i & 1 << j));
+    }
+    result.push(combination);
   }
   return result;
 }
 
+// A function to generate a bitwise or of all the conditions.
+// For example, if there are 2 conditional expressions, this function will return:
+// `!!test1 << 2 | !!test2 << 1
+function genBitwiseOrOfConditions(conditions) {
+  const binaryExpressions = conditions.map((condition, i) => {
+    const shift = conditions.length - i - 1;
+    return t__namespace.binaryExpression('<<', t__namespace.unaryExpression('!', t__namespace.unaryExpression('!', condition)), t__namespace.numericLiteral(shift));
+  });
+  return binaryExpressions.reduce((acc, expr) => {
+    return t__namespace.binaryExpression('|', acc, expr);
+  });
+}
+
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *