fix: duplicate condit

nonzzz · Apr 26, 2024 · 3df3ddf · 3df3ddf
1 parent ea70b9d
commit 3df3ddf
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 13 deletions.
diff --git a/packages/babel-plugin/__tests__/fixtures/jsx-attributes/dynamic-nested-prop/code.js b/packages/babel-plugin/__tests__/fixtures/jsx-attributes/dynamic-nested-prop/code.js
@@ -10,7 +10,7 @@ export function Component(props) {
         '@media (max-width: 600px)': props.display
       },
       borderRadius: {
-        borderRadius: props.normalRadius,
+        default: props.normalRadius,
         '@media (max-width: 600px)': props.maxRadius
       }
     }}

diff --git a/packages/babel-plugin/__tests__/fixtures/jsx-attributes/dynamic-nested-prop/output.js b/packages/babel-plugin/__tests__/fixtures/jsx-attributes/dynamic-nested-prop/output.js
@@ -14,7 +14,7 @@ const _styles = _create({
   }),
   borderRadius: (_$normalRadius, _$maxRadius) => ({
     borderRadius: {
-      borderRadius: _$normalRadius,
+      default: _$normalRadius,
       "@media (max-width: 600px)": _$maxRadius,
     },
   }),

diff --git a/packages/babel-plugin/__tests__/fixtures/jsx-attributes/dynamic-same-variable/code.js b/packages/babel-plugin/__tests__/fixtures/jsx-attributes/dynamic-same-variable/code.js
@@ -0,0 +1,16 @@
+export function Component(props) {
+  const color = 'pink'
+
+  return (
+    <div stylex={{
+      color: {
+        default: 'purple',
+        ':hover': color,
+        ':focus': color,
+        ':media (max-width: 600px)': props.otherColor,
+        ':active': color
+      }
+    }}
+    />
+  )
+}
diff --git a/packages/babel-plugin/__tests__/fixtures/jsx-attributes/dynamic-same-variable/output.js b/packages/babel-plugin/__tests__/fixtures/jsx-attributes/dynamic-same-variable/output.js
@@ -0,0 +1,16 @@
+import { create as _create, props as _props } from "@stylexjs/stylex";
+const _styles = _create({
+  color: (_$color, _$otherColor) => ({
+    color: {
+      default: "purple",
+      ":hover": _$color,
+      ":focus": _$color,
+      ":media (max-width: 600px)": _$otherColor,
+      ":active": _$color,
+    },
+  }),
+});
+export function Component(props) {
+  const color = "pink";
+  return <div {..._props(_styles["color"](color, props.otherColor))} />;
+}
diff --git a/packages/babel-plugin/__tests__/fixtures/jsx-attributes/dynamic-spread-prop/code.js b/packages/babel-plugin/__tests__/fixtures/jsx-attributes/dynamic-spread-prop/code.js
@@ -9,7 +9,10 @@ export function Component(props) {
       ...visible && { 
         fontSize: {
           default: '18px',
-          '@media (max-width: 768px)': '20px'
+          '@media (max-width: 768px)': '20px',
+          ':hover': props.fontSize,
+          ':active': props.fontSizeActive,
+          ':focus': props.fontSize
         },
         color: {
           default: 'pink',

diff --git a/packages/babel-plugin/__tests__/fixtures/jsx-attributes/dynamic-spread-prop/output.js b/packages/babel-plugin/__tests__/fixtures/jsx-attributes/dynamic-spread-prop/output.js
@@ -6,10 +6,13 @@ const _styles = _create({
   "#1": {
     display: "flex",
   },
-  "#2": (_$color, _$flex) => ({
+  "#2": (_$fontSize, _$fontSizeActive, _$color, _$flex) => ({
     fontSize: {
       default: "18px",
       "@media (max-width: 768px)": "20px",
+      ":hover": _$fontSize,
+      ":active": _$fontSizeActive,
+      ":focus": _$fontSize,
     },
     color: {
       default: "pink",
@@ -26,7 +29,8 @@ export function Component(props) {
       {..._props(
         _styles["color"](color),
         _styles["#1"],
-        visible && _styles["#2"](props.color, flex)
+        visible &&
+          _styles["#2"](props.fontSize, props.fontSizeActive, props.color, flex)
       )}
     />
   );

diff --git a/packages/babel-plugin/src/visitor/jsx-attribute.ts b/packages/babel-plugin/src/visitor/jsx-attribute.ts
@@ -7,6 +7,7 @@ import type { CSSObjectValue } from '../interface'
 type Kind = 'spared' | 'prop'
 interface VarsMeta {
   refers: types.Identifier[]
+  referSets: Set<string>
   originals: Partial<Record<Kind, NodePath<types.Expression>[]>>
 }
 
@@ -39,17 +40,29 @@ export class CSSContext {
   recordVars(kind: Kind, referAST: types.Identifier | null, originalAST: NodePath<types.Expression>) {
     if (this.vars.has(this.pos)) {
       const current = this.vars.get(this.pos)!
-      if (referAST) {
+      if (referAST && !current.referSets.has(referAST.name)) {
         current.refers.push(referAST)
+        current.referSets.add(referAST.name)
+        if (current.originals[kind]) {
+          current.originals[kind]!.push(originalAST)
+        } else {
+          current.originals[kind] = [originalAST]
+        }
       }
-      if (current.originals[kind]) {
-        current.originals[kind]!.push(originalAST)
-      } else {
-        current.originals[kind] = [originalAST]
+      if (!referAST) {
+        if (current.originals[kind]) {
+          current.originals[kind]!.push(originalAST)
+        } else {
+          current.originals[kind] = [originalAST]
+        }
       }
     } else {
       const originals = { [kind]: [originalAST] }
-      this.vars.set(this.pos, { refers: referAST ? [referAST] : [], originals })
+      this.vars.set(this.pos, { 
+        refers: referAST ? [referAST] : [],
+        originals,
+        referSets: referAST ? new Set([referAST.name]) : new Set()
+      })
     }
   }
 }
@@ -115,8 +128,7 @@ function scanExpressionProperty(path: NodePath<types.ObjectProperty>, ctx: CSSCo
         const identifier = path.get('value') as NodePath<types.Identifier>
         if (!isGlobalReference(identifier) || ctx.state.inSpread) {
           ctx.recordVars('prop', types.identifier(l(value.name)), identifier)
-        } 
-        if (isGlobalReference(identifier)) {
+        } else if (isGlobalReference(identifier)) {
           const programPath = identifier.findParent(p => p.isProgram()) as NodePath<types.Program>
           if (programPath) {
             const parent = identifier.scope.getProgramParent().getBinding(value.name)