@stylexjs/shared 0.17.5 → 0.18.0

package/lib/utils/property-priorities.js

@@ -522,6 +522,16 @@ const RELATIONAL_SELECTORS = {
   SIBLING_AFTER: /^:where\(:has\(~\s\.[0-9a-zA-Z_-]+(:[a-zA-Z-]+)\)\)$/,
   ANY_SIBLING: /^:where\(\.[0-9a-zA-Z_-]+(:[a-zA-Z-]+)\s+~\s+\*,\s+:has\(~\s\.[0-9a-zA-Z_-]+(:[a-zA-Z-]+)\)\)$/
 };
+const PSEUDO_PART_REGEX = /::[a-zA-Z-]+|:[a-zA-Z-]+(?:\([^)]*\))?/g;
+function getCompoundPseudoPriority(key) {
+  const parts = key.match(PSEUDO_PART_REGEX);
+  if (!parts || parts.length <= 1 || parts.some(p => p.includes('('))) return;
+  let total = 0;
+  for (const part of parts) {
+    total += part.startsWith('::') ? PSEUDO_ELEMENT_PRIORITY : PSEUDO_CLASS_PRIORITIES[part] ?? 40;
+  }
+  return total;
+}
 function getAtRulePriority(key) {
   if (key.startsWith('--')) {
     return 1;
@@ -562,7 +572,7 @@ function getPseudoClassPriority(key) {
     return 40 + pseudoBase(siblingAfterMatch[1]);
   }
   if (key.startsWith(':')) {
-    const prop = key.startsWith(':') && key.includes('(') ? key.slice(0, key.indexOf('(')) : key;
+    const prop = key.split('(')[0];
     return PSEUDO_CLASS_PRIORITIES[prop] ?? 40;
   }
 }
@@ -583,6 +593,8 @@ function getDefaultPriority(key) {
 function getPriority(key) {
   const atRulePriority = getAtRulePriority(key);
   if (atRulePriority) return atRulePriority;
+  const compoundPriority = getCompoundPseudoPriority(key);
+  if (compoundPriority != null) return compoundPriority;
   const pseudoElementPriority = getPseudoElementPriority(key);
   if (pseudoElementPriority) return pseudoElementPriority;
   const pseudoClassPriority = getPseudoClassPriority(key);

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

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

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/lib/utils/split-css-value.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+
+import type { TStyleValue } from '../common-types';
+declare function splitValue(
+  str: TStyleValue,
+): ReadonlyArray<number | string | null>;
+export default splitValue;

package/lib/utils/split-css-value.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = splitValue;
+var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function printNode(node) {
+  return ($$gen$m0 => {
+    if ((typeof $$gen$m0 === "object" && $$gen$m0 !== null || typeof $$gen$m0 === "function") && $$gen$m0.type === 'word' && "value" in $$gen$m0) {
+      const value = $$gen$m0.value;
+      return value;
+    }
+    if ((typeof $$gen$m0 === "object" && $$gen$m0 !== null || typeof $$gen$m0 === "function") && $$gen$m0.type === 'string' && "value" in $$gen$m0 && "quote" in $$gen$m0) {
+      const value = $$gen$m0.value;
+      const quote = $$gen$m0.quote;
+      return `${quote}${value}${quote}`;
+    }
+    if ((typeof $$gen$m0 === "object" && $$gen$m0 !== null || typeof $$gen$m0 === "function") && $$gen$m0.type === 'function' && "value" in $$gen$m0 && "nodes" in $$gen$m0) {
+      const value = $$gen$m0.value;
+      const nodes = $$gen$m0.nodes;
+      return `${value}(${nodes.map(printNode).join('')})`;
+    }
+    return node.value;
+  })(node);
+}
+function splitValue(str) {
+  if (str == null || typeof str === 'number') {
+    return [str];
+  }
+  if (Array.isArray(str)) {
+    return str;
+  }
+  const parsed = (0, _postcssValueParser.default)(str.trim());
+  const nodes = parsed.nodes.filter(node => node.type !== 'space' && node.type !== 'div').map(printNode);
+  if (nodes.length > 1 && nodes[nodes.length - 1].toLowerCase() === '!important') {
+    return nodes.slice(0, nodes.length - 1).map(node => node + ' !important');
+  }
+  return nodes;
+}

package/lib/utils/split-css-value.js.flow

@@ -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.
+ *
+ * @flow strict
+ */
+
+import type { TStyleValue } from '../common-types';
+
+// Using split(' ') Isn't enough because of values like calc.
+declare export default function splitValue(
+  str: TStyleValue,
+): $ReadOnlyArray<number | string | null>;

package/lib/utils/transform-value.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+
+import type { StyleXOptions } from '../common-types';
+/**
+ * Convert a CSS value in JS to the final CSS string value
+ */
+declare function transformValue(
+  key: string,
+  rawValue: string | number,
+  options: StyleXOptions,
+): string;
+export default transformValue;
+export declare function getNumberSuffix(key: string): string;
+export declare const timeUnits: Set<string>;
+export declare type timeUnits = typeof timeUnits;
+export declare const lengthUnits: Set<string>;
+export declare type lengthUnits = typeof lengthUnits;

package/lib/utils/transform-value.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformValue;
+exports.getNumberSuffix = getNumberSuffix;
+exports.timeUnits = exports.lengthUnits = void 0;
+var _normalizeValue = _interopRequireDefault(require("./normalize-value"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function transformValue(key, rawValue, options) {
+  const value = typeof rawValue === 'number' ? String(Math.round(rawValue * 10000) / 10000) + getNumberSuffix(key) : rawValue;
+  if ((key === 'content' || key === 'hyphenateCharacter' || key === 'hyphenate-character') && typeof value === 'string') {
+    const val = value.trim();
+    const cssContentFunctions = ['attr(', 'counter(', 'counters(', 'url(', 'linear-gradient(', 'image-set(', 'var(--'];
+    const cssContentKeywords = new Set(['normal', 'none', 'open-quote', 'close-quote', 'no-open-quote', 'no-close-quote', 'inherit', 'initial', 'revert', 'revert-layer', 'unset']);
+    const isCssFunction = cssContentFunctions.some(func => val.includes(func));
+    const isKeyword = cssContentKeywords.has(val);
+    const hasMatchingQuotes = (val.match(/"/g)?.length ?? 0) >= 2 || (val.match(/'/g)?.length ?? 0) >= 2;
+    if (isCssFunction || isKeyword || hasMatchingQuotes) {
+      return val;
+    }
+    return `"${val}"`;
+  }
+  return (0, _normalizeValue.default)(value, key, options);
+}
+function getNumberSuffix(key) {
+  if (unitlessNumberProperties.has(key) || key.startsWith('--')) {
+    return '';
+  }
+  if (!(key in numberPropertySuffixes)) {
+    return 'px';
+  }
+  const suffix = numberPropertySuffixes[key];
+  if (suffix == null) {
+    return 'px';
+  } else {
+    return suffix;
+  }
+}
+const unitlessNumberProperties = new Set(['WebkitLineClamp', 'animationIterationCount', 'aspectRatio', 'borderImageOutset', 'borderImageSlice', 'borderImageWidth', 'counterSet', 'counterReset', 'columnCount', 'flex', 'flexGrow', 'flexShrink', 'flexOrder', 'gridRow', 'gridRowStart', 'gridRowEnd', 'gridColumn', 'gridColumnStart', 'gridColumnEnd', 'gridArea', 'fontWeight', 'hyphenateLimitChars', 'lineClamp', 'lineHeight', 'maskBorderOutset', 'maskBorderSlice', 'maskBorderWidth', 'opacity', 'order', 'orphans', 'tabSize', 'widows', 'zIndex', 'fillOpacity', 'floodOpacity', 'rotate', 'scale', 'shapeImageThreshold', 'stopOpacity', 'strokeDasharray', 'strokeDashoffset', 'strokeMiterlimit', 'strokeOpacity', 'strokeWidth', 'scale', 'mathDepth', 'zoom']);
+const numberPropertySuffixes = {
+  animationDelay: 'ms',
+  animationDuration: 'ms',
+  transitionDelay: 'ms',
+  transitionDuration: 'ms',
+  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', '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/transform-value.js.flow

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ */
+
+import type { StyleXOptions } from '../common-types';
+
+/**
+ * Convert a CSS value in JS to the final CSS string value
+ */
+declare export default function transformValue(
+  key: string,
+  rawValue: string | number,
+  options: StyleXOptions,
+): string;
+
+declare export function getNumberSuffix(key: string): string;
+
+declare export const timeUnits: Set<string>;
+
+declare export const lengthUnits: Set<string>;

package/lib/validate.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+
+import type { TRawValue } from './common-types';
+declare function validateEntry($$PARAM_0$$: [string, TRawValue]): void;
+export default validateEntry;

package/lib/validate.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = validateEntry;
+function validateEntry([key, value]) {
+  if (Array.isArray(value)) {
+    value.forEach(val => validateSimplyEntry([key, val]));
+  } else {
+    validateSimplyEntry([key, value]);
+  }
+}
+function validateSimplyEntry([key, _value]) {
+  if (BANNED_KEYS.has(key)) {
+    throw new Error('Banned key: ' + key);
+  }
+}
+const BANNED_KEYS = new Set(['background', 'transition', 'grid']);

package/lib/validate.js.flow

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ */
+
+import type { TRawValue } from './common-types';
+
+declare export default function validateEntry(
+  $$PARAM_0$$: [string, TRawValue],
+): void;

package/lib/when/when.d.ts

@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+
+import type { StyleXOptions } from '../common-types';
+type WhenSelector = `:${string}` | `[${string}`;
+/**
+ * Creates selector that observes if the given pseudo-class is
+ * active on an ancestor with the "defaultMarker"
+ *
+ *
+ * @param pseudo - The pseudo selector (e.g., ':hover', ':focus')
+ * @returns A :where() clause for the ancestor observer
+ */
+export declare function ancestor(
+  pseudo: WhenSelector,
+  options?: string | StyleXOptions,
+): string;
+/**
+ * Creates selector that observes if the given pseudo-class is
+ * active on a descendant with the "defaultMarker"
+ *
+ * @param pseudo - The pseudo selector (e.g., ':hover', ':focus')
+ * @returns A :has() clause for the descendant observer
+ */
+export declare function descendant(
+  pseudo: WhenSelector,
+  options?: string | StyleXOptions,
+): string;
+/**
+ * Creates selector that observes if the given pseudo-class is
+ * active on a previous sibling with the "defaultMarker"
+ *
+ * @param pseudo - The pseudo selector (e.g., ':hover', ':focus')
+ * @returns A :where() clause for the previous sibling observer
+ */
+export declare function siblingBefore(
+  pseudo: WhenSelector,
+  options?: string | StyleXOptions,
+): string;
+/**
+ * Creates selector that observes if the given pseudo-class is
+ * active on a next sibling with the "defaultMarker"
+ *
+ * @param pseudo - The pseudo selector (e.g., ':hover', ':focus')
+ * @returns A :has() clause for the next sibling observer
+ */
+export declare function siblingAfter(
+  pseudo: WhenSelector,
+  options?: string | StyleXOptions,
+): string;
+/**
+ * Creates selector that observes if the given pseudo-class is
+ * active on any sibling with the "defaultMarker"
+ *
+ * @param pseudo - The pseudo selector (e.g., ':hover', ':focus')
+ * @returns A :where() clause for the any sibling observer
+ */
+export declare function anySibling(
+  pseudo: WhenSelector,
+  options?: string | StyleXOptions,
+): string;

package/lib/when/when.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ancestor = ancestor;
+exports.anySibling = anySibling;
+exports.descendant = descendant;
+exports.siblingAfter = siblingAfter;
+exports.siblingBefore = siblingBefore;
+var _defaultOptions = require("../utils/default-options");
+function fromProxy(value) {
+  if (typeof value === 'object' && value != null && value.__IS_PROXY === true && typeof value.toString === 'function') {
+    return value.toString();
+  }
+  return null;
+}
+function fromStyleXStyle(value) {
+  if (typeof value === 'object' && value != null && value.$$css === true) {
+    return Object.keys(value).find(key => key !== '$$css');
+  }
+  return null;
+}
+function getDefaultMarkerClassName(options = _defaultOptions.defaultOptions) {
+  const valueFromProxy = fromProxy(options);
+  if (valueFromProxy != null) {
+    return valueFromProxy;
+  }
+  const valueFromStyleXStyle = fromStyleXStyle(options);
+  if (valueFromStyleXStyle != null) {
+    return valueFromStyleXStyle;
+  }
+  const prefix = options.classNamePrefix != null ? `${options.classNamePrefix}-` : '';
+  return `${prefix}default-marker`;
+}
+function validatePseudoSelector(pseudo) {
+  if (!(pseudo.startsWith(':') || pseudo.startsWith('['))) {
+    throw new Error('Pseudo selector must start with ":" or "["');
+  }
+  if (pseudo.startsWith('::')) {
+    throw new Error('Pseudo selector cannot start with "::" (pseudo-elements are not supported)');
+  }
+  if (pseudo.startsWith('[') && !pseudo.endsWith(']')) {
+    throw new Error('Attribute selector must end with "]"');
+  }
+}
+function ancestor(pseudo, options = _defaultOptions.defaultOptions) {
+  validatePseudoSelector(pseudo);
+  const defaultMarker = typeof options === 'string' ? options : getDefaultMarkerClassName(options);
+  return `:where(.${defaultMarker}${pseudo} *)`;
+}
+function descendant(pseudo, options = _defaultOptions.defaultOptions) {
+  validatePseudoSelector(pseudo);
+  const defaultMarker = typeof options === 'string' ? options : getDefaultMarkerClassName(options);
+  return `:where(:has(.${defaultMarker}${pseudo}))`;
+}
+function siblingBefore(pseudo, options = _defaultOptions.defaultOptions) {
+  validatePseudoSelector(pseudo);
+  const defaultMarker = typeof options === 'string' ? options : getDefaultMarkerClassName(options);
+  return `:where(.${defaultMarker}${pseudo} ~ *)`;
+}
+function siblingAfter(pseudo, options = _defaultOptions.defaultOptions) {
+  validatePseudoSelector(pseudo);
+  const defaultMarker = typeof options === 'string' ? options : getDefaultMarkerClassName(options);
+  return `:where(:has(~ .${defaultMarker}${pseudo}))`;
+}
+function anySibling(pseudo, options = _defaultOptions.defaultOptions) {
+  validatePseudoSelector(pseudo);
+  const defaultMarker = typeof options === 'string' ? options : getDefaultMarkerClassName(options);
+  return `:where(.${defaultMarker}${pseudo} ~ *, :has(~ .${defaultMarker}${pseudo}))`;
+}

package/lib/when/when.js.flow

@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ */
+
+import type { StyleXOptions } from '../common-types';
+
+type WhenSelector = StringPrefix<':'> | StringPrefix<'['>;
+
+/**
+ * Creates selector that observes if the given pseudo-class is
+ * active on an ancestor with the "defaultMarker"
+ *
+ *
+ * @param pseudo - The pseudo selector (e.g., ':hover', ':focus')
+ * @returns A :where() clause for the ancestor observer
+ */
+declare export function ancestor(
+  pseudo: WhenSelector,
+  options?: string | StyleXOptions,
+): string;
+
+/**
+ * Creates selector that observes if the given pseudo-class is
+ * active on a descendant with the "defaultMarker"
+ *
+ * @param pseudo - The pseudo selector (e.g., ':hover', ':focus')
+ * @returns A :has() clause for the descendant observer
+ */
+declare export function descendant(
+  pseudo: WhenSelector,
+  options?: string | StyleXOptions,
+): string;
+
+/**
+ * Creates selector that observes if the given pseudo-class is
+ * active on a previous sibling with the "defaultMarker"
+ *
+ * @param pseudo - The pseudo selector (e.g., ':hover', ':focus')
+ * @returns A :where() clause for the previous sibling observer
+ */
+declare export function siblingBefore(
+  pseudo: WhenSelector,
+  options?: string | StyleXOptions,
+): string;
+
+/**
+ * Creates selector that observes if the given pseudo-class is
+ * active on a next sibling with the "defaultMarker"
+ *
+ * @param pseudo - The pseudo selector (e.g., ':hover', ':focus')
+ * @returns A :has() clause for the next sibling observer
+ */
+declare export function siblingAfter(
+  pseudo: WhenSelector,
+  options?: string | StyleXOptions,
+): string;
+
+/**
+ * Creates selector that observes if the given pseudo-class is
+ * active on any sibling with the "defaultMarker"
+ *
+ * @param pseudo - The pseudo selector (e.g., ':hover', ':focus')
+ * @returns A :where() clause for the any sibling observer
+ */
+declare export function anySibling(
+  pseudo: WhenSelector,
+  options?: string | StyleXOptions,
+): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/shared",
-  "version": "0.17.5",
+  "version": "0.18.0",
   "main": "lib/index.js",
   "repository": {
     "type": "git",