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 index 7b8791ee..accd51b1 100644 --- 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 index 402024f7..1e186910 100644 --- 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 index e2267fb0..cd4a509c 100644 --- 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,8 +190,12 @@ 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'), ), @@ -199,8 +203,8 @@ function evaluatePartialObjectRecursively( ), [(expression: t.Expression)], ) - : t.logicalExpression( - '??', + : t.conditionalExpression( + t.binaryExpression('!=', expression, t.nullLiteral()), expression, t.stringLiteral('initial'), );