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

[fmmoret]

Describe the bug

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

Input code

const SomeStyle = `
      font-weight: 600;
    
      
      font-family: 'NeueKabel', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    
      font-size: 36px;
      letter-spacing: -0.022em;
      line-height: 120%;
`;

const Component = () => {
  return (
    <div>
       <div> Hello world! </div>
       <style jsx={true}>{`
         .heading-container {
           ${SomeStyle}
          }
          * {
            color: blue;
          }
       `}</style>
     </div>
  );
}

Config

None -- using next.js

Playground link (or link to the minimal reproduction)

swc-project/plugins#340

SWC Info output

Using:

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

Expected behavior

Styles below

         .heading-container {
           ${SomeStyle}
          }

should continue to work.
It appears that the } at ${SomeStyle} is being captured by some kind of grammar in the parser.

It works fine if you update the style to:

         .heading-container {
           ${SomeStyle}}
          }

Or if you do something like

         .heading-container {
           ${SomeStyle}
           padding: 1px;
          }

Actual behavior

An extra curly brace is injected into the css -- subsequent styles get lost or parsed incorrectly.

Version

1.7.18

Additional context

I'm upgrading from an old version of swc (
"@swc/cli": "0.1.62",
"@swc/core": "1.3.37",
"@swc/helpers": "0.4.14",
) -- it used to work fine.

[kdy1]

Duplicate of swc-project/plugins#340

[fmmoret]

KK -- wasn't sure which project you wanted the issue filed under 👍

[swc-bot]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.