fix(styled-components): handle topLevelIdent[localIdent] in templat…

…e literal (#233)

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

## Input code

```jsx
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.

```jsx
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

```jsx
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

packages/styled-components/transform/src/visitors/transpile_css_prop/transpile.rs

@@ -649,14 +649,16 @@ where
     if let Some(root) = trace_root_value(expr) {
         match root {
             Expr::Lit(_) => true,
-            Expr::Ident(id) if is_top_level_ident(id) => {
-                if let Expr::Call(CallExpr { args, .. }) = expr {
-                    args.iter()
-                        .all(|arg| -> bool { is_direct_access(&arg.expr, is_top_level_ident) })
-                } else {
-                    true
-                }
-            }
+            Expr::Ident(id) if is_top_level_ident(id) => match expr {
+                Expr::Call(CallExpr { args, .. }) => args
+                    .iter()
+                    .all(|arg| -> bool { is_direct_access(&arg.expr, is_top_level_ident) }),
+                Expr::Member(MemberExpr {
+                    prop: MemberProp::Computed(ComputedPropName { expr, .. }),
+                    ..
+                }) => is_direct_access(expr, is_top_level_ident),
+                _ => true,
+            },
             _ => false,
         }
     } else {

packages/styled-components/transform/tests/fixtures/transpile-css-prop/code.js

@@ -276,4 +276,84 @@ function Home() {
 
 const myCss = (x) => css`
   margin: ${x}px;
-`;
+`;
+
+const colorMap = {
+  orange: '#E3750E',
+  blue: '#38699F',
+  green: '#3F9348',
+};
+
+const colorMap2 = {
+    red: 'orange',
+    cyan: 'blue',
+    lime: 'green',
+}
+
+const LocalMemberInterpolation = (p) => {
+  const color = "red";
+
+  return (
+    <p
+      css={`
+        color: ${colorMap[color]};
+      `}
+    >
+      H
+    </p>
+  );
+};
+
+const LocalMemberInterpolation2 = (p) => {
+  const color = "red";
+
+  return (
+    <p
+      css={`
+        color: ${colorMap[colorMap2[color]]};
+      `}
+    >
+      H
+    </p>
+  );
+};
+
+const LocalMemberInterpolation3 = (p) => {
+  const color = "red";
+
+  return (
+    <p
+      css={`
+        color: ${colorMap[id(color)]};
+      `}
+    >
+      H
+    </p>
+  );
+};
+
+const LocalMemberInterpolation4 = () => {
+  return (
+    <p
+      css={`
+        color: ${colorMap["red"]};
+      `}
+    >
+      H
+    </p>
+  );
+};
+
+const LocalMemberCssHelperProp = (p) => {
+  const color = "red";
+
+  return (
+    <p
+      css={css`
+        color: ${colorMap[color]};
+      `}
+    >
+      H
+    </p>
+  );
+};

packages/styled-components/transform/tests/fixtures/transpile-css-prop/output.js

@@ -163,6 +163,55 @@ function Home() {
 const myCss = (x)=>css`
   margin: ${x}px;
 `;
+const colorMap = {
+    orange: '#E3750E',
+    blue: '#38699F',
+    green: '#3F9348'
+};
+const colorMap2 = {
+    red: 'orange',
+    cyan: 'blue',
+    lime: 'green'
+};
+const LocalMemberInterpolation = (p)=>{
+    const color = "red";
+    return <_StyledP17 $_css18={colorMap[color]}>
+
+      H
+
+    </_StyledP17>;
+};
+const LocalMemberInterpolation2 = (p)=>{
+    const color = "red";
+    return <_StyledP18 $_css19={colorMap[colorMap2[color]]}>
+
+      H
+
+    </_StyledP18>;
+};
+const LocalMemberInterpolation3 = (p)=>{
+    const color = "red";
+    return <_StyledP19 $_css20={colorMap[id(color)]}>
+
+      H
+
+    </_StyledP19>;
+};
+const LocalMemberInterpolation4 = ()=>{
+    return <_StyledP20>
+
+      H
+
+    </_StyledP20>;
+};
+const LocalMemberCssHelperProp = (p)=>{
+    const color = "red";
+    return <_StyledP21 $_css21={colorMap[color]}>
+
+      H
+
+    </_StyledP21>;
+};
 var _StyledP = _styled("p")`flex: 1;`;
 var _StyledP2 = _styled("p")`
       flex: 1;
@@ -229,3 +278,18 @@ var _StyledDiv2 = _styled("div")`
         /* indirect */
       ${(p)=>p.$_css17}
       `;
+var _StyledP17 = _styled("p")`
+        color: ${(p)=>p.$_css18};
+      `;
+var _StyledP18 = _styled("p")`
+        color: ${(p)=>p.$_css19};
+      `;
+var _StyledP19 = _styled("p")`
+        color: ${(p)=>p.$_css20};
+      `;
+var _StyledP20 = _styled("p")`
+        color: ${colorMap["red"]};
+      `;
+var _StyledP21 = _styled("p")`
+        color: ${(p)=>p.$_css21};
+      `;