@stylexjs/shared 0.8.0 → 0.9.0-beta.1

package/lib/common-types.d.ts

@@ -36,6 +36,7 @@ export type FlatCompiledStyles = Readonly<{
 }>;
 export type StyleXOptions = Readonly<{
   dev: boolean;
+  debug: null | undefined | boolean;
   test: boolean;
   useRemForFontSize: boolean;
   classNamePrefix: string;

package/lib/common-types.js.flow

@@ -43,6 +43,7 @@ export type FlatCompiledStyles = $ReadOnly<{
 
 export type StyleXOptions = $ReadOnly<{
   dev: boolean,
+  debug: ?boolean,
   test: boolean,
   useRemForFontSize: boolean,
   classNamePrefix: string,

package/lib/convert-to-className.d.ts

@@ -16,5 +16,5 @@ export declare function convertStyleToClassName(
 ): StyleRule;
 declare function variableFallbacks(
   values: ReadonlyArray<string>,
-): Array<string>;
+): ReadonlyArray<string>;
 export default variableFallbacks;

package/lib/convert-to-className.js

@@ -10,15 +10,16 @@ var _dashify = _interopRequireDefault(require("./utils/dashify"));
 var _transformValue = _interopRequireDefault(require("./transform-value"));
 var _generateCssRule = require("./generate-css-rule");
 var _defaultOptions = require("./utils/default-options");
-var _objectUtils = require("./utils/object-utils");
 var messages = _interopRequireWildcard(require("./messages"));
+var _ruleUtils = require("./utils/rule-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 && {}.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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function convertStyleToClassName(objEntry, pseudos, atRules) {
   let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : _defaultOptions.defaultOptions;
   const {
-    classNamePrefix = 'x'
+    classNamePrefix = 'x',
+    debug = false
   } = options;
   const [key, rawValue] = objEntry;
   const dashedKey = (0, _dashify.default)(key);
@@ -26,13 +27,14 @@ function convertStyleToClassName(objEntry, pseudos, atRules) {
   if (Array.isArray(value) && value.find(val => val.startsWith('var(') && val.endsWith(')'))) {
     value = variableFallbacks(value);
   }
-  const sortedPseudos = (0, _objectUtils.arraySort)(pseudos ?? []);
-  const sortedAtRules = (0, _objectUtils.arraySort)(atRules ?? []);
-  const atRuleHashString = sortedPseudos.join('');
-  const pseudoHashString = sortedAtRules.join('');
-  const modifierHashString = atRuleHashString + pseudoHashString || 'null';
-  const stringToHash = Array.isArray(value) ? dashedKey + value.join(', ') + modifierHashString : dashedKey + value + modifierHashString;
-  const className = classNamePrefix + (0, _hash.default)('<>' + stringToHash);
+  const sortedPseudos = (0, _ruleUtils.sortPseudos)(pseudos ?? []);
+  const sortedAtRules = (0, _ruleUtils.sortAtRules)(atRules ?? []);
+  const pseudoHashString = sortedPseudos.join('');
+  const atRuleHashString = sortedAtRules.join('');
+  const modifierHashString = pseudoHashString + atRuleHashString || 'null';
+  const valueAsString = Array.isArray(value) ? value.join(', ') : value;
+  const stringToHash = dashedKey + valueAsString + modifierHashString;
+  const className = debug ? `${key}-${classNamePrefix}${(0, _hash.default)('<>' + stringToHash)}` : classNamePrefix + (0, _hash.default)('<>' + stringToHash);
   const cssRules = (0, _generateCssRule.generateRule)(className, dashedKey, value, pseudos, atRules);
   return [key, className, cssRules];
 }

package/lib/convert-to-className.js.flow

@@ -24,4 +24,4 @@ declare export function convertStyleToClassName(
 
 declare export default function variableFallbacks(
   values: $ReadOnlyArray<string>,
-): Array<string>;
+): $ReadOnlyArray<string>;

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

@@ -9,7 +9,12 @@
 
 import type { InjectableStyle, StyleXOptions } from '../common-types';
 import type { IncludedStyles } from '../stylex-include';
-export type ComputedStyle = null | Readonly<[string, InjectableStyle]>;
+export type ClassesToOriginalPaths = {
+  readonly [className: string]: ReadonlyArray<string>;
+};
+export type ComputedStyle = null | Readonly<
+  [string, InjectableStyle, ClassesToOriginalPaths]
+>;
 export interface IPreRule {
   compiled(
     options: StyleXOptions,
@@ -30,15 +35,17 @@ export declare class PreIncludedStylesRule implements IPreRule {
 export declare class PreRule implements IPreRule {
   readonly property: string;
   readonly value: string | number | ReadonlyArray<string | number>;
-  readonly pseudos: ReadonlyArray<string>;
-  readonly atRules: ReadonlyArray<string>;
+  readonly keyPath: ReadonlyArray<string>;
   constructor(
     property: string,
     value: string | number | ReadonlyArray<string | number>,
-    pseudos?: null | undefined | ReadonlyArray<string>,
-    atRules?: null | undefined | ReadonlyArray<string>,
+    keyPath?: ReadonlyArray<string>,
   );
-  compiled(options: StyleXOptions): ReadonlyArray<[string, InjectableStyle]>;
+  get pseudos(): ReadonlyArray<string>;
+  get atRules(): ReadonlyArray<string>;
+  compiled(
+    options: StyleXOptions,
+  ): ReadonlyArray<[string, InjectableStyle, ClassesToOriginalPaths]>;
   equals(other: IPreRule): boolean;
 }
 export declare class PreRuleSet implements IPreRule {

package/lib/preprocess-rules/PreRule.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.PreRuleSet = exports.PreRule = exports.PreIncludedStylesRule = exports.NullPreRule = void 0;
 var _convertToClassName = require("../convert-to-className");
 var _objectUtils = require("../utils/object-utils");
+var _ruleUtils = require("../utils/rule-utils");
 class NullPreRule {
   compiled(_options) {
     return [null];
@@ -27,25 +28,25 @@ class PreIncludedStylesRule {
   }
 }
 exports.PreIncludedStylesRule = PreIncludedStylesRule;
-const stringComparator = (a, b) => {
-  if (a === 'default') {
-    return -1;
-  }
-  if (b === 'default') {
-    return 1;
-  }
-  return a.localeCompare(b);
-};
 class PreRule {
-  constructor(property, value, pseudos, atRules) {
+  constructor(property, value, keyPath) {
     this.property = property;
+    this.keyPath = keyPath ?? [];
     this.value = value;
-    this.pseudos = pseudos ? (0, _objectUtils.arraySort)(pseudos, stringComparator) : [];
-    this.atRules = atRules ? (0, _objectUtils.arraySort)(atRules) : [];
+  }
+  get pseudos() {
+    const unsortedPseudos = this.keyPath.filter(key => key.startsWith(':'));
+    return (0, _ruleUtils.sortPseudos)(unsortedPseudos);
+  }
+  get atRules() {
+    const unsortedAtRules = this.keyPath.filter(key => key.startsWith('@'));
+    return (0, _ruleUtils.sortAtRules)(unsortedAtRules);
   }
   compiled(options) {
     const [_key, className, rule] = (0, _convertToClassName.convertStyleToClassName)([this.property, this.value], this.pseudos ?? [], this.atRules ?? [], options);
-    return [[className, rule]];
+    return [[className, rule, {
+      [className]: this.keyPath
+    }]];
   }
   equals(other) {
     if (!(other instanceof PreRule)) {

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

@@ -10,7 +10,13 @@
 import type { InjectableStyle, StyleXOptions } from '../common-types';
 import type { IncludedStyles } from '../stylex-include';
 
-export type ComputedStyle = null | $ReadOnly<[string, InjectableStyle]>;
+export type ClassesToOriginalPaths = {
+  +[className: string]: $ReadOnlyArray<string>,
+};
+
+export type ComputedStyle = null | $ReadOnly<
+  [string, InjectableStyle, ClassesToOriginalPaths],
+>;
 
 // The classes in this file are used to represent objects that
 // can be compiled into one or CSS rules.
@@ -41,15 +47,17 @@ declare export class PreIncludedStylesRule implements IPreRule {
 declare export class PreRule implements IPreRule {
   +property: string;
   +value: string | number | $ReadOnlyArray<string | number>;
-  +pseudos: $ReadOnlyArray<string>;
-  +atRules: $ReadOnlyArray<string>;
+  +keyPath: $ReadOnlyArray<string>;
   constructor(
     property: string,
     value: string | number | $ReadOnlyArray<string | number>,
-    pseudos?: ?$ReadOnlyArray<string>,
-    atRules?: ?$ReadOnlyArray<string>,
+    keyPath?: $ReadOnlyArray<string>,
   ): void;
-  compiled(options: StyleXOptions): $ReadOnlyArray<[string, InjectableStyle]>;
+  get pseudos(): $ReadOnlyArray<string>;
+  get atRules(): $ReadOnlyArray<string>;
+  compiled(
+    options: StyleXOptions,
+  ): $ReadOnlyArray<[string, InjectableStyle, ClassesToOriginalPaths]>;
   equals(other: IPreRule): boolean;
 }
 

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

@@ -10,9 +10,9 @@ var _PreRule = require("./PreRule");
 var _stylexInclude = require("../stylex-include");
 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.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.js

@@ -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/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/transform-value.js

@@ -44,4 +44,4 @@ const numberPropertySuffixes = {
   voiceDuration: 'ms'
 };
 const timeUnits = exports.timeUnits = new Set(Object.keys(numberPropertySuffixes));
-const lengthUnits = exports.lengthUnits = new Set(['backgroundPositionX', 'backgroundPositionY', 'blockSize', 'borderBlockEndWidth', 'borderBlockStartWidth', 'borderBlockWidth', 'borderVerticalWidth', 'borderVerticalWidth', 'borderBottomLeftRadius', 'borderBottomRightRadius', 'borderBottomWidth', 'borderEndEndRadius', 'borderEndStartRadius', 'borderInlineEndWidth', 'borderEndWidth', 'borderInlineStartWidth', 'borderStartWidth', 'borderInlineWidth', 'borderHorizontalWidth', 'borderLeftWidth', 'borderRightWidth', 'borderSpacing', 'borderStartEndRadius', 'borderStartStartRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderTopWidth', 'bottom', 'columnGap', 'columnRuleWidth', 'columnWidth', 'containIntrinsicBlockSize', 'containIntrinsicHeight', 'containIntrinsicInlineSize', 'containIntrinsicWidth', 'flexBasis', 'fontSize', 'fontSmooth', 'height', 'inlineSize', 'insetBlockEnd', 'insetBlockStart', 'insetInlineEnd', 'insetInlineStart', 'left', 'letterSpacing', 'marginBlockEnd', 'marginBlockStart', 'marginBottom', 'marginInlineEnd', 'marginEnd', 'marginInlineStart', 'marginStart', 'marginLeft', 'marginRight', 'marginTop', 'maskBorderOutset', 'maskBorderWidth', 'maxBlockSize', 'maxHeight', 'maxInlineSize', 'maxWidth', 'minBlockSize', 'minHeight', 'minInlineSize', 'minWidth', 'offsetDistance', 'outlineOffset', 'outlineWidth', 'overflowClipMargin', 'paddingBlockEnd', 'paddingBlockStart', 'paddingBottom', 'paddingInlineEnd', 'paddingEnd', 'paddingInlineStart', 'paddingStart', 'paddingLeft', 'paddingRight', 'paddingTop', 'perspective', 'right', 'rowGap', 'scrollMarginBlockEnd', 'scrollMarginBlockStart', 'scrollMarginBottom', 'scrollMarginInlineEnd', 'scrollMarginInlineStart', 'scrollMarginLeft', 'scrollMarginRight', 'scrollMarginTop', 'scrollPaddingBlockEnd', 'scrollPaddingBlockStart', 'scrollPaddingBottom', 'scrollPaddingInlineEnd', 'scrollPaddingInlineStart', 'scrollPaddingLeft', 'scrollPaddingRight', 'scrollPaddingTop', 'scrollSnapMarginBottom', 'scrollSnapMarginLeft', 'scrollSnapMarginRight', 'scrollSnapMarginTop', 'shapeMargin', 'tabSize', 'textDecorationThickness', 'textIndent', 'textUnderlineOffset', 'top', 'transformOrigin', 'translate', 'verticalAlign', 'width', 'wordSpacing', 'border', 'borderBlock', 'borderBlockEnd', 'borderBlockStart', 'borderBottom', 'borderLeft', 'borderRadius', 'borderRight', 'borderTop', 'borderWidth', 'columnRule', 'containIntrinsicSize', 'gap', 'inset', 'insetBlock', 'insetInline', 'margin', 'marginBlock', 'marginVertical', 'marginInline', 'marginHorizontal', 'offset', 'outline', 'padding', 'paddingBlock', 'paddingVertical', 'paddingInline', 'paddingHorizontal', 'scrollMargin', 'scrollMarginBlock', 'scrollMarginInline', 'scrollPadding', 'scrollPaddingBlock', 'scrollPaddingInline', 'scrollSnapMargin']);
+const lengthUnits = exports.lengthUnits = new Set(['backgroundPositionX', 'backgroundPositionY', 'blockSize', 'borderBlockEndWidth', 'borderBlockStartWidth', 'borderBlockWidth', 'borderVerticalWidth', 'borderVerticalWidth', 'borderBottomLeftRadius', 'borderBottomRightRadius', 'borderBottomWidth', 'borderEndEndRadius', 'borderEndStartRadius', 'borderInlineEndWidth', 'borderEndWidth', 'borderInlineStartWidth', 'borderStartWidth', 'borderInlineWidth', 'borderHorizontalWidth', 'borderLeftWidth', 'borderRightWidth', 'borderSpacing', 'borderStartEndRadius', 'borderStartStartRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderTopWidth', 'bottom', 'columnGap', 'columnRuleWidth', 'columnWidth', 'containIntrinsicBlockSize', 'containIntrinsicHeight', 'containIntrinsicInlineSize', 'containIntrinsicWidth', 'flexBasis', 'fontSize', 'fontSmooth', 'height', 'inlineSize', 'insetBlockEnd', 'insetBlockStart', 'insetInlineEnd', 'insetInlineStart', 'left', 'letterSpacing', 'marginBlockEnd', 'marginBlockStart', 'marginBottom', 'marginInlineEnd', 'marginEnd', 'marginInlineStart', 'marginStart', 'marginLeft', 'marginRight', 'marginTop', 'maxBlockSize', 'maxHeight', 'maxInlineSize', 'maxWidth', 'minBlockSize', 'minHeight', 'minInlineSize', 'minWidth', 'offsetDistance', 'outlineOffset', 'outlineWidth', 'overflowClipMargin', 'paddingBlockEnd', 'paddingBlockStart', 'paddingBottom', 'paddingInlineEnd', 'paddingEnd', 'paddingInlineStart', 'paddingStart', 'paddingLeft', 'paddingRight', 'paddingTop', 'perspective', 'right', 'rowGap', 'scrollMarginBlockEnd', 'scrollMarginBlockStart', 'scrollMarginBottom', 'scrollMarginInlineEnd', 'scrollMarginInlineStart', 'scrollMarginLeft', 'scrollMarginRight', 'scrollMarginTop', 'scrollPaddingBlockEnd', 'scrollPaddingBlockStart', 'scrollPaddingBottom', 'scrollPaddingInlineEnd', 'scrollPaddingInlineStart', 'scrollPaddingLeft', 'scrollPaddingRight', 'scrollPaddingTop', 'scrollSnapMarginBottom', 'scrollSnapMarginLeft', 'scrollSnapMarginRight', 'scrollSnapMarginTop', 'shapeMargin', 'tabSize', 'textDecorationThickness', 'textIndent', 'textUnderlineOffset', 'top', 'transformOrigin', 'translate', 'verticalAlign', 'width', 'wordSpacing', 'border', 'borderBlock', 'borderBlockEnd', 'borderBlockStart', 'borderBottom', 'borderLeft', 'borderRadius', 'borderRight', 'borderTop', 'borderWidth', 'columnRule', 'containIntrinsicSize', 'gap', 'inset', 'insetBlock', 'insetInline', 'margin', 'marginBlock', 'marginVertical', 'marginInline', 'marginHorizontal', 'offset', 'outline', 'padding', 'paddingBlock', 'paddingVertical', 'paddingInline', 'paddingHorizontal', 'scrollMargin', 'scrollMarginBlock', 'scrollMarginInline', 'scrollPadding', 'scrollPaddingBlock', 'scrollPaddingInline', 'scrollSnapMargin']);

package/lib/utils/default-options.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.defaultOptions = void 0;
 const defaultOptions = exports.defaultOptions = {
   dev: false,
+  debug: false,
   useRemForFontSize: true,
   test: false,
   classNamePrefix: 'x',

package/lib/utils/rule-utils.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+export declare const sortPseudos: (
+  pseudos: ReadonlyArray<string>,
+) => ReadonlyArray<string>;
+export declare const sortAtRules: (
+  atRules: ReadonlyArray<string>,
+) => ReadonlyArray<string>;

package/lib/utils/rule-utils.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sortPseudos = exports.sortAtRules = void 0;
+var _objectUtils = require("./object-utils");
+const sortPseudos = pseudos => {
+  if (pseudos.length < 2) {
+    return pseudos;
+  }
+  return pseudos.reduce((acc, pseudo) => {
+    if (pseudo.startsWith('::')) {
+      return [...acc, pseudo];
+    }
+    const lastElement = acc[acc.length - 1];
+    const allButLast = acc.slice(0, acc.length - 1);
+    if (Array.isArray(lastElement)) {
+      return [...allButLast, [...lastElement, pseudo]];
+    } else {
+      return [...allButLast, lastElement, [pseudo]].filter(Boolean);
+    }
+  }, []).flatMap(pseudo => {
+    if (Array.isArray(pseudo)) {
+      return (0, _objectUtils.arraySort)(pseudo, stringComparator);
+    }
+    return [pseudo];
+  });
+};
+exports.sortPseudos = sortPseudos;
+const sortAtRules = atRules => (0, _objectUtils.arraySort)(atRules);
+exports.sortAtRules = sortAtRules;
+const stringComparator = (a, b) => {
+  if (a === 'default') {
+    return -1;
+  }
+  if (b === 'default') {
+    return 1;
+  }
+  return a.localeCompare(b);
+};

package/lib/utils/rule-utils.js.flow

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ */
+
+declare export const sortPseudos: (
+  pseudos: $ReadOnlyArray<string>,
+) => $ReadOnlyArray<string>;
+
+declare export const sortAtRules: (
+  atRules: $ReadOnlyArray<string>,
+) => $ReadOnlyArray<string>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/shared",
-  "version": "0.8.0",
+  "version": "0.9.0-beta.1",
   "main": "lib/index.js",
   "repository": "https://www.github.com/facebook/stylex",
   "license": "MIT",
@@ -13,7 +13,7 @@
     "postcss-value-parser": "^4.1.0"
   },
   "devDependencies": {
-    "@stylexjs/scripts": "0.8.0"
+    "@stylexjs/scripts": "0.9.0-beta.1"
   },
   "jest": {
     "snapshotFormat": {