@stylexjs/babel-plugin 0.14.2 → 0.14.3

package/lib/index.js

@@ -2173,7 +2173,7 @@ const shorthands$1 = {
   },
   paddingStart: val => [['paddingInlineStart', val], ['paddingLeft', null], ['paddingRight', null]],
   paddingEnd: val => [['paddingInlineEnd', val], ['paddingLeft', null], ['paddingRight', null]],
-  paddingLeft: val => [['paddingLeft', val], ['paddingStart', null], ['paddingEnd', null]],
+  paddingLeft: val => [['paddingLeft', val], ['paddingInlineStart', null], ['paddingInlineEnd', null]],
   paddingRight: val => [['paddingRight', val], ['paddingInlineStart', null], ['paddingInlineEnd', null]],
   paddingVertical: val => {
     const [top, bottom = top] = splitValue(val);
@@ -2882,7 +2882,7 @@ function flipShadow(value) {
     }
     builtDefs.push(parts.join(' '));
   }
-  const rtl = builtDefs.join(', ');
+  const rtl = builtDefs.join(',');
   if (rtl !== value) {
     return rtl;
   }
@@ -3093,28 +3093,28 @@ const propertyToRTL = {
     return rtlVal ? [key, rtlVal] : null;
   }
 };
-function generateRTL(_ref43) {
-  let [key, value] = _ref43;
+function generateRTL(pair) {
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultOptions;
   const {
     enableLogicalStylesPolyfill,
     styleResolution
   } = options;
+  const [key] = pair;
   if (styleResolution === 'legacy-expand-shorthands') {
     if (!enableLogicalStylesPolyfill) {
       if (legacyValuesPolyfill[key]) {
-        return legacyValuesPolyfill[key]([key, value]);
+        return legacyValuesPolyfill[key](pair);
       }
       return null;
     }
     if (inlinePropertyToRTL[key]) {
-      return inlinePropertyToRTL[key]([key, value]);
+      return inlinePropertyToRTL[key](pair);
     }
   }
   if (!propertyToRTL[key]) {
     return null;
   }
-  return propertyToRTL[key]([key, value], options);
+  return propertyToRTL[key](pair, options);
 }
 
 const longHandPhysical = new Set();
@@ -4488,8 +4488,8 @@ function styleXKeyframes(frames) {
     classNamePrefix = 'x'
   } = options;
   const expandedObject = objMap(frames, frame => Pipe.create(frame).pipe(frame => expandFrameShorthands(frame, options)).pipe(x => objMapKeys(x, dashify)).pipe(x => objMap(x, (value, key) => transformValue(key, value, options))).done());
-  const ltrStyles = objMap(expandedObject, frame => objMapEntry(frame, generateLTR));
-  const rtlStyles = objMap(expandedObject, frame => objMapEntry(frame, entry => generateRTL(entry) ?? entry));
+  const ltrStyles = objMap(expandedObject, frame => objMapEntry(frame, entry => generateLTR(entry, options)));
+  const rtlStyles = objMap(expandedObject, frame => objMapEntry(frame, entry => generateRTL(entry, options) ?? entry));
   const ltrString = constructKeyframesObj(ltrStyles);
   const rtlString = constructKeyframesObj(rtlStyles);
   const animationName = classNamePrefix + hash('<>' + ltrString) + '-B';
@@ -5508,6 +5508,9 @@ function validateDynamicStyleParams(path, params) {
   }
 }
 
