@stylexjs/babel-plugin 0.16.1 → 0.16.2

package/lib/index.d.ts

@@ -42,8 +42,7 @@ declare function processStylexRules(
         useLayers?: boolean,
         enableLTRRTLComments?: boolean,
         legacyDisableLayers?: boolean,
-        ...
-      },
+      }
 ): string;
 export type StyleXTransformObj = Readonly<{
   (): PluginObj;

package/lib/index.js

@@ -5403,6 +5403,13 @@ const AT_RULE_PRIORITIES = {
   '@container': 300
 };
 const PSEUDO_ELEMENT_PRIORITY = 5000;
+const RELATIONAL_SELECTORS = {
+  ANCESTOR: /^:where\(\.[0-9a-zA-Z_-]+(:[a-zA-Z-]+)\s+\*\)$/,
+  DESCENDANT: /^:where\(:has\(\.[0-9a-zA-Z_-]+(:[a-zA-Z-]+)\)\)$/,
+  SIBLING_BEFORE: /^:where\(\.[0-9a-zA-Z_-]+(:[a-zA-Z-]+)\s+~\s+\*\)$/,
+  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-]+)\)\)$/
+};
 function getPriority(key) {
   if (key.startsWith('--')) {
     return 1;
@@ -5419,6 +5426,25 @@ function getPriority(key) {
   if (key.startsWith('::')) {
     return PSEUDO_ELEMENT_PRIORITY;
   }
+  const pseudoBase = p => (PSEUDO_CLASS_PRIORITIES[p] ?? 40) / 100;
+  const ancestorMatch = RELATIONAL_SELECTORS.ANCESTOR.exec(key);
+  if (ancestorMatch) {
+    return 10 + pseudoBase(ancestorMatch[1]);
+  }
+  const descendantMatch = RELATIONAL_SELECTORS.DESCENDANT.exec(key);
+  if (descendantMatch) {
+    return 15 + pseudoBase(descendantMatch[1]);
+  }
+  const anySiblingMatch = RELATIONAL_SELECTORS.ANY_SIBLING.exec(key);
+  if (anySiblingMatch) return 20 + Math.max(pseudoBase(anySiblingMatch[1]), pseudoBase(anySiblingMatch[2]));
+  const siblingBeforeMatch = RELATIONAL_SELECTORS.SIBLING_BEFORE.exec(key);
+  if (siblingBeforeMatch) {
+    return 30 + pseudoBase(siblingBeforeMatch[1]);
+  }
+  const siblingAfterMatch = RELATIONAL_SELECTORS.SIBLING_AFTER.exec(key);
+  if (siblingAfterMatch) {
+    return 40 + pseudoBase(siblingAfterMatch[1]);
+  }
   if (key.startsWith(':')) {
     const prop = key.startsWith(':') && key.includes('(') ? key.slice(0, key.indexOf('(')) : key;
     return PSEUDO_CLASS_PRIORITIES[prop] ?? 40;
@@ -6060,7 +6086,7 @@ function priorityForAtRule(atRule) {
   if (atRule === 'default') {
     return 1;
   }
-  return atRule.split(SPLIT_TOKEN).length;
+  return 1 + atRule.split(SPLIT_TOKEN).length;
 }
 function getDefaultValue(value) {
   if (typeof value === 'string' || typeof value === 'number') {
@@ -6154,7 +6180,7 @@ function constructCssVariablesString(variables, varGroupHash) {
     result[varGroupHash + suffix] = {
       ltr,
       rtl: null,
-      priority: priorityForAtRule(atRule) * 0.1
+      priority: priorityForAtRule(atRule) / 10
     };
   }
   return result;
@@ -6217,19 +6243,14 @@ function styleXCreateTheme(themeVars, variables, options) {
   for (const atRule of sortedAtRules) {
     const decls = rulesByAtRule[atRule].join('');
     const rule = `.${overrideClassName}, .${overrideClassName}:root{${decls}}`;
-    if (atRule === 'default') {
-      stylesToInject[overrideClassName] = {
-        ltr: rule,
-        priority: 0.5,
-        rtl: null
-      };
-    } else {
-      stylesToInject[overrideClassName + '-' + hash(atRule)] = {
-        ltr: wrapWithAtRules(rule, atRule),
-        priority: 0.5 + 0.1 * priorityForAtRule(atRule),
-        rtl: null
-      };
-    }
+    const priority = 0.4 + priorityForAtRule(atRule) / 10;
+    const suffix = atRule === 'default' ? '' : `-${hash(atRule)}`;
+    const ltr = atRule === 'default' ? rule : wrapWithAtRules(rule, atRule);
+    stylesToInject[overrideClassName + suffix] = {
+      ltr: ltr,
+      priority: priority,
+      rtl: null
+    };
   }
   const themeClass = `${overrideClassName} ${themeVars.__varGroupHash__}`;
   return [{
@@ -6349,7 +6370,7 @@ function ancestor(pseudo, options = defaultOptions) {
 function descendant(pseudo, options = defaultOptions) {
   validatePseudoSelector(pseudo);
   const defaultMarker = typeof options === 'string' ? options : getDefaultMarkerClassName(options);
-  return `:has(.${defaultMarker}${pseudo})`;
+  return `:where(:has(.${defaultMarker}${pseudo}))`;
 }
 function siblingBefore(pseudo, options = defaultOptions) {
   validatePseudoSelector(pseudo);
@@ -6359,7 +6380,7 @@ function siblingBefore(pseudo, options = defaultOptions) {
 function siblingAfter(pseudo, options = defaultOptions) {
   validatePseudoSelector(pseudo);
   const defaultMarker = typeof options === 'string' ? options : getDefaultMarkerClassName(options);
-  return `:has(~ .${defaultMarker}${pseudo})`;
+  return `:where(:has(~ .${defaultMarker}${pseudo}))`;
 }
 function anySibling(pseudo, options = defaultOptions) {
   validatePseudoSelector(pseudo);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/babel-plugin",
-  "version": "0.16.1",
+  "version": "0.16.2",
   "description": "StyleX babel plugin.",
   "main": "lib/index.js",
   "repository": {
@@ -21,7 +21,7 @@
     "@babel/traverse": "^7.26.8",
     "@babel/types": "^7.26.8",
     "@dual-bundle/import-meta-resolve": "^4.1.0",
-    "@stylexjs/stylex": "0.16.1",
+    "@stylexjs/stylex": "0.16.2",
     "postcss-value-parser": "^4.1.0"
   },
   "devDependencies": {
@@ -33,7 +33,7 @@
     "@rollup/plugin-replace": "^6.0.1",
     "babel-plugin-syntax-hermes-parser": "^0.26.0",
     "rollup": "^4.24.0",
-    "scripts": "0.16.1"
+    "scripts": "0.16.2"
   },
   "files": [
     "flow_modules/*",