@stylexjs/babel-plugin 0.15.2 → 0.15.4

package/lib/index.js

@@ -829,6 +829,7 @@ class StateManager {
     const enableMediaQueryOrder = logAndDefault(boolean(), options.enableMediaQueryOrder ?? false, false, 'options.enableMediaQueryOrder');
     const enableLegacyValueFlipping = logAndDefault(boolean(), options.enableLegacyValueFlipping ?? false, false, 'options.enableLegacyValueFlipping');
     const enableLogicalStylesPolyfill = logAndDefault(boolean(), options.enableLogicalStylesPolyfill ?? false, false, 'options.enableLogicalStylesPolyfill');
+    const enableLTRRTLComments = logAndDefault(boolean(), options.enableLTRRTLComments ?? false, false, 'options.enableLTRRTLComments');
     const test = logAndDefault(boolean(), options.test ?? false, false, 'options.test');
     const configRuntimeInjection = logAndDefault(checkRuntimeInjection, options.runtimeInjection ?? false, false, 'options.runtimeInjection');
     const runtimeInjection = configRuntimeInjection === true ? DEFAULT_INJECT_PATH : configRuntimeInjection === false ? undefined : configRuntimeInjection;
@@ -860,6 +861,7 @@ class StateManager {
       enableMediaQueryOrder,
       enableLegacyValueFlipping,
       enableLogicalStylesPolyfill,
+      enableLTRRTLComments,
       importSources,
       rewriteAliases: typeof options.rewriteAliases === 'boolean' ? options.rewriteAliases : false,
       runtimeInjection,
@@ -978,32 +980,27 @@ class StateManager {
     if (sourceFilePath == null) {
       return false;
     }
+    const themeFileExtension = this.options.unstable_moduleResolution?.themeFileExtension ?? '.stylex';
+    const transformedVarsFileExtension = '.transformed';
+    const isValidStylexFile = matchesFileSuffix(themeFileExtension)(importPath);
+    const isValidTransformedVarsFile = matchesFileSuffix(transformedVarsFileExtension)(importPath);
+    if (!isValidStylexFile && !isValidTransformedVarsFile) {
+      return false;
+    }
     switch (this.options.unstable_moduleResolution?.type) {
       case 'commonJS':
         {
           const aliases = this.options.aliases;
-          const themeFileExtension = this.options.unstable_moduleResolution?.themeFileExtension ?? '.stylex';
-          if (!matchesFileSuffix(themeFileExtension)(importPath)) {
-            return false;
-          }
           const resolvedFilePath = filePathResolver(importPath, sourceFilePath, aliases);
           return resolvedFilePath ? ['themeNameRef', this.getCanonicalFilePath(resolvedFilePath)] : false;
         }
       case 'haste':
         {
-          const themeFileExtension = this.options.unstable_moduleResolution.themeFileExtension ?? '.stylex';
-          if (!matchesFileSuffix(themeFileExtension)(importPath)) {
-            return false;
-          }
           return ['themeNameRef', addFileExtension(importPath, sourceFilePath)];
         }
       case 'experimental_crossFileParsing':
         {
           const aliases = this.options.aliases;
-          const themeFileExtension = this.options.unstable_moduleResolution.themeFileExtension ?? '.stylex';
-          if (!matchesFileSuffix(themeFileExtension)(importPath)) {
-            return false;
-          }
           const resolvedFilePath = filePathResolver(importPath, sourceFilePath, aliases);
           return resolvedFilePath ? ['filePath', resolvedFilePath] : false;
         }
@@ -1295,6 +1292,7 @@ const defaultOptions = {
   enableMediaQueryOrder: false,
   enableLegacyValueFlipping: false,
   enableLogicalStylesPolyfill: false,
+  enableLTRRTLComments: false,
   enableMinifiedKeys: true,
   styleResolution: 'property-specificity',
   test: false
@@ -2070,8 +2068,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 +2092,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 +2158,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 +4016,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 +4045,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 +4072,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 +4093,7 @@ function requireMediaQuery () {
 	        key: `min-${dim}`,
 	        value: {
 	          value: lower,
-	          unit: 'px',
+	          unit: units[dim],
 	          type: 'integer'
 	        }
 	      });
@@ -4044,7 +4104,7 @@ function requireMediaQuery () {
 	        key: `max-${dim}`,
 	        value: {
 	          value: upper,
-	          unit: 'px',
+	          unit: units[dim],
 	          type: 'integer'
 	        }
 	      });
@@ -7084,10 +7144,13 @@ function evaluatePartialObjectRecursively(path, traversalState, functions = {
         };
       }
       let key = keyResult.value;
+      const valuePath = prop.get('value');
       if (key.startsWith('var(') && key.endsWith(')')) {
-        key = key.slice(4, -1);
+        const inner = key.slice(4, -1);
+        if (keyPath.length === 0) {
+          key = inner;
+        }
       }
-      const valuePath = prop.get('value');
       if (valuePath.isObjectExpression()) {
         const result = evaluatePartialObjectRecursively(valuePath, traversalState, functions, [...keyPath, key]);
         if (!result.confident) {
@@ -7340,15 +7403,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 +8303,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);
   }
 }
@@ -8633,7 +8721,13 @@ function isExported(path) {
   }
   return isExported(path.parentPath);
 }
-function processStylexRules(rules, useLayers = false) {
+function processStylexRules(rules, config) {
+  const {
+    useLayers = false,
+    enableLTRRTLComments = false
+  } = typeof config === 'boolean' ? {
+    useLayers: config
+  } : config ?? {};
   if (rules.length === 0) {
     return '';
   }
@@ -8724,7 +8818,11 @@ function processStylexRules(rules, useLayers = false) {
         ltrRule = addSpecificityLevel(ltrRule, index);
         rtlRule = rtlRule && addSpecificityLevel(rtlRule, index);
       }
-      return rtlRule ? [addAncestorSelector(ltrRule, "html:not([dir='rtl'])"), addAncestorSelector(rtlRule, "html[dir='rtl']")] : [ltrRule];
+      ltrRule = ltrRule.replace(/\.([a-zA-Z0-9]+), \.([a-zA-Z0-9]+):root/g, '.$1.$1, .$1.$1:root');
+      if (rtlRule) {
+        rtlRule = rtlRule.replace(/\.([a-zA-Z0-9]+), \.([a-zA-Z0-9]+):root/g, '.$1.$1, .$1.$1:root');
+      }
+      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;
   }).join('\n');

package/lib/index.js.flow

@@ -47,7 +47,13 @@ export type Rule = [
 ];
 declare function processStylexRules(
   rules: Array<Rule>,
-  useLayers: boolean,
+  config?:
+    | boolean
+    | {
+        useLayers?: boolean,
+        enableLTRRTLComments?: boolean,
+        ...
+      },
 ): string;
 
 export type StyleXTransformObj = $ReadOnly<{

package/lib/shared/common-types.d.ts

@@ -49,6 +49,7 @@ export type StyleXOptions = Readonly<{
   enableMediaQueryOrder?: null | undefined | boolean;
   enableLegacyValueFlipping?: null | undefined | boolean;
   enableLogicalStylesPolyfill?: null | undefined | boolean;
+  enableLTRRTLComments?: null | undefined | boolean;
   enableMinifiedKeys?: null | undefined | boolean;
   styleResolution:
     | 'application-order'

package/lib/shared/common-types.js.flow

@@ -55,6 +55,7 @@ export type StyleXOptions = $ReadOnly<{
   enableMediaQueryOrder?: ?boolean,
   enableLegacyValueFlipping?: ?boolean,
   enableLogicalStylesPolyfill?: ?boolean,
+  enableLTRRTLComments?: ?boolean,
   enableMinifiedKeys?: ?boolean,
   styleResolution:
     | 'application-order' // The last style applied wins.

package/lib/utils/state-manager.d.ts

@@ -44,6 +44,7 @@ export type StyleXOptions = Readonly<
       enableMediaQueryOrder?: boolean;
       enableLegacyValueFlipping?: boolean;
       enableLogicalStylesPolyfill?: boolean;
+      enableLTRRTLComments?: boolean;
       enableMinifiedKeys?: boolean;
       importSources: ReadonlyArray<
         string | Readonly<{ from: string; as: string }>
@@ -68,6 +69,7 @@ export type StyleXOptions = Readonly<
     enableMediaQueryOrder?: boolean;
     enableLegacyValueFlipping?: boolean;
     enableLogicalStylesPolyfill?: boolean;
+    enableLTRRTLComments?: boolean;
     enableMinifiedKeys?: boolean;
     importSources: ReadonlyArray<
       string | Readonly<{ from: string; as: string }>

package/lib/utils/state-manager.js.flow

@@ -44,6 +44,7 @@ export type StyleXOptions = $ReadOnly<{
   enableMediaQueryOrder?: boolean,
   enableLegacyValueFlipping?: boolean,
   enableLogicalStylesPolyfill?: boolean,
+  enableLTRRTLComments?: boolean,
   enableMinifiedKeys?: boolean,
   importSources: $ReadOnlyArray<
     string | $ReadOnly<{ from: string, as: string }>,

package/package.json

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