solid-playground icon indicating copy to clipboard operation
solid-playground copied to clipboard

An option to use solid-styled-jsx

Open trusktr opened this issue 4 years ago • 6 comments

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.

trusktr avatar Dec 23 '21 08:12 trusktr

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? :)

amoutonbrady avatar Dec 24 '21 21:12 amoutonbrady

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 avatar Dec 25 '21 20:12 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.

trusktr avatar Dec 25 '21 20:12 trusktr

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

milomg avatar Jan 04 '22 00:01 milomg

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.

ryansolid avatar Jan 04 '22 01:01 ryansolid

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

ndrean avatar May 16 '23 18:05 ndrean