styled-jsx issue with interpolation when SWC is enabled

[timneutkens]

Report: https://vercel.slack.com/archives/C0290CZ3U6Q/p1635502416198300?thread_ts=1635325628.111200&cid=C0290CZ3U6Q

@delbaoliveira investigated it:

Hey @timneutkens So I narrowed their issue down. They are using an integer as a variable when combining the https://github.com/vercel/styled-jsx#dynamic-styles and https://github.com/vercel/styled-jsx#external-css-and-styles-outside-of-the-component styled-jsx features.

• Summary below and full reproduction here: https://github.com/delbaoliveira/styled-1/blob/main/pages/index.js
• I am unsure if these combinations are supposed to work in SWC or if they unintentionally worked by chance in Babel

const paddingInt = 10
const paddingStr = "10"

// ✅ babel
// ❌ swc
const Test1 = () => (
 <div>
  <p>test 1</p>
  <style jsx>{styles1}</style>
 </div>
)

const styles1 = css`
 p {
  color: red;
 }

 .something-else {
  padding: ${paddingInt}px;
 }
`

• Using an integer variable works with Babel but doesn't work in SWC
• Using a string as a variable works in both Babel and SWC

const paddingInt = 10

// ✅ babel
// ✅ swc
const Test2 = () => (
 <div>
  <p>test 2</p>
  <style jsx>{`
   p {
    color: red;
   }
   .something-else {
    padding: ${paddingInt}px;
   }
  `}</style>
 </div>
)

• Using an integer in an inline style worked in both Babel and SWC

import { paddingStrExternal } from "../lib/external"

// ✅ babel
// ❌ swc
const Test7 = () => (
 <div>
  <p>test 7</p>
  <style jsx>{styles7}</style>
 </div>
)

const styles7 = css`
 p {
  color: red;
 }
 .something-else {
  padding: ${paddingStrExternal}px;
 }
`

• Importing a string variable from another file did not work in SWC, but worked in Babel.

I also tested a few different variations like css.resolve which worked in both.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.