🐛 <style jsx>

[thiskevinwang]

Observed

Example in Container

styled-jsx usage

      <style jsx>{`
        .geist-container > :global(*) {
          --gap-ratio: ${gap};
        }
      `}</style>

incorrectly results in a plain style dom tag

Expected

This doesn't work in the local docs site. It should behave like how it does for https://thekevinwang.com/design/grid/

[thiskevinwang]

See

• https://www.npmjs.com/package/styled-jsx#build-a-component-library-with-styled-jsx
  • https://medium.com/@tomaszmularczyk89/guide-to-building-a-react-components-library-with-rollup-and-styled-jsx-694ec66bd2

[thiskevinwang]

See next-swc styled-jsx

• https://github.com/vercel/next.js/blob/canary/packages/next-swc/crates/core/tests/fixture/styled-jsx/dynamic-element/output.js

[thiskevinwang]

vercel/next.js#30174

[thiskevinwang]

Update 1

An option is to use babel with next/babel to transpile everything.

  "devDependencies": {
+    "@babel/cli": "^7.16.7",
+    "@babel/core": "^7.16.7",

babel src --extensions '.ts','.tsx' --copy-files -d dist --ignore '**/*.test.*' && npx tsc

// .babelrc
{
  "presets": [
    [
      "next/babel",
      {
        "preset-env": {},
        "transform-runtime": {},
        "styled-jsx": {},
        "class-properties": {}
      }
    ]
  ],
  "plugins": []
}

[thiskevinwang]

temporarily fixed by #3

Though SWC will not be used