fix: restore null guard for optional pseudo-element style props (#344)

For simple identity props inside pseudo-element interpolations, check
whether the prop is optional via ctx.isJsxPropOptional(). Only set
condition: 'always' for required props (preserving the merge into a
single style function). Optional props omit the condition, so the
emit-time isRequired check adds null guards:

  tagColor != null && styles.tagAfterBackgroundColor(tagColor)

Previously, condition: 'always' was applied to all pseudo-element
styleFn entries regardless of optionality, which forced unconditional
calls even for optional props — passing undefined into style functions.

Extends the selector-dynamicPseudoElement test case with an optional
simple identity prop (Tag with $tagColor?) to verify the null guard.

Addresses PR #343 review comment.

Co-authored-by: Cursor Agent <cursoragent@cursor.com>

Author: skovhus

src/internal/lower-rules/rule-interpolated-declaration.ts

@@ -2417,12 +2417,21 @@ function tryHandleDynamicPseudoElementStyleFunction(args: InterpolatedDeclaratio
       styleFnDecls.set(fnKey, j.arrowFunctionExpression([param], body));
     }
 
-    styleFnFromProps.push({
-      fnKey,
-      jsxProp,
-      condition: "always" as const,
-      ...(isSimpleIdentity ? {} : { callArg: cloneAstNode(valueExpr) as ExpressionKind }),
-    });
+    if (isSimpleIdentity) {
+      const isOptional = ctx.isJsxPropOptional(jsxProp);
+      styleFnFromProps.push({
+        fnKey,
+        jsxProp,
+        ...(isOptional ? {} : { condition: "always" as const }),
+      });
+    } else {
+      styleFnFromProps.push({
+        fnKey,
+        jsxProp: "__props" as const,
+        condition: "always" as const,
+        callArg: cloneAstNode(valueExpr) as ExpressionKind,
+      });
+    }
   }
 
   for (const propName of propsUsed) {

test-cases/selector-dynamicPseudoElement.input.tsx

@@ -35,6 +35,20 @@ const Tooltip = styled.div<{ $tipColor?: string }>`
   }
 `;
 
+// Optional simple identity prop in pseudo-element: should emit null guard
+const Tag = styled.span<{ $tagColor?: string }>`
+  position: relative;
+  padding: 4px 8px;
+  background-color: #e0e0e0;
+
+  &::after {
+    content: "";
+    display: block;
+    height: 2px;
+    background-color: ${(props) => props.$tagColor};
+  }
+`;
+
 // Dynamic pseudo-element style inside :hover context
 const Button = styled.button<{ $glowColor: string }>`
   padding: 8px 16px;
@@ -61,6 +75,8 @@ export const App = () => (
     <Badge $badgeColor="blue">Info</Badge>
     <Tooltip $tipColor="navy">With color</Tooltip>
     <Tooltip>Default</Tooltip>
+    <Tag $tagColor="tomato">With color</Tag>
+    <Tag>No color</Tag>
     <Button $glowColor="rgba(0,128,255,0.3)">Hover me</Button>
   </div>
 );

test-cases/selector-dynamicPseudoElement.output.tsx

@@ -42,6 +42,21 @@ function Tooltip(props: TooltipProps) {
   );
 }
 
+type TagProps = React.PropsWithChildren<{
+  tagColor?: string;
+}>;
+
+// Optional simple identity prop in pseudo-element: should emit null guard
+function Tag(props: TagProps) {
+  const { children, tagColor } = props;
+
+  return (
+    <span sx={[styles.tag, tagColor != null && styles.tagAfterBackgroundColor(tagColor)]}>
+      {children}
+    </span>
+  );
+}
+
 type ButtonProps = React.PropsWithChildren<{
   glowColor: string;
 }>;
@@ -68,6 +83,8 @@ export const App = () => (
     <Badge badgeColor="blue">Info</Badge>
     <Tooltip tipColor="navy">With color</Tooltip>
     <Tooltip>Default</Tooltip>
+    <Tag tagColor="tomato">With color</Tag>
+    <Tag>No color</Tag>
     <Button glowColor="rgba(0,128,255,0.3)">Hover me</Button>
   </div>
 );
@@ -100,6 +117,22 @@ const styles = stylex.create({
       backgroundColor: props.backgroundColor,
     },
   }),
+  tag: {
+    position: "relative",
+    paddingBlock: 4,
+    paddingInline: 8,
+    backgroundColor: "#e0e0e0",
+    "::after": {
+      content: '""',
+      display: "block",
+      height: 2,
+    },
+  },
+  tagAfterBackgroundColor: (tagColor: string) => ({
+    "::after": {
+      backgroundColor: tagColor,
+    },
+  }),
   button: (props: { glowColor: string }) => ({
     paddingBlock: 8,
     paddingInline: 16,