@stylexjs/shared 0.7.5 → 0.9.0-beta.1

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

@@ -62,116 +62,9 @@ import type { TStyleValue } from '../common-types';
 
 type TReturn = $ReadOnlyArray<[string, TStyleValue]>;
 
-declare const shorthands: {
-  all: (_: TStyleValue) => TReturn,
-  animation: (value: TStyleValue) => Array<[string, TStyleValue]>,
-  animationRange: (value: TStyleValue) => TReturn,
-  background: (value: TStyleValue) => TReturn,
-  backgroundPosition: (value: TStyleValue) => TReturn,
-  border: (rawValue: TStyleValue) => TReturn,
-  borderInline: (rawValue: TStyleValue) => TReturn,
-  borderBlock: (rawValue: TStyleValue) => TReturn,
-  borderTop: (rawValue: TStyleValue) => TReturn,
-  borderInlineEnd: (rawValue: TStyleValue) => TReturn,
-  borderRight: (rawValue: TStyleValue) => TReturn,
-  borderBottom: (rawValue: TStyleValue) => TReturn,
-  borderInlineStart: (rawValue: TStyleValue) => TReturn,
-  borderLeft: (rawValue: TStyleValue) => TReturn,
-  borderInlineWidth: (rawValue: TStyleValue) => TReturn,
-  borderInlineStyle: (rawValue: TStyleValue) => TReturn,
-  borderInlineColor: (rawValue: TStyleValue) => TReturn,
-  borderBlockWidth: (rawValue: TStyleValue) => TReturn,
-  borderBlockStyle: (rawValue: TStyleValue) => TReturn,
-  borderBlockColor: (rawValue: TStyleValue) => TReturn,
-  borderColor: (value: TStyleValue) => TReturn,
-  borderStyle: (value: TStyleValue) => TReturn,
-  borderWidth: (value: TStyleValue) => TReturn,
-  borderInlineStartColor: (value: TStyleValue) => TReturn,
-  borderInlineEndColor: (value: TStyleValue) => TReturn,
-  borderInlineStartStyle: (value: TStyleValue) => TReturn,
-  borderInlineEndStyle: (value: TStyleValue) => TReturn,
-  borderInlineStartWidth: (value: TStyleValue) => TReturn,
-  borderInlineEndWidth: (value: TStyleValue) => TReturn,
-  borderLeftColor: (value: TStyleValue) => TReturn,
-  borderRightColor: (value: TStyleValue) => TReturn,
-  borderLeftStyle: (value: TStyleValue) => TReturn,
-  borderRightStyle: (value: TStyleValue) => TReturn,
-  borderLeftWidth: (value: TStyleValue) => TReturn,
-  borderRightWidth: (value: TStyleValue) => TReturn,
-  borderRadius: (value: TStyleValue) => TReturn,
-  borderStartStartRadius: (value: TStyleValue) => TReturn,
-  borderStartEndRadius: (value: TStyleValue) => TReturn,
-  borderEndStartRadius: (value: TStyleValue) => TReturn,
-  borderEndEndRadius: (value: TStyleValue) => TReturn,
-  borderTopLeftRadius: (value: TStyleValue) => TReturn,
-  borderTopRightRadius: (value: TStyleValue) => TReturn,
-  borderBottomLeftRadius: (value: TStyleValue) => TReturn,
-  borderBottomRightRadius: (value: TStyleValue) => TReturn,
-  borderImage: (value: TStyleValue) => TReturn,
-  columnRule: (value: TStyleValue) => TReturn,
-  columns: (value: TStyleValue) => TReturn,
-  container: (value: TStyleValue) => TReturn,
-  containIntrinsicSize: (value: TStyleValue) => TReturn,
-  flex: (value: TStyleValue) => TReturn,
-  flexFlow: (value: TStyleValue) => TReturn,
-  font: (value: TStyleValue) => TReturn,
-  fontVariant: (value: TStyleValue) => TReturn,
-  gap: (value: TStyleValue) => TReturn,
-  grid: (value: TStyleValue) => TReturn,
-  gridArea: (value: TStyleValue) => TReturn,
-  gridRow: (value: TStyleValue) => TReturn,
-  gridColumn: (value: TStyleValue) => TReturn,
-  gridTemplate: (value: TStyleValue) => TReturn,
-  inset: (value: TStyleValue) => TReturn,
-  insetInline: (value: TStyleValue) => TReturn,
-  insetBlock: (value: TStyleValue) => TReturn,
-  insetInlineStart: (value: TStyleValue) => TReturn,
-  insetInlineEnd: (value: TStyleValue) => TReturn,
-  left: (value: TStyleValue) => TReturn,
-  right: (value: TStyleValue) => TReturn,
-  listStyle: (value: TStyleValue) => TReturn,
-  margin: (value: TStyleValue) => TReturn,
-  marginInline: (value: TStyleValue) => TReturn,
-  marginBlock: (value: TStyleValue) => TReturn,
-  marginInlineStart: (value: TStyleValue) => TReturn,
-  marginInlineEnd: (value: TStyleValue) => TReturn,
-  marginLeft: (value: TStyleValue) => TReturn,
-  marginRight: (value: TStyleValue) => TReturn,
-  mask: (value: TStyleValue) => TReturn,
-  maskBorder: (value: TStyleValue) => TReturn,
-  offset: (value: TStyleValue) => TReturn,
-  outline: (value: TStyleValue) => TReturn,
-  overflow: (value: TStyleValue) => TReturn,
-  padding: (rawValue: TStyleValue) => TReturn,
-  paddingInline: (rawValue: TStyleValue) => TReturn,
-  paddingBlock: (rawValue: TStyleValue) => TReturn,
-  paddingInlineStart: (value: TStyleValue) => TReturn,
-  paddingInlineEnd: (value: TStyleValue) => TReturn,
-  paddingLeft: (value: TStyleValue) => TReturn,
-  paddingRight: (value: TStyleValue) => TReturn,
-  placeContent: (value: TStyleValue) => TReturn,
-  placeItems: (value: TStyleValue) => TReturn,
-  placeSelf: (value: TStyleValue) => TReturn,
-  scrollMargin: (value: TStyleValue) => TReturn,
-  scrollMarginBlock: (value: TStyleValue) => TReturn,
-  scrollMarginInline: (value: TStyleValue) => TReturn,
-  scrollMarginInlineStart: (value: TStyleValue) => TReturn,
-  scrollMarginInlineEnd: (value: TStyleValue) => TReturn,
-  scrollMarginLeft: (value: TStyleValue) => TReturn,
-  scrollMarginRight: (value: TStyleValue) => TReturn,
-  scrollPadding: (value: TStyleValue) => TReturn,
-  scrollPaddingBlock: (value: TStyleValue) => TReturn,
-  scrollPaddingInline: (value: TStyleValue) => TReturn,
-  scrollPaddingInlineStart: (value: TStyleValue) => TReturn,
-  scrollPaddingInlineEnd: (value: TStyleValue) => TReturn,
-  scrollPaddingLeft: (value: TStyleValue) => TReturn,
-  scrollPaddingRight: (value: TStyleValue) => TReturn,
-  scrollSnapType: (value: TStyleValue) => TReturn,
-  scrollTimeline: (value: TStyleValue) => TReturn,
-  textDecoration: (value: TStyleValue) => TReturn,
-  textEmphasis: (value: TStyleValue) => TReturn,
-  transition: (value: TStyleValue) => TReturn,
-};
+declare const shorthands: $ReadOnly<{
+  [key: string]: (TStyleValue) => TReturn,
+}>;
 
 declare const aliases: {
   borderHorizontal: $FlowFixMe,

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

@@ -8,7 +8,7 @@ var _stylexInclude = require("../stylex-include");
 var messages = _interopRequireWildcard(require("../messages"));
 var _objectUtils = require("../utils/object-utils");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function validateNamespace(namespace) {
   let conditions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   if (!(0, _objectUtils.isPlainObject)(namespace)) {

package/lib/preprocess-rules/flatten-raw-style-obj.d.ts

@@ -19,7 +19,6 @@ export declare function flattenRawStyleObject(
 ): ReadonlyArray<Readonly<[string, IPreRule]>>;
 export declare function _flattenRawStyleObject(
   style: RawStyles,
-  pseudos: ReadonlyArray<string>,
-  atRules: ReadonlyArray<string>,
+  keyPath: ReadonlyArray<string>,
   options: StyleXOptions,
 ): Array<Readonly<[string, AnyPreRule | PreIncludedStylesRule]>>;

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

@@ -8,11 +8,11 @@ exports.flattenRawStyleObject = flattenRawStyleObject;
 var _index = _interopRequireDefault(require("./index"));
 var _PreRule = require("./PreRule");
 var _stylexInclude = require("../stylex-include");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function flattenRawStyleObject(style, options) {
-  return _flattenRawStyleObject(style, [], [], options);
+  return _flattenRawStyleObject(style, [], options);
 }
-function _flattenRawStyleObject(style, pseudos, atRules, options) {
+function _flattenRawStyleObject(style, keyPath, options) {
   const flattened = [];
   for (const _key in style) {
     const value = style[_key];
@@ -27,7 +27,7 @@ function _flattenRawStyleObject(style, pseudos, atRules, options) {
         if (value === null) {
           flattened.push([property, new _PreRule.NullPreRule()]);
         } else {
-          flattened.push([property, new _PreRule.PreRule(property, value, pseudos, atRules)]);
+          flattened.push([property, new _PreRule.PreRule(property, value, keyPath.includes(key) ? keyPath.map(k => k === key ? property : k) : [...keyPath, property])]);
         }
       }
       continue;
@@ -61,7 +61,7 @@ function _flattenRawStyleObject(style, pseudos, atRules, options) {
         if (value === null) {
           flattened.push([property, new _PreRule.NullPreRule()]);
         } else {
-          flattened.push([property, new _PreRule.PreRule(property, value, pseudos, atRules)]);
+          flattened.push([property, new _PreRule.PreRule(property, value, keyPath.includes(_key) ? keyPath.map(k => k === _key ? property : k) : [...keyPath, property])]);
         }
       });
       continue;
@@ -70,16 +70,9 @@ function _flattenRawStyleObject(style, pseudos, atRules, options) {
       const equivalentPairs = {};
       for (const condition in value) {
         const innerValue = value[condition];
-        const pseudosToPassDown = [...pseudos];
-        const atRulesToPassDown = [...atRules];
-        if (condition.startsWith(':')) {
-          pseudosToPassDown.push(condition);
-        } else if (condition.startsWith('@')) {
-          atRulesToPassDown.push(condition);
-        }
         const pairs = _flattenRawStyleObject({
           [key]: innerValue
-        }, pseudosToPassDown, atRulesToPassDown, options);
+        }, keyPath.length > 0 ? [...keyPath, condition] : [key, condition], options);
         for (const [property, preRule] of pairs) {
           if (preRule instanceof _PreRule.PreIncludedStylesRule) {
             throw new Error('stylex.include can only be used at the top-level');
@@ -103,14 +96,7 @@ function _flattenRawStyleObject(style, pseudos, atRules, options) {
       }
     }
     if (typeof value === 'object' && (key.startsWith(':') || key.startsWith('@'))) {
-      const pseudosToPassDown = [...pseudos];
-      const atRulesToPassDown = [...atRules];
-      if (key.startsWith(':')) {
-        pseudosToPassDown.push(key);
-      } else if (key.startsWith('@')) {
-        atRulesToPassDown.push(key);
-      }
-      const pairs = _flattenRawStyleObject(value, pseudosToPassDown, atRulesToPassDown, options);
+      const pairs = _flattenRawStyleObject(value, [...keyPath, _key], options);
       for (const [property, preRule] of pairs) {
         flattened.push([key + '_' + property, preRule]);
       }

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

@@ -21,7 +21,6 @@ declare export function flattenRawStyleObject(
 
 declare export function _flattenRawStyleObject(
   style: RawStyles,
-  pseudos: $ReadOnlyArray<string>,
-  atRules: $ReadOnlyArray<string>,
+  keyPath: $ReadOnlyArray<string>,
   options: StyleXOptions,
 ): Array<$ReadOnly<[string, AnyPreRule | PreIncludedStylesRule]>>;

package/lib/preprocess-rules/index.d.ts

@@ -13,6 +13,6 @@ export declare function getExpandedKeys(
 ): ReadonlyArray<string>;
 declare function flatMapExpandedShorthands(
   objEntry: Readonly<[string, TStyleValue]>,
-  options: StyleXOptions,
+  options: Readonly<{ styleResolution: StyleXOptions['styleResolution'] }>,
 ): ReadonlyArray<[string, TStyleValue]>;
 export default flatMapExpandedShorthands;

package/lib/preprocess-rules/index.js

@@ -8,7 +8,7 @@ exports.getExpandedKeys = getExpandedKeys;
 var _applicationOrder = _interopRequireDefault(require("./application-order"));
 var _legacyExpandShorthands = _interopRequireDefault(require("./legacy-expand-shorthands"));
 var _propertySpecificity = _interopRequireDefault(require("./property-specificity"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const expansions = {
   'application-order': _applicationOrder.default,
   'property-specificity': _propertySpecificity.default,

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

@@ -15,5 +15,8 @@ declare export function getExpandedKeys(
 
 declare export default function flatMapExpandedShorthands(
   objEntry: $ReadOnly<[string, TStyleValue]>,
-  options: StyleXOptions,
+  options: $ReadOnly<{
+    styleResolution: StyleXOptions['styleResolution'],
+    ...
+  }>,
 ): $ReadOnlyArray<[string, TStyleValue]>;

package/lib/preprocess-rules/legacy-expand-shorthands.d.ts

@@ -103,44 +103,9 @@ import type { TStyleValue } from '../common-types';
  */
 
 type TReturn = ReadonlyArray<[string, TStyleValue]>;
-declare const shorthands: {
-  border: (rawValue: TStyleValue) => TReturn;
-  borderColor: (rawValue: TStyleValue) => TReturn;
-  borderHorizontal: (rawValue: TStyleValue) => TReturn;
-  borderStyle: (rawValue: TStyleValue) => TReturn;
-  borderVertical: (rawValue: TStyleValue) => TReturn;
-  borderWidth: (rawValue: TStyleValue) => TReturn;
-  borderHorizontalColor: (rawValue: TStyleValue) => TReturn;
-  borderHorizontalStyle: (rawValue: TStyleValue) => TReturn;
-  borderHorizontalWidth: (rawValue: TStyleValue) => TReturn;
-  borderVerticalColor: (rawValue: TStyleValue) => TReturn;
-  borderVerticalStyle: (rawValue: TStyleValue) => TReturn;
-  borderVerticalWidth: (rawValue: TStyleValue) => TReturn;
-  borderRadius: (rawValue: TStyleValue) => TReturn;
-  inset: (rawValue: TStyleValue) => TReturn;
-  insetInline: (rawValue: TStyleValue) => TReturn;
-  insetBlock: (rawValue: TStyleValue) => TReturn;
-  start: (rawValue: TStyleValue) => TReturn;
-  end: (rawValue: TStyleValue) => TReturn;
-  left: (rawValue: TStyleValue) => TReturn;
-  right: (rawValue: TStyleValue) => TReturn;
-  gap: (rawValue: TStyleValue) => TReturn;
-  margin: (rawValue: TStyleValue) => TReturn;
-  marginHorizontal: (rawValue: TStyleValue) => TReturn;
-  marginStart: (rawValue: TStyleValue) => TReturn;
-  marginEnd: (rawValue: TStyleValue) => TReturn;
-  marginLeft: (rawValue: TStyleValue) => TReturn;
-  marginRight: (rawValue: TStyleValue) => TReturn;
-  marginVertical: (rawValue: TStyleValue) => TReturn;
-  overflow: (rawValue: TStyleValue) => TReturn;
-  padding: (rawValue: TStyleValue) => TReturn;
-  paddingHorizontal: (val: TStyleValue) => TReturn;
-  paddingStart: (val: TStyleValue) => TReturn;
-  paddingEnd: (val: TStyleValue) => TReturn;
-  paddingLeft: (val: TStyleValue) => TReturn;
-  paddingRight: (val: TStyleValue) => TReturn;
-  paddingVertical: (val: TStyleValue) => TReturn;
-};
+declare const shorthands: Readonly<{
+  [key: string]: ($$PARAM_0$$: TStyleValue) => TReturn;
+}>;
 declare const aliases: {
   insetBlockStart: (val: TStyleValue) => TReturn;
   insetBlockEnd: (val: TStyleValue) => TReturn;

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _splitCssValue = _interopRequireDefault(require("../utils/split-css-value"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const shorthands = {
   border: rawValue => {
     return [['borderTop', rawValue], ['borderEnd', rawValue], ['borderBottom', rawValue], ['borderStart', rawValue]];
@@ -38,6 +38,17 @@ const shorthands = {
     const [top, right = top, bottom = top, left = right] = (0, _splitCssValue.default)(rawValue);
     return [['borderTopStartRadius', top], ['borderTopEndRadius', right], ['borderBottomEndRadius', bottom], ['borderBottomStartRadius', left]];
   },
+  containIntrinsicSize: rawValue => {
+    const parts = (0, _splitCssValue.default)(rawValue);
+    const [width, height = width] = parts.reduce((coll, part) => {
+      const lastElement = coll[coll.length - 1];
+      if (lastElement === 'auto' && part != null) {
+        return [...coll.slice(0, -1), `auto ${part}`];
+      }
+      return [...coll, part];
+    }, []);
+    return [['containIntrinsicWidth', width], ['containIntrinsicHeight', height]];
+  },
   inset: rawValue => [['top', rawValue], ['end', rawValue], ['bottom', rawValue], ['start', rawValue]],
   insetInline: rawValue => [...shorthands.start(rawValue), ...shorthands.end(rawValue)],
   insetBlock: rawValue => [['top', rawValue], ['bottom', rawValue]],

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

@@ -81,44 +81,9 @@ import type { TStyleValue } from '../common-types';
 
 type TReturn = $ReadOnlyArray<[string, TStyleValue]>;
 
-declare const shorthands: {
-  border: (rawValue: TStyleValue) => TReturn,
-  borderColor: (rawValue: TStyleValue) => TReturn,
-  borderHorizontal: (rawValue: TStyleValue) => TReturn,
-  borderStyle: (rawValue: TStyleValue) => TReturn,
-  borderVertical: (rawValue: TStyleValue) => TReturn,
-  borderWidth: (rawValue: TStyleValue) => TReturn,
-  borderHorizontalColor: (rawValue: TStyleValue) => TReturn,
-  borderHorizontalStyle: (rawValue: TStyleValue) => TReturn,
-  borderHorizontalWidth: (rawValue: TStyleValue) => TReturn,
-  borderVerticalColor: (rawValue: TStyleValue) => TReturn,
-  borderVerticalStyle: (rawValue: TStyleValue) => TReturn,
-  borderVerticalWidth: (rawValue: TStyleValue) => TReturn,
-  borderRadius: (rawValue: TStyleValue) => TReturn,
-  inset: (rawValue: TStyleValue) => TReturn,
-  insetInline: (rawValue: TStyleValue) => TReturn,
-  insetBlock: (rawValue: TStyleValue) => TReturn,
-  start: (rawValue: TStyleValue) => TReturn,
-  end: (rawValue: TStyleValue) => TReturn,
-  left: (rawValue: TStyleValue) => TReturn,
-  right: (rawValue: TStyleValue) => TReturn,
-  gap: (rawValue: TStyleValue) => TReturn,
-  margin: (rawValue: TStyleValue) => TReturn,
-  marginHorizontal: (rawValue: TStyleValue) => TReturn,
-  marginStart: (rawValue: TStyleValue) => TReturn,
-  marginEnd: (rawValue: TStyleValue) => TReturn,
-  marginLeft: (rawValue: TStyleValue) => TReturn,
-  marginRight: (rawValue: TStyleValue) => TReturn,
-  marginVertical: (rawValue: TStyleValue) => TReturn,
-  overflow: (rawValue: TStyleValue) => TReturn,
-  padding: (rawValue: TStyleValue) => TReturn,
-  paddingHorizontal: (val: TStyleValue) => TReturn,
-  paddingStart: (val: TStyleValue) => TReturn,
-  paddingEnd: (val: TStyleValue) => TReturn,
-  paddingLeft: (val: TStyleValue) => TReturn,
-  paddingRight: (val: TStyleValue) => TReturn,
-  paddingVertical: (val: TStyleValue) => TReturn,
-};
+declare const shorthands: $ReadOnly<{
+  [key: string]: (TStyleValue) => TReturn,
+}>;
 
 declare const aliases: {
   insetBlockStart: (val: TStyleValue) => TReturn,

package/lib/preprocess-rules/property-specificity.d.ts

@@ -9,20 +9,9 @@
 
 import type { TStyleValue } from '../common-types';
 type TReturn = ReadonlyArray<[string, TStyleValue]>;
-declare const shorthands: {
-  all: (_: TStyleValue) => TReturn;
-  animation: (_value: TStyleValue) => TReturn;
-  background: (_value: TStyleValue) => TReturn;
-  border: (_rawValue: TStyleValue) => TReturn;
-  borderInline: (_rawValue: TStyleValue) => TReturn;
-  borderBlock: (_rawValue: TStyleValue) => TReturn;
-  borderTop: (_rawValue: TStyleValue) => TReturn;
-  borderInlineEnd: (_rawValue: TStyleValue) => TReturn;
-  borderRight: (_rawValue: TStyleValue) => TReturn;
-  borderBottom: (_rawValue: TStyleValue) => TReturn;
-  borderInlineStart: (_rawValue: TStyleValue) => TReturn;
-  borderLeft: (_rawValue: TStyleValue) => TReturn;
-};
+declare const shorthands: Readonly<{
+  [key: string]: ($$PARAM_0$$: TStyleValue) => TReturn;
+}>;
 declare const aliases: {
   borderHorizontal: any;
   borderVertical: any;
@@ -82,7 +71,7 @@ declare const aliases: {
   end: (val: TStyleValue) => TReturn;
 };
 declare const $$EXPORT_DEFAULT_DECLARATION$$: Readonly</**
- * > 96 |   ...typeof shorthands,
+ * > 85 |   ...typeof shorthands,
  *      |   ^^^^^^^^^^^^^^^^^^^^ Unsupported feature: Translating "object types with complex spreads" is currently not supported.
  **/
 any>;

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

@@ -18,20 +18,9 @@ import type { TStyleValue } from '../common-types';
 
 type TReturn = $ReadOnlyArray<[string, TStyleValue]>;
 
-declare const shorthands: {
-  all: (_: TStyleValue) => TReturn,
-  animation: (_value: TStyleValue) => TReturn,
-  background: (_value: TStyleValue) => TReturn,
-  border: (_rawValue: TStyleValue) => TReturn,
-  borderInline: (_rawValue: TStyleValue) => TReturn,
-  borderBlock: (_rawValue: TStyleValue) => TReturn,
-  borderTop: (_rawValue: TStyleValue) => TReturn,
-  borderInlineEnd: (_rawValue: TStyleValue) => TReturn,
-  borderRight: (_rawValue: TStyleValue) => TReturn,
-  borderBottom: (_rawValue: TStyleValue) => TReturn,
-  borderInlineStart: (_rawValue: TStyleValue) => TReturn,
-  borderLeft: (_rawValue: TStyleValue) => TReturn,
-};
+declare const shorthands: $ReadOnly<{
+  [key: string]: (TStyleValue) => TReturn,
+}>;
 
 declare const aliases: {
   borderHorizontal: $FlowFixMe,

package/lib/stylex-create-theme.js

@@ -8,7 +8,7 @@ var _hash = _interopRequireDefault(require("./hash"));
 var _stylexVarsUtils = require("./stylex-vars-utils");
 var _types = require("./types");
 var _defaultOptions = require("./utils/default-options");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function styleXCreateTheme(themeVars, variables, options) {
   if (typeof themeVars.__themeName__ !== 'string') {
     throw new Error('Can only override variables theme created with stylex.defineVars().');
@@ -35,7 +35,7 @@ function styleXCreateTheme(themeVars, variables, options) {
   const stylesToInject = {};
   for (const atRule of sortedAtRules) {
     const decls = rulesByAtRule[atRule].join('');
-    const rule = `.${overrideClassName}{${decls}}`;
+    const rule = `.${overrideClassName}, .${overrideClassName}:root{${decls}}`;
     if (atRule === 'default') {
       stylesToInject[overrideClassName] = {
         ltr: rule,

package/lib/stylex-create.d.ts

@@ -13,11 +13,15 @@ import type {
   StyleXOptions,
   FlatCompiledStyles,
 } from './common-types';
+type ClassPathsInNamespace = {
+  readonly [className: string]: ReadonlyArray<string>;
+};
 declare function styleXCreateSet(
   namespaces: { readonly [$$Key$$: string]: RawStyles },
   options?: StyleXOptions,
 ): [
   { [$$Key$$: string]: FlatCompiledStyles },
   { [$$Key$$: string]: InjectableStyle },
+  { readonly [$$Key$$: string]: ClassPathsInNamespace },
 ];
 export default styleXCreateSet;

package/lib/stylex-create.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = styleXCreateSet;
-var _objectUtils = require("./utils/object-utils");
 var _stylexInclude = require("./stylex-include");
 var _defaultOptions = require("./utils/default-options");
 var _flattenRawStyleObj = require("./preprocess-rules/flatten-raw-style-obj");
@@ -13,24 +12,36 @@ function styleXCreateSet(namespaces) {
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _defaultOptions.defaultOptions;
   const resolvedNamespaces = {};
   const injectedStyles = {};
+  const namespaceToClassPaths = {};
   for (const namespaceName of Object.keys(namespaces)) {
     const namespace = namespaces[namespaceName];
+    const classPathsInNamespace = {};
     (0, _basicValidation.validateNamespace)(namespace);
-    const flattenedNamespace = (0, _flattenRawStyleObj.flattenRawStyleObject)(namespace, options);
+    const seenProperties = new Set();
+    const flattenedNamespace = (0, _flattenRawStyleObj.flattenRawStyleObject)(namespace, options).reduceRight((arr, curr) => {
+      if (seenProperties.has(curr[0])) {
+        return arr;
+      }
+      seenProperties.add(curr[0]);
+      arr.unshift(curr);
+      return arr;
+    }, []);
     const compiledNamespaceTuples = flattenedNamespace.map(_ref => {
       let [key, value] = _ref;
       return [key, value.compiled(options)];
     });
-    const compiledNamespace = (0, _objectUtils.objFromEntries)(compiledNamespaceTuples);
     const namespaceObj = {};
-    for (const key of Object.keys(compiledNamespace)) {
-      const value = compiledNamespace[key];
+    for (const [key, value] of compiledNamespaceTuples) {
       if (value instanceof _stylexInclude.IncludedStyles) {
         namespaceObj[key] = value;
       } else {
         const classNameTuples = value.map(v => Array.isArray(v) ? v : null).filter(Boolean);
-        const className = classNameTuples.map(_ref2 => {
-          let [className] = _ref2;
+        classNameTuples.forEach(_ref2 => {
+          let [_className, _, classesToOriginalPath] = _ref2;
+          Object.assign(classPathsInNamespace, classesToOriginalPath);
+        });
+        const className = classNameTuples.map(_ref3 => {
+          let [className] = _ref3;
           return className;
         }).join(' ') || null;
         namespaceObj[key] = className;
@@ -45,6 +56,7 @@ function styleXCreateSet(namespaces) {
       ...namespaceObj,
       $$css: true
     };
+    namespaceToClassPaths[namespaceName] = classPathsInNamespace;
   }
-  return [resolvedNamespaces, injectedStyles];
+  return [resolvedNamespaces, injectedStyles, namespaceToClassPaths];
 }

package/lib/stylex-create.js.flow

@@ -14,6 +14,10 @@ import type {
   FlatCompiledStyles,
 } from './common-types';
 
+type ClassPathsInNamespace = {
+  +[className: string]: $ReadOnlyArray<string>,
+};
+
 // This takes the object of styles passed to `stylex.create` and transforms it.
 //   The transformation replaces style values with classNames.
 //
@@ -27,4 +31,8 @@ import type {
 declare export default function styleXCreateSet(
   namespaces: { +[string]: RawStyles },
   options?: StyleXOptions,
-): [{ [string]: FlatCompiledStyles }, { [string]: InjectableStyle }];
+): [
+  { [string]: FlatCompiledStyles },
+  { [string]: InjectableStyle },
+  { +[string]: ClassPathsInNamespace },
+];

package/lib/stylex-define-vars.d.ts

@@ -9,11 +9,14 @@
 
 import type { InjectableStyle, StyleXOptions } from './common-types';
 import type { VarsConfig } from './stylex-vars-utils';
-type VarsObject<Vars extends VarsConfig> = Readonly</**
- * > 14 |   ...$ObjMapConst<Vars, string>,
- *      |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Unsupported feature: Translating "object types with complex spreads" is currently not supported.
- **/
-any>;
+type VarsKeysWithStringValues<Vars extends VarsConfig> = Readonly<{
+  [$$Key$$: keyof Vars]: string;
+}>;
+type VarsObject<Vars extends VarsConfig> = Readonly<
+  Omit<VarsKeysWithStringValues<Vars>, keyof ({ __themeName__: string })> & {
+    __themeName__: string;
+  }
+>;
 declare function styleXDefineVars<Vars extends VarsConfig>(
   variables: Vars,
   options: Readonly<

package/lib/stylex-define-vars.js

@@ -9,7 +9,7 @@ var _objectUtils = require("./utils/object-utils");
 var _defaultOptions = require("./utils/default-options");
 var _stylexVarsUtils = require("./stylex-vars-utils");
 var _types = require("./types");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function styleXDefineVars(variables, options) {
   const {
     classNamePrefix,
@@ -35,7 +35,7 @@ function styleXDefineVars(variables, options) {
     }
     return {
       nameHash,
-      value
+      value: value
     };
   });
   const themeVariablesObject = (0, _objectUtils.objMap)(variablesMap, _ref => {

package/lib/stylex-define-vars.js.flow

@@ -10,8 +10,12 @@
 import type { InjectableStyle, StyleXOptions } from './common-types';
 import type { VarsConfig } from './stylex-vars-utils';
 
+type VarsKeysWithStringValues<Vars: VarsConfig> = $ReadOnly<{
+  [$Keys<Vars>]: string,
+}>;
+
 type VarsObject<Vars: VarsConfig> = $ReadOnly<{
-  ...$ObjMapConst<Vars, string>,
+  ...VarsKeysWithStringValues<Vars>,
   __themeName__: string,
 }>;
 

package/lib/stylex-include.js

@@ -7,7 +7,7 @@ exports.IncludedStyles = void 0;
 exports.default = stylexInclude;
 var messages = _interopRequireWildcard(require("./messages"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 let number = 0;
 function uuid() {
   return `__included_${++number}__`;

package/lib/stylex-keyframes.js

@@ -12,7 +12,7 @@ var _transformValue = _interopRequireDefault(require("./transform-value"));
 var _dashify = _interopRequireDefault(require("./utils/dashify"));
 var _objectUtils = require("./utils/object-utils");
 var _defaultOptions = require("./utils/default-options");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function styleXKeyframes(frames) {
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _defaultOptions.defaultOptions;
   const {