Skip to content

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

@fmmoret

Description

@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%;

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions