fix(styled-components): handle topLevelIdent[localIdent] in template literal

[ciffelia]

This fixes local identifiers are not handled properly in styled-components tagged literal.

Input code

const id = (x) => x

const colorMap = {
  orange: '#E3750E',
  blue: '#38699F',
  green: '#3F9348',
}

const Colored = (color, text) => {
  return (
    <div
      css={css`
        /* ${color} */ 
        color: ${colorMap[color]};
        background-color: ${id(color)};
      `}
    >
      {text}
    </div>
  )
}

Previous output

Local variable color is referenced outside the function.

import _styled from "styled-components";
const id = (x)=>x;
const colorMap = {
    orange: '#E3750E',
    blue: '#38699F',
    green: '#3F9348'
};
const Colored = (color, text)=>{
    return <_StyledDiv $_css={color} $_css2={id(color)}>

      {text}

    </_StyledDiv>;
};
var _StyledDiv = _styled("div")`
        /* ${(p)=>p.$_css} */ 
        color: ${colorMap[color]};
        background-color: ${(p)=>p.$_css2};
      `;

Fixed output

import _styled from "styled-components";
const id = (x)=>x;
const colorMap = {
    orange: '#E3750E',
    blue: '#38699F',
    green: '#3F9348'
};
const Colored = (color, text)=>{
    return <_StyledDiv $_css={color} $_css2={colorMap[color]} $_css3={id(color)}>

      {text}

    </_StyledDiv>;
};
var _StyledDiv = _styled("div")`
        /* ${(p)=>p.$_css} */ 
        color: ${(p)=>p.$_css2};
        background-color: ${(p)=>p.$_css3};
      `;

fixes #194
related to #100

[CLAassistant]

All committers have signed the CLA.

[FezVrasta]

@ciffelia I think the version has to be bumped in order for this to be published to npm?

https://github.com/swc-project/plugins/actions/runs/6953344296/job/18918312401