@stylexjs/babel-plugin 0.15.2 → 0.15.3

package/lib/index.js

@@ -2070,8 +2070,9 @@ var parser = /*@__PURE__*/getDefaultExportFromCjs(libExports$1);
 function printNode(node) {
   switch (node.type) {
     case 'word':
-    case 'string':
       return `${node.value}`;
+    case 'string':
+      return `${node.quote}${node.value}${node.quote}`;
     case 'function':
       return `${node.value}(${node.nodes.map(printNode).join('')})`;
     default:
@@ -2093,6 +2094,9 @@ function splitValue(str) {
   return nodes;
 }
 
+const listStyleGlobalValues = new Set(['inherit', 'initial', 'revert', 'unset']);
+const listStylePositionValues = new Set(['inside', 'outside']);
+const listStyleTypeRegex = /^([a-z-]+|".*?"|'.*?')$/;
 const shorthands$1 = {
   border: rawValue => {
     return [['borderTop', rawValue], ['borderInlineEnd', rawValue], ['borderBottom', rawValue], ['borderInlineStart', rawValue]];
@@ -2156,6 +2160,49 @@ const shorthands$1 = {
     const [row, column = row] = splitValue(rawValue);
     return [['rowGap', row], ['columnGap', column]];
   },
+  listStyle: rawValue => {
+    if (rawValue == null) {
+      return [['listStyleType', null], ['listStylePosition', null], ['listStyleImage', null]];
+    }
+    const parts = splitValue(rawValue);
+    let image = null;
+    let position = null;
+    let type = null;
+    if (parts.length === 1 && parts[0] != null && typeof parts[0] === 'string' && listStyleGlobalValues.has(parts[0])) {
+      const globalValue = parts[0];
+      return [['listStyleType', globalValue], ['listStylePosition', globalValue], ['listStyleImage', globalValue]];
+    }
+    const remainingParts = [];
+    for (const part of parts) {
+      if (part == null || typeof part !== 'string') continue;
+      if (listStyleGlobalValues.has(part) || part.includes('var(--')) {
+        throw new Error(`invalid "listStyle" value of "${JSON.stringify(rawValue)}"`);
+      } else if (listStylePositionValues.has(part)) {
+        if (position != null) {
+          throw new Error(`invalid "listStyle" value of ${JSON.stringify(rawValue)}`);
+        }
+        position = part;
+      } else if (part !== 'none' && listStyleTypeRegex.test(part)) {
+        if (type != null) {
+          throw new Error(`invalid "listStyle" value of ${JSON.stringify(rawValue)}`);
+        }
+        type = part;
+      } else {
+        remainingParts.push(part);
+      }
+    }
+    for (const part of remainingParts) {
+      if (part === 'none' && type == null) {
+        type = part;
+      } else {
+        if (image != null) {
+          throw new Error(`invalid "listStyle" value of ${JSON.stringify(rawValue)}`);
+        }
+        image = part;
+      }
+    }
+    return [['listStyleType', type], ['listStylePosition', position], ['listStyleImage', image]];
+  },
   margin: rawValue => {
     const [top, right = top, bottom = top, left = right] = splitValue(rawValue);
     return [['marginTop', top], ['marginInlineEnd', right], ['marginBottom', bottom], ['marginInlineStart', left]];
@@ -3971,6 +4018,8 @@ function requireMediaQuery () {
 	    width: [],
 	    height: []
 	  };
+	  const units = {};
+	  let hasAnyUnitConflicts = false;
 	  for (const rule of rules) {
 	    if (rule.type === 'not' && rule.rule.type === 'and') {
 	      const inner = rule.rule.rules;
@@ -3998,10 +4047,20 @@ function requireMediaQuery () {
 	    for (const dim of dimensions) {
 	      if (rule.type === 'pair' && (rule.key === `min-${dim}` || rule.key === `max-${dim}`) && isNumericLength(rule.value)) {
 	        const val = rule.value;
+	        if (intervals[dim].length === 0) {
+	          units[dim] = val.unit;
+	        } else if (units[dim] !== val.unit) {
+	          hasAnyUnitConflicts = true;
+	        }
 	        intervals[dim].push(rule.key === `min-${dim}` ? [val.value, Infinity] : [-Infinity, val.value]);
 	        break;
 	      } else if (rule.type === 'not' && rule.rule && rule.rule.type === 'pair' && (rule.rule.key === `min-${dim}` || rule.rule.key === `max-${dim}`) && isNumericLength(rule.rule.value)) {
 	        const val = rule.rule.value;
+	        if (intervals[dim].length === 0) {
+	          units[dim] = val.unit;
+	        } else if (units[dim] !== val.unit) {
+	          hasAnyUnitConflicts = true;
+	        }
 	        if (rule.rule.key === `min-${dim}`) {
 	          intervals[dim].push([-Infinity, val.value - epsilon]);
 	        } else {
@@ -4015,6 +4074,9 @@ function requireMediaQuery () {
 	    }
 	  }
 	  const result = [];
+	  if (hasAnyUnitConflicts) {
+	    return rules;
+	  }
 	  for (const dim of dimensions) {
 	    const dimIntervals = intervals[dim];
 	    if (dimIntervals.length === 0) continue;
@@ -4033,7 +4095,7 @@ function requireMediaQuery () {
 	        key: `min-${dim}`,
 	        value: {
 	          value: lower,
-	          unit: 'px',
+	          unit: units[dim],
 	          type: 'integer'
 	        }
 	      });
@@ -4044,7 +4106,7 @@ function requireMediaQuery () {
 	        key: `max-${dim}`,
 	        value: {
 	          value: upper,
-	          unit: 'px',
+	          unit: units[dim],
 	          type: 'integer'
 	        }
 	      });
@@ -7340,15 +7402,17 @@ function transformStyleXCreate(path, state) {
                 const classList = t__namespace.isStringLiteral(objProp.value) ? objProp.value.value.split(' ') : [];
                 let isStatic = true;
                 const exprList = [];
-                classList.forEach(cls => {
+                classList.forEach((cls, index) => {
                   const expr = dynamicStyles.find(({
                     path
                   }) => origClassPaths[cls] === path)?.expression;
+                  const isLast = index === classList.length - 1;
+                  const clsWithSpace = isLast ? cls : cls + ' ';
                   if (expr && !isSafeToSkipNullCheck(expr)) {
                     isStatic = false;
-                    exprList.push(t__namespace.conditionalExpression(t__namespace.binaryExpression('!=', expr, t__namespace.nullLiteral()), t__namespace.stringLiteral(cls), expr));
+                    exprList.push(t__namespace.conditionalExpression(t__namespace.binaryExpression('!=', expr, t__namespace.nullLiteral()), t__namespace.stringLiteral(clsWithSpace), expr));
                   } else {
-                    exprList.push(t__namespace.stringLiteral(cls));
+                    exprList.push(t__namespace.stringLiteral(clsWithSpace));
                   }
                 });
                 const joined = exprList.length === 0 ? t__namespace.stringLiteral('') : exprList.reduce((acc, curr) => t__namespace.binaryExpression('+', acc, curr));
@@ -8238,6 +8302,29 @@ function transformStylexProps(path, state) {
   } else {
     path.skip();
     const stringExpression = makeStringExpression(resolvedArgs);
+    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 => {
+          const objectProp = prop;
+          const key = objectProp.key;
+          let attrName = '';
+          if (t__namespace.isIdentifier(key)) {
+            attrName = key.name;
+          } else if (t__namespace.isStringLiteral(key)) {
+            attrName = key.value;
+          }
+          let attributeValue;
+          if (t__namespace.isStringLiteral(objectProp.value)) {
+            attributeValue = objectProp.value;
+          } else {
+            attributeValue = t__namespace.stringLiteral(String(objectProp.value));
+          }
+          return t__namespace.jsxAttribute(t__namespace.jsxIdentifier(attrName), attributeValue);
+        });
+        path.parentPath.replaceWithMultiple(jsxAttributes);
+        return;
+      }
+    }
     path.replaceWith(stringExpression);
   }
 }

package/package.json

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