How to use styled-jsx with webpack and React only, without Babel and Next.js?

[fushihara]

I am not using Next.js and Babel.
I would like to use styled-jsx with react and webpack only, is that possible?

I checked the documentation and all it says is that the webpack section is set to the babel plugin, but I am not using babel.

Do you want to request a feature or report a bug?

feature

What is the current behavior?

I am using style jsx in a tsx file, but the css created is not scoped and the style is applied to elements outside of React

If the current behavior is a bug, please provide the steps to reproduce and possibly a minimal demo or testcase in the form of a Next.js app, CodeSandbox URL or similar

https://codesandbox.io/p/sandbox/github/fushihara/react-styled-jsx-help/tree/main

I have defined a red background style for the .test element in React mounted in index.ejs.
The "in react" element will have a red background, as desired,
The "out react" element also has a different color, which is unnecessary.

I would prefer to isolate the style for the .test element only in the sub.tsx file.

Environment (include versions)

• Version of styled-jsx (or next.js if it's being used):5.1.2
• Browser:Google chrome 115
• OS:windows 10

Did this work in previous versions?

no.

[Andrewcpu]

I'm also seeing this issue, but I was under the impression that it should work.