Fix nested css prop

[Mad-Kat]

This issue was raised here: #240 (comment)

This PR fixes the assigned class names for css props in nested JSX structures.

<div
  css={css`
    color: red;
  `}
>
  <p
    css={css`
      color: blue;
    `}
  >
    <span
      css={css`
        color: green;
      }`}
    >
      hello
    </span>
    world
  </p>
</div>

produced this:

<div {.../*YAK Extracted CSS:
.yak {
  color: red;
}
*/ /*#__PURE__*/ css(__styleYak.yak)({})}>
  <p {.../*YAK Extracted CSS:
.yak-01 {
  color: blue;
}
-*/ /*#__PURE__*/ css(__styleYak.yak)({})}>
+*/ /*#__PURE__*/ css(__styleYak["yak-01"])({})}>
    <span {.../*YAK Extracted CSS:
.yak-02 {
  color: green;
}
-*/ /*#__PURE__*/ css(__styleYak.yak)({})}>
+*/ /*#__PURE__*/ css(__styleYak["yak-02"])({})}>
      hello
    </span>
    world
  </p>
</div>;

[changeset-bot]

🦋 Changeset detected

Latest commit: 594d55e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
next-yak	Patch
yak-swc	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codspeed-hq]

CodSpeed Performance Report

Merging #245 will not alter performance

_{Comparing fix-nested-css-prop (594d55e) with main (11261b7)}

Summary

✅ 2 untouched benchmarks