CSS selector referencing later-defined styled components not working

[jantimon]

I discovered an issue with next-yak where using a styled component as a selector inside another styled component fails if the referenced component is declared after the usage, even when that usage is inside an arrow function.

This pattern should work since the arrow function is only evaluated at runtime after all components are defined:

import { styled } from "next-yak";

const CompA = styled.div<{ $active?: boolean }>`
  ${({ $active }) =>
    $active && css`
    ${CompB} {
      color: red;
    }`}
`;

const CompB = styled.div``;

However, this produces the following error:

Error:   × Unsupported "CompB" template literal in css expression - only css`` mixins are allowed
   ╭─[/example.tsx:5:1]
 2 │ const CompA = styled.div<{ $active?: boolean }>`
 3 │   ${({ $active }) =>
 4 │     $active && css`
 5 │     ${CompB} {
   ·       ─────
 6 │       color: red;
 7 │     }`}
 8 │ `;
   ╰────

The error seems to occur because the SWC plugin is checking for component references at compile time rather than deferring to runtime evaluation. Since JavaScript/TypeScript allow referencing variables before their declaration when they're inside functions that run later, this should be valid code

Environment:

• next-yak: 4.1.0
• yak-swc: 4.1.0
• Node: 22.13.1