+function isSafeToSkipNullCheck(expr) {
+  return t__namespace.isBinaryExpression(expr) && ['+', '-', '*', '/', '**'].includes(expr.operator) || t__namespace.isUnaryExpression(expr) && ['-', '+'].includes(expr.operator);
+}
 function transformStyleXCreate(path, state) {
   const {
     node
@@ -5655,66 +5658,39 @@ function transformStyleXCreate(path, state) {
             }
             if (t__namespace.isObjectExpression(prop.value)) {
               const value = prop.value;
-              value.properties = value.properties.map(prop => {
-                if (!t__namespace.isObjectProperty(prop)) {
-                  return prop;
+              const conditionalProps = [];
+              value.properties.forEach(prop => {
+                if (!t__namespace.isObjectProperty(prop) || t__namespace.isPrivateName(prop.key)) {
+                  return;
                 }
                 const objProp = prop;
                 const propKey = objProp.key.type === 'Identifier' && !objProp.computed ? objProp.key.name : objProp.key.type === 'StringLiteral' ? objProp.key.value : null;
-                if (propKey != null) {
-                  const dynamicMatch = dynamicStyles.filter(_ref4 => {
+                if (propKey == null || propKey === '$$css') {
+                  conditionalProps.push(objProp);
+                  return;
+                }
+                const classList = t__namespace.isStringLiteral(objProp.value) ? objProp.value.value.split(' ') : [];
+                const exprList = [];
+                classList.forEach(cls => {
+                  const expr = dynamicStyles.find(_ref4 => {
                     let {
-                      key
+                      path
                     } = _ref4;
-                    return key === propKey;
-                  });
-                  if (dynamicMatch.length > 0) {
-                    const value = objProp.value;
-                    if (t__namespace.isStringLiteral(value)) {
-                      const classList = value.value.split(' ');
-                      if (classList.length === 1) {
-                        const cls = classList[0];
-                        const expr = dynamicMatch.find(_ref5 => {
-                          let {
-                            path
-                          } = _ref5;
-                          return origClassPaths[cls] === path;
-                        })?.expression;
-                        if (expr != null) {
-                          objProp.value = t__namespace.conditionalExpression(t__namespace.binaryExpression('==', expr, t__namespace.nullLiteral()), t__namespace.nullLiteral(), value);
-                        }
-                      } else if (classList.some(cls => dynamicMatch.find(_ref6 => {
-                        let {
-                          path
-                        } = _ref6;
-                        return origClassPaths[cls] === path;
-                      }))) {
-                        const exprArray = classList.map((cls, index) => {
-                          const expr = dynamicMatch.find(_ref7 => {
-                            let {
-                              path
-                            } = _ref7;
-                            return origClassPaths[cls] === path;
-                          })?.expression;
-                          const suffix = index === classList.length - 1 ? '' : ' ';
-                          if (expr != null) {
-                            return t__namespace.conditionalExpression(t__namespace.binaryExpression('==', expr, t__namespace.nullLiteral()), t__namespace.stringLiteral(''), t__namespace.stringLiteral(cls + suffix));
-                          }
-                          return t__namespace.stringLiteral(cls + suffix);
-                        });
-                        const [first, ...rest] = exprArray;
-                        objProp.value = rest.reduce((acc, curr) => {
-                          return t__namespace.binaryExpression('+', acc, curr);
-                        }, first);
-                      }
-                    }
+                    return origClassPaths[cls] === path;
+                  })?.expression;
+                  if (expr && !isSafeToSkipNullCheck(expr)) {
+                    exprList.push(t__namespace.conditionalExpression(t__namespace.binaryExpression('!=', expr, t__namespace.nullLiteral()), t__namespace.stringLiteral(cls), expr));
+                  } else {
+                    exprList.push(t__namespace.stringLiteral(cls));
                   }
-                }
-                return objProp;
+                });
+                const joined = exprList.length === 0 ? t__namespace.stringLiteral('') : exprList.reduce((acc, curr) => t__namespace.binaryExpression('+', acc, curr));
+                conditionalProps.push(t__namespace.objectProperty(objProp.key, joined));
               });
-              prop.value = t__namespace.arrowFunctionExpression(params, t__namespace.arrayExpression([value, t__namespace.objectExpression(Object.entries(inlineStyles).map(_ref8 => {
-                let [key, value] = _ref8;
-                return t__namespace.objectProperty(t__namespace.stringLiteral(key), value.expression);
+              const conditionalObj = t__namespace.objectExpression(conditionalProps);
+              prop.value = t__namespace.arrowFunctionExpression(params, t__namespace.arrayExpression([conditionalObj, t__namespace.objectExpression(Object.entries(inlineStyles).map(_ref5 => {
+                let [key, val] = _ref5;
+                return t__namespace.objectProperty(t__namespace.stringLiteral(key), val.expression);
               }))]));
             }
           }
@@ -5722,11 +5698,11 @@ function transformStyleXCreate(path, state) {
         return prop;
       });
     }
-    const listOfStyles = Object.entries(injectedStyles).map(_ref9 => {
+    const listOfStyles = Object.entries(injectedStyles).map(_ref6 => {
       let [key, {
         priority,
         ...rest
-      }] = _ref9;
+      }] = _ref6;
       return [key, rest, priority];
     });
     state.registerStyles(listOfStyles, path);
@@ -5767,15 +5743,15 @@ function findNearestStatementAncestor(path) {
   return findNearestStatementAncestor(path.parentPath);
 }
 function legacyExpandShorthands(dynamicStyles) {
-  const expandedKeysToKeyPaths = dynamicStyles.flatMap((_ref0, i) => {
+  const expandedKeysToKeyPaths = dynamicStyles.flatMap((_ref7, i) => {
     let {
       key
-    } = _ref0;
+    } = _ref7;
     return flatMapExpandedShorthands([key, 'p' + i], {
       styleResolution: 'legacy-expand-shorthands'
     });
-  }).map(_ref1 => {
-    let [key, value] = _ref1;
+  }).map(_ref8 => {
+    let [key, value] = _ref8;
     if (typeof value !== 'string') {
       return null;
     }

package/lib/shared/physical-rtl/generate-rtl.d.ts

@@ -9,7 +9,7 @@
 
 import type { StyleXOptions } from '../common-types';
 declare function generateRTL(
-  $$PARAM_0$$: Readonly<[string, string]>,
+  pair: Readonly<[string, string]>,
   options: StyleXOptions,
 ): null | undefined | Readonly<[string, string]>;
 export default generateRTL;

package/lib/shared/physical-rtl/generate-rtl.js.flow

@@ -9,6 +9,6 @@
 
 import type { StyleXOptions } from '../common-types';
 declare export default function generateRTL(
-  $ReadOnly<[string, string]>,
+  pair: $ReadOnly<[string, string]>,
   options: StyleXOptions,
 ): ?$ReadOnly<[string, string]>;

package/package.json

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