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

fushihara commented 11 months ago

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 commented 10 months ago

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

fushihara commented 1 month ago

Is this something for which there is no demand at all? I would like to use react to create dynamic web pages, I use express for all my routing.

I just noticed that the owner of this repository, Vercel, is the developer of next.js. Is this question itself out of line?

vercel / styled-jsx