Fix: Remove usage of ?? operator (#16)

facebook · Nov 29, 2023 · 7c39dc1 · 7c39dc1
1 parent 9cf6d83
commit 7c39dc1
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 24 deletions.
diff --git a/packages/babel-plugin/__tests__/evaluation/stylex-fn-obj-evaluation-test.js b/packages/babel-plugin/__tests__/evaluation/stylex-fn-obj-evaluation-test.js
@@ -135,16 +135,26 @@ describe('custom path evaluation works as expected', () => {
                 "async": false,
                 "body": {
                   "alternate": {
-                    "left": {
+                    "alternate": {
+                      "type": "StringLiteral",
+                      "value": "initial",
+                    },
+                    "consequent": {
                       "name": "val",
                       "type": "Identifier",
                     },
-                    "operator": "??",
-                    "right": {
-                      "type": "StringLiteral",
-                      "value": "initial",
+                    "test": {
+                      "left": {
+                        "name": "val",
+                        "type": "Identifier",
+                      },
+                      "operator": "!=",
+                      "right": {
+                        "type": "NullLiteral",
+                      },
+                      "type": "BinaryExpression",
                     },
-                    "type": "LogicalExpression",
+                    "type": "ConditionalExpression",
                   },
                   "consequent": {
                     "left": {
@@ -257,16 +267,26 @@ describe('custom path evaluation works as expected', () => {
                 "async": false,
                 "body": {
                   "alternate": {
-                    "left": {
+                    "alternate": {
+                      "type": "StringLiteral",
+                      "value": "initial",
+                    },
+                    "consequent": {
                       "name": "val",
                       "type": "Identifier",
                     },
-                    "operator": "??",
-                    "right": {
-                      "type": "StringLiteral",
-                      "value": "initial",
+                    "test": {
+                      "left": {
+                        "name": "val",
+                        "type": "Identifier",
+                      },
+                      "operator": "!=",
+                      "right": {
+                        "type": "NullLiteral",
+                      },
+                      "type": "BinaryExpression",
                     },
-                    "type": "LogicalExpression",
+                    "type": "ConditionalExpression",
                   },
                   "consequent": {
                     "left": {

diff --git a/packages/babel-plugin/__tests__/stylex-transform-create-test.js b/packages/babel-plugin/__tests__/stylex-transform-create-test.js
@@ -1058,7 +1058,7 @@ describe('@stylexjs/babel-plugin', () => {
             color: "x19dipnz",
             $$css: true
           }, {
-            "--color": color ?? "initial"
+            "--color": color != null ? color : "initial"
           }]
         };"
       `);
@@ -1085,7 +1085,7 @@ describe('@stylexjs/babel-plugin', () => {
             width: "x17fnjtu",
             $$css: true
           }, {
-            "--width": (val => typeof val === "number" ? val + "px" : val ?? "initial")(width)
+            "--width": (val => typeof val === "number" ? val + "px" : val != null ? val : "initial")(width)
           }]
         };"
       `);
@@ -1116,7 +1116,7 @@ describe('@stylexjs/babel-plugin', () => {
             color: "x19dipnz",
             $$css: true
           }, {
-            "--color": color ?? "initial"
+            "--color": color != null ? color : "initial"
           }],
           mono: {
             color: "x1mqxbix",
@@ -1144,7 +1144,7 @@ describe('@stylexjs/babel-plugin', () => {
             "--background-color": "xyv4n8w",
             $$css: true
           }, {
-            "----background-color": bgColor ?? "initial"
+            "----background-color": bgColor != null ? bgColor : "initial"
           }]
         };"
       `);
@@ -1172,7 +1172,7 @@ describe('@stylexjs/babel-plugin', () => {
             ":hover_color": "x11bf1mc",
             $$css: true
           }, {
-            "--1ijzsae": color ?? "initial"
+            "--1ijzsae": color != null ? color : "initial"
           }]
         };"
       `);
@@ -1202,7 +1202,7 @@ describe('@stylexjs/babel-plugin', () => {
             color: "x19dipnz",
             $$css: true
           }, {
-            "--color": color ?? "initial"
+            "--color": color != null ? color : "initial"
           }],
           mono: {
             color: "x1mqxbix",
@@ -1230,7 +1230,7 @@ describe('@stylexjs/babel-plugin', () => {
             "--background-color": "xyv4n8w",
             $$css: true
           }, {
-            "----background-color": bgColor ?? "initial"
+            "----background-color": bgColor != null ? bgColor : "initial"
           }]
         };"
       `);
@@ -1258,7 +1258,7 @@ describe('@stylexjs/babel-plugin', () => {
             ":hover_color": "x11bf1mc",
             $$css: true
           }, {
-            "--1ijzsae": color ?? "initial"
+            "--1ijzsae": color != null ? color : "initial"
           }]
         };"
       `);

diff --git a/packages/babel-plugin/src/visitors/stylex-create/parse-stylex-create-arg.js b/packages/babel-plugin/src/visitors/stylex-create/parse-stylex-create-arg.js
@@ -190,17 +190,21 @@ function evaluatePartialObjectRecursively(
                         t.identifier('val'),
                         t.stringLiteral(unit),
                       ),
-                      t.logicalExpression(
-                        '??',
+                      t.conditionalExpression(
+                        t.binaryExpression(
+                          '!=',
+                          t.identifier('val'),
+                          t.nullLiteral(),
+                        ),
                         t.identifier('val'),
                         t.stringLiteral('initial'),
                       ),
                     ),
                   ),
                   [(expression: t.Expression)],
                 )
-              : t.logicalExpression(
-                  '??',
+              : t.conditionalExpression(
+                  t.binaryExpression('!=', expression, t.nullLiteral()),
                   expression,
                   t.stringLiteral('initial'),
                 );