@stylexjs/babel-plugin 0.18.1 → 0.18.2

package/lib/index.browser.js

@@ -1,6 +1,6 @@
 import { packages } from '@babel/standalone';
 import parser from 'postcss-value-parser';
-import { legacyMerge, props } from '@stylexjs/stylex';
+import { legacyMerge, attrs, props } from '@stylexjs/stylex';
 
 const {
   arrayExpression, arrowFunctionExpression, binaryExpression, booleanLiteral,
@@ -12,7 +12,7 @@ const {
   isNumericLiteral, isObjectExpression, isObjectProperty, isPrivateName,
   isSpreadElement, isStringLiteral, isTemplateLiteral, isUnaryExpression,
   isUpdateExpression, isValidIdentifier, isVariableDeclaration, jsxAttribute,
-  jsxIdentifier, memberExpression, nullLiteral, numericLiteral, objectExpression,
+  jsxIdentifier, jsxSpreadAttribute, memberExpression, nullLiteral, numericLiteral, objectExpression,
   objectProperty, stringLiteral, unaryExpression, variableDeclaration, variableDeclarator
 } = packages.types;
 
@@ -55,6 +55,7 @@ var types = /*#__PURE__*/Object.freeze({
   isVariableDeclaration: isVariableDeclaration,
   jsxAttribute: jsxAttribute,
   jsxIdentifier: jsxIdentifier,
+  jsxSpreadAttribute: jsxSpreadAttribute,
   memberExpression: memberExpression,
   nullLiteral: nullLiteral,
   numericLiteral: numericLiteral,
@@ -1913,6 +1914,9 @@ function readImportDeclarations(path, state) {
             if (importedName === 'props') {
               state.stylexPropsImport.add(localName);
             }
+            if (importedName === 'attrs') {
+              state.stylexAttrsImport.add(localName);
+            }
             if (importedName === 'keyframes') {
               state.stylexKeyframesImport.add(localName);
             }
@@ -1982,6 +1986,9 @@ function readRequires(path, state) {
           if (prop.key.name === 'props') {
             state.stylexPropsImport.add(value.name);
           }
+          if (prop.key.name === 'attrs') {
+            state.stylexAttrsImport.add(value.name);
+          }
           if (prop.key.name === 'keyframes') {
             state.stylexKeyframesImport.add(value.name);
           }
@@ -8696,15 +8703,17 @@ class ConditionalStyle {
   }
 }
 function skipStylexPropsChildren(path, state) {
-  if (!isCalleeIdentifier(path, state) && !isCalleeMemberExpression(path, state)) {
+  if (getPropsLikeCall(path, state) == null) {
     return;
   }
   path.skip();
 }
 function transformStylexProps(path, state) {
-  if (!isCalleeIdentifier(path, state) && !isCalleeMemberExpression(path, state)) {
+  const propsLikeCall = getPropsLikeCall(path, state);
+  if (propsLikeCall == null) {
     return;
   }
+  const propsLikeFn = propsLikeCall === 'attrs' ? attrs : props;
   let bailOut = false;
   let conditional = 0;
   const argsPath = path.get('arguments').flatMap(argPath => argPath.isArrayExpression() ? argPath.get('elements') : [argPath]);
@@ -8844,7 +8853,7 @@ function transformStylexProps(path, state) {
     }
   } else {
     path.skip();
-    const stringExpression = makeStringExpression(resolvedArgs);
+    const stringExpression = makeStringExpression(resolvedArgs, propsLikeFn);
     if (path.parentPath.node.type === 'JSXSpreadAttribute') {
       if (isObjectExpression(stringExpression) && stringExpression.properties.length > 0 && stringExpression.properties.every(prop => isObjectProperty(prop) && (isIdentifier(prop.key) || isStringLiteral(prop.key)) && !prop.computed)) {
         const jsxAttributes = stringExpression.properties.filter(prop => isObjectProperty(prop)).map(prop => {
@@ -8908,10 +8917,10 @@ function parseNullableStyle(path, state, evaluatePathFnConfig) {
   }
   return 'other';
 }
-function makeStringExpression(values) {
+function makeStringExpression(values, propsLikeFn) {
   const conditions = values.filter(v => v instanceof ConditionalStyle).map(v => v.test);
   if (conditions.length === 0) {
-    const result = props(values);
+    const result = propsLikeFn(values);
     return convertObjectToAST(result);
   }
   const conditionPermutations = genConditionPermutations(conditions.length);
@@ -8929,7 +8938,7 @@ function makeStringExpression(values) {
       }
     });
     const key = permutation.reduce((soFar, bool) => soFar << 1 | (bool ? 1 : 0), 0);
-    return objectProperty(numericLiteral(key), convertObjectToAST(props(args)));
+    return objectProperty(numericLiteral(key), convertObjectToAST(propsLikeFn(args)));
   });
   const objExpressions = objectExpression(objEntries);
   const conditionsToKey = genBitwiseOrOfConditions(conditions);
@@ -8955,17 +8964,26 @@ function genBitwiseOrOfConditions(conditions) {
     return binaryExpression('|', acc, expr);
   });
 }
-function isCalleeIdentifier(path, state) {
+function getPropsLikeCall(path, state) {
   const {
     node
   } = path;
-  return node != null && node.callee != null && node.callee.type === 'Identifier' && state.stylexPropsImport.has(node.callee.name);
-}
-function isCalleeMemberExpression(path, state) {
-  const {
-    node
-  } = path;
-  return node != null && node.callee != null && node.callee.type === 'MemberExpression' && node.callee.object.type === 'Identifier' && node.callee.property.type === 'Identifier' && node.callee.property.name === 'props' && state.stylexImport.has(node.callee.object.name);
+  const callee = node?.callee;
+  if (node != null && callee != null && callee.type === 'Identifier' && state.stylexPropsImport.has(callee.name)) {
+    return 'props';
+  }
+  if (node != null && callee != null && callee.type === 'Identifier' && state.stylexAttrsImport.has(callee.name)) {
+    return 'attrs';
+  }
+  if (node != null && callee != null && callee.type === 'MemberExpression' && callee.object.type === 'Identifier' && callee.property.type === 'Identifier' && state.stylexImport.has(callee.object.name)) {
+    if (callee.property.name === 'props') {
+      return 'props';
+    }
+    if (callee.property.name === 'attrs') {
+      return 'attrs';
+    }
+  }
+  return null;
 }
 
 function styleXViewTransitionClass(styles, options = defaultOptions) {
@@ -9331,7 +9349,7 @@ function styleXTransform() {
           if (value.isJSXEmptyExpression()) {
             continue;
           }
-          attr.replaceWith(undefined(callExpression(memberExpression(identifier('stylex'), identifier('props')), [value.node])));
+          attr.replaceWith(jsxSpreadAttribute(callExpression(memberExpression(identifier('stylex'), identifier('props')), [value.node])));
           break;
         }
       },
@@ -9385,14 +9403,19 @@ function getLogicalFloatVars(rules) {
 ` : '';
 }
 function processStylexRules(rules, config) {
+  const rawConfig = typeof config === 'boolean' ? {
+    useLayers: config
+  } : config ?? {};
   const {
-    useLayers = false,
     enableLTRRTLComments = false,
     legacyDisableLayers = false,
     useLegacyClassnamesSort = false
-  } = typeof config === 'boolean' ? {
-    useLayers: config
-  } : config ?? {};
+  } = rawConfig;
+  const rawUseLayers = rawConfig.useLayers ?? false;
+  const useLayers = rawUseLayers !== false;
+  const layersBefore = typeof rawUseLayers === 'object' ? rawUseLayers.before ?? [] : [];
+  const layersAfter = typeof rawUseLayers === 'object' ? rawUseLayers.after ?? [] : [];
+  const layerPrefix = typeof rawUseLayers === 'object' ? rawUseLayers.prefix ?? '' : '';
   if (rules.length === 0) {
     return '';
   }
@@ -9439,16 +9462,11 @@ function processStylexRules(rules, config) {
     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 propertyComparison = property1.localeCompare(property2);
+      if (propertyComparison !== 0) return propertyComparison;
+      return rule1.localeCompare(rule2);
     }
   });
   let lastKPri = -1;
@@ -9482,7 +9500,8 @@ function processStylexRules(rules, config) {
     return acc;
   }, []);
   const logicalFloatVars = getLogicalFloatVars(nonConstantRules);
-  const header = useLayers ? '\n@layer ' + grouped.map((_, index) => `priority${index + 1}`).join(', ') + ';\n' : '';
+  const layerName = index => layerPrefix ? `${layerPrefix}.priority${index + 1}` : `priority${index + 1}`;
+  const header = useLayers ? '\n@layer ' + [...layersBefore, ...grouped.map((_, index) => layerName(index)), ...layersAfter].join(', ') + ';\n' : '';
   const collectedCSS = grouped.map((group, index) => {
     const pri = group[0][2];
     const collectedCSS = Array.from(new Map(group.map(([a, b]) => [a, b])).values()).flatMap(rule => {
@@ -9502,7 +9521,7 @@ function processStylexRules(rules, config) {
       }
       return rtlRule ? enableLTRRTLComments ? [`/* @ltr begin */${ltrRule}/* @ltr end */`, `/* @rtl begin */${rtlRule}/* @rtl end */`] : [addAncestorSelector(ltrRule, "html:not([dir='rtl'])"), addAncestorSelector(rtlRule, "html[dir='rtl']")] : [ltrRule];
     }).join('\n');
-    return useLayers && pri > 0 ? `@layer priority${index + 1}{\n${collectedCSS}\n}` : collectedCSS;
+    return useLayers && pri > 0 ? `@layer ${layerName(index)}{\n${collectedCSS}\n}` : collectedCSS;
   }).join('\n');
   return logicalFloatVars + header + collectedCSS;
 }

package/lib/index.d.ts

@@ -44,7 +44,13 @@ declare function processStylexRules(
   config?:
     | boolean
     | {
-        useLayers?: boolean;
+        useLayers?:
+          | boolean
+          | {
+              before?: ReadonlyArray<string>;
+              after?: ReadonlyArray<string>;
+              prefix?: string;
+            };
         enableLTRRTLComments?: boolean;
         legacyDisableLayers?: boolean;
       },

package/lib/index.js

@@ -799,6 +799,9 @@ function readImportDeclarations(path, state) {
             if (importedName === 'props') {
               state.stylexPropsImport.add(localName);
             }
+            if (importedName === 'attrs') {
+              state.stylexAttrsImport.add(localName);
+            }
             if (importedName === 'keyframes') {
               state.stylexKeyframesImport.add(localName);
             }
@@ -868,6 +871,9 @@ function readRequires(path, state) {
           if (prop.key.name === 'props') {
             state.stylexPropsImport.add(value.name);
           }
+          if (prop.key.name === 'attrs') {
+            state.stylexAttrsImport.add(value.name);
+          }
           if (prop.key.name === 'keyframes') {
             state.stylexKeyframesImport.add(value.name);
           }
@@ -7578,15 +7584,17 @@ class ConditionalStyle {
   }
 }
 function skipStylexPropsChildren(path, state) {
-  if (!isCalleeIdentifier(path, state) && !isCalleeMemberExpression(path, state)) {
+  if (getPropsLikeCall(path, state) == null) {
     return;
   }
   path.skip();
 }
 function transformStylexProps(path, state) {
-  if (!isCalleeIdentifier(path, state) && !isCalleeMemberExpression(path, state)) {
+  const propsLikeCall = getPropsLikeCall(path, state);
+  if (propsLikeCall == null) {
     return;
   }
+  const propsLikeFn = propsLikeCall === 'attrs' ? stylex.attrs : stylex.props;
   let bailOut = false;
   let conditional = 0;
   const argsPath = path.get('arguments').flatMap(argPath => argPath.isArrayExpression() ? argPath.get('elements') : [argPath]);
@@ -7726,7 +7734,7 @@ function transformStylexProps(path, state) {
     }
   } else {
     path.skip();
-    const stringExpression = makeStringExpression(resolvedArgs);
+    const stringExpression = makeStringExpression(resolvedArgs, propsLikeFn);
     if (path.parentPath.node.type === 'JSXSpreadAttribute') {
       if (t__namespace.isObjectExpression(stringExpression) && stringExpression.properties.length > 0 && stringExpression.properties.every(prop => t__namespace.isObjectProperty(prop) && (t__namespace.isIdentifier(prop.key) || t__namespace.isStringLiteral(prop.key)) && !prop.computed)) {
         const jsxAttributes = stringExpression.properties.filter(prop => t__namespace.isObjectProperty(prop)).map(prop => {
@@ -7790,10 +7798,10 @@ function parseNullableStyle(path, state, evaluatePathFnConfig) {
   }
   return 'other';
 }
-function makeStringExpression(values) {
+function makeStringExpression(values, propsLikeFn) {
   const conditions = values.filter(v => v instanceof ConditionalStyle).map(v => v.test);
   if (conditions.length === 0) {
-    const result = stylex.props(values);
+    const result = propsLikeFn(values);
     return convertObjectToAST(result);
   }
   const conditionPermutations = genConditionPermutations(conditions.length);
@@ -7811,7 +7819,7 @@ function makeStringExpression(values) {
       }
     });
     const key = permutation.reduce((soFar, bool) => soFar << 1 | (bool ? 1 : 0), 0);
-    return t__namespace.objectProperty(t__namespace.numericLiteral(key), convertObjectToAST(stylex.props(args)));
+    return t__namespace.objectProperty(t__namespace.numericLiteral(key), convertObjectToAST(propsLikeFn(args)));
   });
   const objExpressions = t__namespace.objectExpression(objEntries);
   const conditionsToKey = genBitwiseOrOfConditions(conditions);
@@ -7837,17 +7845,26 @@ function genBitwiseOrOfConditions(conditions) {
     return t__namespace.binaryExpression('|', acc, expr);
   });
 }
-function isCalleeIdentifier(path, state) {
+function getPropsLikeCall(path, state) {
   const {
     node
   } = path;
-  return node != null && node.callee != null && node.callee.type === 'Identifier' && state.stylexPropsImport.has(node.callee.name);
-}
-function isCalleeMemberExpression(path, state) {
-  const {
-    node
-  } = path;
-  return node != null && node.callee != null && node.callee.type === 'MemberExpression' && node.callee.object.type === 'Identifier' && node.callee.property.type === 'Identifier' && node.callee.property.name === 'props' && state.stylexImport.has(node.callee.object.name);
+  const callee = node?.callee;
+  if (node != null && callee != null && callee.type === 'Identifier' && state.stylexPropsImport.has(callee.name)) {
+    return 'props';
+  }
+  if (node != null && callee != null && callee.type === 'Identifier' && state.stylexAttrsImport.has(callee.name)) {
+    return 'attrs';
+  }
+  if (node != null && callee != null && callee.type === 'MemberExpression' && callee.object.type === 'Identifier' && callee.property.type === 'Identifier' && state.stylexImport.has(callee.object.name)) {
+    if (callee.property.name === 'props') {
+      return 'props';
+    }
+    if (callee.property.name === 'attrs') {
+      return 'attrs';
+    }
+  }
+  return null;
 }
 
 function styleXViewTransitionClass(styles, options = defaultOptions) {
@@ -8267,14 +8284,19 @@ function getLogicalFloatVars(rules) {
 ` : '';
 }
 function processStylexRules(rules, config) {
+  const rawConfig = typeof config === 'boolean' ? {
+    useLayers: config
+  } : config ?? {};
   const {
-    useLayers = false,
     enableLTRRTLComments = false,
     legacyDisableLayers = false,
     useLegacyClassnamesSort = false
-  } = typeof config === 'boolean' ? {
-    useLayers: config
-  } : config ?? {};
+  } = rawConfig;
+  const rawUseLayers = rawConfig.useLayers ?? false;
+  const useLayers = rawUseLayers !== false;
+  const layersBefore = typeof rawUseLayers === 'object' ? rawUseLayers.before ?? [] : [];
+  const layersAfter = typeof rawUseLayers === 'object' ? rawUseLayers.after ?? [] : [];
+  const layerPrefix = typeof rawUseLayers === 'object' ? rawUseLayers.prefix ?? '' : '';
   if (rules.length === 0) {
     return '';
   }
@@ -8321,16 +8343,11 @@ function processStylexRules(rules, config) {
     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 propertyComparison = property1.localeCompare(property2);
+      if (propertyComparison !== 0) return propertyComparison;
+      return rule1.localeCompare(rule2);
     }
   });
   let lastKPri = -1;
@@ -8364,7 +8381,8 @@ function processStylexRules(rules, config) {
     return acc;
   }, []);
   const logicalFloatVars = getLogicalFloatVars(nonConstantRules);
-  const header = useLayers ? '\n@layer ' + grouped.map((_, index) => `priority${index + 1}`).join(', ') + ';\n' : '';
+  const layerName = index => layerPrefix ? `${layerPrefix}.priority${index + 1}` : `priority${index + 1}`;
+  const header = useLayers ? '\n@layer ' + [...layersBefore, ...grouped.map((_, index) => layerName(index)), ...layersAfter].join(', ') + ';\n' : '';
   const collectedCSS = grouped.map((group, index) => {
     const pri = group[0][2];
     const collectedCSS = Array.from(new Map(group.map(([a, b]) => [a, b])).values()).flatMap(rule => {
@@ -8384,7 +8402,7 @@ function processStylexRules(rules, config) {
       }
       return rtlRule ? enableLTRRTLComments ? [`/* @ltr begin */${ltrRule}/* @ltr end */`, `/* @rtl begin */${rtlRule}/* @rtl end */`] : [addAncestorSelector(ltrRule, "html:not([dir='rtl'])"), addAncestorSelector(rtlRule, "html[dir='rtl']")] : [ltrRule];
     }).join('\n');
-    return useLayers && pri > 0 ? `@layer priority${index + 1}{\n${collectedCSS}\n}` : collectedCSS;
+    return useLayers && pri > 0 ? `@layer ${layerName(index)}{\n${collectedCSS}\n}` : collectedCSS;
   }).join('\n');
   return logicalFloatVars + header + collectedCSS;
 }

package/lib/index.js.flow

@@ -51,7 +51,13 @@ declare function processStylexRules(
   config?:
     | boolean
     | {
-        useLayers?: boolean,
+        useLayers?:
+          | boolean
+          | $ReadOnly<{
+              before?: $ReadOnlyArray<string>,
+              after?: $ReadOnlyArray<string>,
+              prefix?: string,
+            }>,
         enableLTRRTLComments?: boolean,
         legacyDisableLayers?: boolean,
         useLegacyClassnamesSort?: boolean,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/babel-plugin",
-  "version": "0.18.1",
+  "version": "0.18.2",
   "description": "StyleX babel plugin.",
   "main": "lib/index.js",
   "browser": "lib/index.browser.js",
@@ -23,8 +23,8 @@
     "@babel/traverse": "^7.26.8",
     "@babel/types": "^7.26.8",
     "@dual-bundle/import-meta-resolve": "^4.1.0",
-    "@stylexjs/shared": "0.18.1",
-    "@stylexjs/stylex": "0.18.1",
+    "@stylexjs/shared": "0.18.2",
+    "@stylexjs/stylex": "0.18.2",
     "postcss-value-parser": "^4.1.0"
   },
   "devDependencies": {
@@ -37,7 +37,7 @@
     "babel-plugin-syntax-hermes-parser": "^0.32.1",
     "path-browserify": "^1.0.1",
     "rollup": "^4.59.0",
-    "scripts": "0.18.1"
+    "scripts": "0.18.2"
   },
   "files": [
     "flow_modules/*",