[fix] Fix issue with dynamic contextual styles (facebook#1467)

Author: nmn

packages/@stylexjs/babel-plugin/__tests__/transform-stylex-create-test.js

@@ -4865,6 +4865,90 @@ describe('@stylexjs/babel-plugin', () => {
             }
           `);
         });
+
+        test('media query values with nullish coalescing', () => {
+          const { code, metadata } = transform(`
+            import * as stylex from '@stylexjs/stylex';
+            export const styles = stylex.create({
+              root: (a, b, c) => ({
+                fontSize: {
+                  default: a ? '16px' : undefined,
+                  '@media (min-width: 800px)': b ? '18px' : undefined,
+                  '@media (min-width: 1280px)': c ? '20px' : undefined,
+                }
+              }),
+            });
+            stylex.props(styles.root(true, false, true));
+          `);
+          expect(code).toMatchInlineSnapshot(`
+            "import * as stylex from '@stylexjs/stylex';
+            export const styles = {
+              root: (a, b, c) => [{
+                kGuDYH: ((a ? '16px' : undefined) != null ? "xww4jgc " : a ? '16px' : undefined) + ((b ? '18px' : undefined) != null ? "xqdov8i " : b ? '18px' : undefined) + ((c ? '20px' : undefined) != null ? "x1j86d60" : c ? '20px' : undefined),
+                $$css: true
+              }, {
+                "--x-19zvkyr": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(a ? '16px' : undefined),
+                "--x-1bks2es": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(b ? '18px' : undefined),
+                "--x-q0n1i6": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(c ? '20px' : undefined)
+              }]
+            };
+            stylex.props(styles.root(true, false, true));"
+          `);
+          expect(metadata).toMatchInlineSnapshot(`
+            {
+              "stylex": [
+                [
+                  "xww4jgc",
+                  {
+                    "ltr": ".xww4jgc{font-size:var(--x-19zvkyr)}",
+                    "rtl": null,
+                  },
+                  3000,
+                ],
+                [
+                  "xqdov8i",
+                  {
+                    "ltr": "@media (min-width: 800px) and (max-width: 1279.99px){.xqdov8i.xqdov8i{font-size:var(--x-1bks2es)}}",
+                    "rtl": null,
+                  },
+                  3200,
+                ],
+                [
+                  "x1j86d60",
+                  {
+                    "ltr": "@media (min-width: 1280px){.x1j86d60.x1j86d60{font-size:var(--x-q0n1i6)}}",
+                    "rtl": null,
+                  },
+                  3200,
+                ],
+                [
+                  "--x-19zvkyr",
+                  {
+                    "ltr": "@property --x-19zvkyr { syntax: "*"; inherits: false;}",
+                    "rtl": null,
+                  },
+                  0,
+                ],
+                [
+                  "--x-1bks2es",
+                  {
+                    "ltr": "@property --x-1bks2es { syntax: "*"; inherits: false;}",
+                    "rtl": null,
+                  },
+                  0,
+                ],
+                [
+                  "--x-q0n1i6",
+                  {
+                    "ltr": "@property --x-q0n1i6 { syntax: "*"; inherits: false;}",
+                    "rtl": null,
+                  },
+                  0,
+                ],
+              ],
+            }
+          `);
+        });
       });
     });
 

packages/@stylexjs/babel-plugin/src/visitors/stylex-create.js

@@ -73,6 +73,30 @@ function isSafeToSkipNullCheck(expr: t.Expression): boolean {
   return false;
 }
 
+function hasExplicitNullishFallback(expr: t.Expression): boolean {
+  if (t.isNullLiteral(expr)) return true;
+
+  if (t.isIdentifier(expr) && expr.name === 'undefined') return true;
+
+  if (t.isUnaryExpression(expr) && expr.operator === 'void') return true;
+
+  if (t.isConditionalExpression(expr)) {
+    return (
+      hasExplicitNullishFallback(expr.consequent) ||
+      hasExplicitNullishFallback(expr.alternate)
+    );
+  }
+
+  if (t.isLogicalExpression(expr)) {
+    return (
+      hasExplicitNullishFallback(expr.left) ||
+      hasExplicitNullishFallback(expr.right)
+    );
+  }
+
+  return false;
+}
+
 /// This function looks for `stylex.create` calls and transforms them.
 /// 1. It finds the first argument to `stylex.create` and validates it.
 /// 2. It pre-processes valid-dynamic parts of style object such as custom presets (spreads)
@@ -289,8 +313,9 @@ export default function transformStyleXCreate(
             let dynamicStyles: $ReadOnlyArray<{
               +expression: t.Expression,
               +key: string,
+              +varName: string,
               path: string,
-            }> = Object.entries(inlineStyles).map(([_key, v]) => ({
+            }> = Object.entries(inlineStyles).map(([varName, v]) => ({
               expression: v.originalExpression,
               key: v.path
                 .slice(
@@ -300,13 +325,21 @@ export default function transformStyleXCreate(
                   ) + 1,
                 )
                 .join('_'),
+              varName,
               path: v.path.join('_'),
             }));
 
             if (state.options.styleResolution === 'legacy-expand-shorthands') {
               dynamicStyles = legacyExpandShorthands(dynamicStyles);
             }
 
+            const nullishVarExpressions = new Map<string, t.Expression>();
+            dynamicStyles.forEach((style) => {
+              if (hasExplicitNullishFallback(style.expression)) {
+                nullishVarExpressions.set(style.varName, style.expression);
+              }
+            });
+
             if (t.isObjectExpression(prop.value)) {
               const value: t.ObjectExpression = prop.value;
 
@@ -348,10 +381,36 @@ export default function transformStyleXCreate(
                 const exprList: t.Expression[] = [];
 
                 classList.forEach((cls, index) => {
-                  const expr = dynamicStyles.find(
+                  let expr = dynamicStyles.find(
                     ({ path }) => origClassPaths[cls] === path,
                   )?.expression;
 
+                  if (expr == null && nullishVarExpressions.size > 0) {
+                    const injectedStyle = injectedStyles[cls];
+                    const rule =
+                      injectedStyle != null
+                        ? typeof injectedStyle.ltr === 'string'
+                          ? injectedStyle.ltr
+                          : typeof injectedStyle.rtl === 'string'
+                            ? injectedStyle.rtl
+                            : null
+                        : null;
+
+                    if (rule != null) {
+                      const matches = rule.matchAll(
+                        /var\((--x-[^,)]+)[^)]*\)/g,
+                      );
+
+                      for (const match of matches) {
+                        const varExpr = nullishVarExpressions.get(match[1]);
+                        if (varExpr != null) {
+                          expr = varExpr;
+                          break;
+                        }
+                      }
+                    }
+                  }
+
                   const isLast = index === classList.length - 1;
                   const clsWithSpace = isLast ? cls : cls + ' ';
 
@@ -473,11 +532,13 @@ function legacyExpandShorthands(
   dynamicStyles: $ReadOnlyArray<{
     +expression: t.Expression,
     +key: string,
+    +varName: string,
     path: string,
   }>,
 ): $ReadOnlyArray<{
   +expression: t.Expression,
   +key: string,
+  +varName: string,
   path: string,
 }> {
   const expandedKeysToKeyPaths = dynamicStyles