An option to use solid-styled-jsx

[trusktr]

It'd be nice to be able to use solid-styled-jsx in the editor.

Maybe there can be an option for it. More generally (merits a new issue) there could be an option system.

[amoutonbrady]

Hey! That could be an idea yeah.

I'd need to check how it works properly and see if we can run it in the browser.
Right off the bat, I'm seeing that it doesn't support SSR but we do have a SSR preview... I'd need to see how those play together.

Out of curiosity, what problem does it solves for you? :)

[trusktr]

Out of curiosity, what problem does it solves for you? :)

About solid-styled-jsx specifically, it would let us write scoped styles in JSX in the playground, like so:

return <>
  <div ...>...</div>
  <style jsx> div {color: deeppink} </style>
</>

And this div style would apply only to the div in that markup.

As for options, that'd be handy. One problem is that Solid TypeScript is written with strict:true, but having strict:false in playground makes it inconsistent if you are trying to experience how types work (rather than trying to write plain JS).

More generally, it'd be nice if playground started with .jsx files, then an option would turn on TS mode with .tsx files and strict by default to match the environment Solid types were designed for (in strict false mode, some of Solid's types don't work as expected and always return any, which is something we recently fixed in Solid 1.3 with respect to effect APIs).

[trusktr]

The desire for this comes from having such features in Vue, for example, and wanting to migrate code from Vue to Solid. I would rather not use style attributes, but CSS including all it's features like selectors and the cascade.

[milomg]

solid-styled-jsx requires a babel plugin, but solid-styled-components might be an alternative that doesn't? https://playground.solidjs.com/?hash=1975487650&version=1.2.6

[ryansolid]

I think this a precursor to people wanting other babel plugins etc.. On the fence a bit since requires more work/interface and ties things to babel. It is convenient to have a style solution like this but Vue and Svelte also have official solutions.

[ndrean]

Thanks for the playground. Is it planed to support solid-styled-components ?