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]

plugins/packages/styled-jsx/transform/src/transform_css_lightningcss.rs

Lines 76 to 83 in 75df607

	pub fn transform_css(
	cm: Arc<SourceMap>,
	style_info: &LocalStyle,
	is_global: bool,
	class_name: &Option<String>,
	browsers: &Versions,
	native: &NativeConfig,
	) -> Result<Expr, Error> {

and

plugins/packages/styled-jsx/transform/src/transform_css_swc.rs

Lines 39 to 45 in 75df607

	pub fn transform_css(
	_cm: Arc<SourceMap>,
	style_info: &LocalStyle,
	is_global: bool,
	class_name: &Option<String>,
	native: &NativeConfig,
	) -> Result<Expr, Error> {

Those are for lightningcss mode and swc_css mode respectively