@stylexjs/babel-plugin 0.16.0 → 0.16.2

package/flow_modules/@babel/types/index.js.flow

@@ -2541,7 +2541,7 @@ declare export function buildChildren(
 ): ReturnedChild[];
 
 /*
-Skipping all the asertX functions as they're not supported in Flow yet.
+Skipping all the assertX functions as they're not supported in Flow yet.
 */
 // TODO: What is this????
 declare export var _default$4: {

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);
@@ -7442,7 +7463,7 @@ function transformStyleXCreate(path, state) {
         ...convertToTestStyles(compiledStyles, varName, state)
       };
     }
-    if (varName != null) {
+    if (varName != null && isTopLevel(path)) {
       const stylesToRemember = removeObjectsWithSpreads(compiledStyles);
       state.styleMap.set(varName, stylesToRemember);
       state.styleVars.set(varName, path.parentPath);
@@ -7578,6 +7599,12 @@ function legacyExpandShorthands(dynamicStyles) {
   }).filter(Boolean);
   return expandedKeysToKeyPaths;
 }
+function isTopLevel(path) {
+  if (path.isStatement()) {
+    return path.parentPath?.isProgram() || path.parentPath?.isExportDeclaration();
+  }
+  return path.parentPath != null && isTopLevel(path.parentPath);
+}
 
 function transformStyleXCreateTheme(callExpressionPath, state) {
   const callExpressionNode = callExpressionPath.node;
@@ -8841,7 +8868,8 @@ function processStylexRules(rules, config) {
   const {
     useLayers = false,
     enableLTRRTLComments = false,
-    legacyDisableLayers = false
+    legacyDisableLayers = false,
+    useLegacyClassnamesSort = false
   } = typeof config === 'boolean' ? {
     useLayers: config
   } : config ?? {};
@@ -8881,23 +8909,27 @@ function processStylexRules(rules, config) {
   for (const [key, value] of constsMap.entries()) {
     constsMap.set(key, resolveConstant(value));
   }
-  const sortedRules = nonConstantRules.sort(([, {
+  const sortedRules = nonConstantRules.sort(([classname1, {
     ltr: rule1
-  }, firstPriority], [, {
+  }, firstPriority], [classname2, {
     ltr: rule2
   }, secondPriority]) => {
     const priorityComparison = firstPriority - secondPriority;
     if (priorityComparison !== 0) return priorityComparison;
-    if (rule1.startsWith('@') && !rule2.startsWith('@')) {
-      const query1 = rule1.slice(0, rule1.indexOf('{'));
-      const query2 = rule2.slice(0, rule2.indexOf('{'));
-      if (query1 !== query2) {
-        return query1.localeCompare(query2);
+    if (useLegacyClassnamesSort) {
+      return classname1.localeCompare(classname2);
+    } else {
+      if (rule1.startsWith('@') && !rule2.startsWith('@')) {
+        const query1 = rule1.slice(0, rule1.indexOf('{'));
+        const query2 = rule2.slice(0, rule2.indexOf('{'));
+        if (query1 !== query2) {
+          return query1.localeCompare(query2);
+        }
       }
+      const property1 = rule1.slice(rule1.lastIndexOf('{'));
+      const property2 = rule2.slice(rule2.lastIndexOf('{'));
+      return property1.localeCompare(property2);
     }
-    const property1 = rule1.slice(rule1.lastIndexOf('{'));
-    const property2 = rule2.slice(rule2.lastIndexOf('{'));
-    return property1.localeCompare(property2);
   });
   let lastKPri = -1;
   const grouped = sortedRules.reduce((acc, rule) => {

package/lib/index.js.flow

@@ -53,6 +53,7 @@ declare function processStylexRules(
         useLayers?: boolean,
         enableLTRRTLComments?: boolean,
         legacyDisableLayers?: boolean,
+        useLegacyClassnamesSort?: boolean,
         ...
       },
 ): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/babel-plugin",
-  "version": "0.16.0",
+  "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.0",
+    "@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.0"
+    "scripts": "0.16.2"
   },
   "files": [
     "flow_modules/*",