styled-jsx plugin doesn't handle interpolation braces correctly in some cases

[fmmoret]

    "@swc/cli": "0.4.0",
    "@swc/core": "1.7.18",
    "@swc/helpers": "0.5.12",

Minimal repro -- color: blue won't be applied. The parser appears to be matching on the } in ${FontStyle.Headline2}

       .heading-container {
          ${FontStyle.Headline2}
        }
        * {
          color: blue;
        }

If I paste in the value of FontStyle.Headline2 directly, it works correctly. OR if I add in extra attributes below like:

       .heading-container {
          ${FontStyle.Headline2}
          padding: 1px;
        }
        * {
          color: blue;
        }

Then it also works fine.

FontStyle.Headline2:

      font-weight: 600;

      font-family: 'NeueKabel', 'Helvetica Neue', Helvetica, Arial, sans-serif;

      font-size: 36px;
      letter-spacing: -0.022em;
      line-height: 120%;

[fmmoret]

Issue just showed up after upgrading swc. Used to work on very old versions.

[fmmoret]

@kdy1 Can you give pointers as to where this fix could be made? It is blocking my team from upgrading, but the general vicinity of the parsing fix is difficult for me to locate

[kdy1]

https://github.com/swc-project/plugins/blob/75df607ccd322efe138bb6a7f7c57accfafb989c/packages/styled-jsx/transform/src/transform_css_lightningcss.rs#L76-L83 and https://github.com/swc-project/plugins/blob/75df607ccd322efe138bb6a7f7c57accfafb989c/packages/styled-jsx/transform/src/transform_css_swc.rs#L39-L45

Those are for lightningcss mode and swc_css mode respectively