Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support For Solidjs #821

Open
swise0 opened this issue Aug 17, 2021 · 9 comments
Open

Support For Solidjs #821

swise0 opened this issue Aug 17, 2021 · 9 comments
Labels
enhancement: proposal 💬 Improvement of current behaviour that needs to be discussed needs: triage 🏷 Issue needs to be checked and prioritized

Comments

@swise0
Copy link

swise0 commented Aug 17, 2021

Solidjs framework is A faster React Alternative..

@swise0 swise0 added the enhancement: proposal 💬 Improvement of current behaviour that needs to be discussed label Aug 17, 2021
@github-actions github-actions bot added the needs: triage 🏷 Issue needs to be checked and prioritized label Aug 17, 2021
@petamoriken
Copy link

This repository may be used as a reference to implement a CSS in JS implementation in SolidJS.
https://github.com/solidjs/solid-styled-components

@raveclassic
Copy link

raveclassic commented Aug 1, 2022

Hey everyone! FYI I'm working on this.
Basically it all nails down to building a new processor, mostly similar to StyledProcessor in @linaria/react. I'm already able to transpile html tags down to pure jsx-components, which can then be passed to babel-preset-solid that transpiles them to pure dom/ssr templates.

So it's working for html tags (styled.div) but I'm having troubles with anonymous components wrapped directly in styled (e.g. styled(() => <div></div>)), they just disappear from the output even with the base @linaria/react, the body is replaced with a simple () => {}.

Additionally, I think I'd need some help with understanding where/how things like const _exp = () => .... are generated. Currently, all interpolations are replaced with such functions, example:

`
color: ${props => props.color};
`

is transpiled to

const _exp = () => props => props.color

and _exp can then be called directly in the body of the newly generated component this way:

const style = {
  '--sdfds-0': _exp()(props)
}

Do you see the extra call? I'd like to know if it's possible to hook into generation of these _exps.

Additionally, I'd like to know if you'd merge this to the repo as a separate package? (similar to atomic package)

@Anber
Copy link
Collaborator

Anber commented Aug 1, 2022

@raveclassic it will be a long story :) Can you message me in TG @anber_ru?

@victorteokw
Copy link

Really want to use linaria with Solid.js. Any updates on this?

@usmanyunusov
Copy link

@victorteokw, we have a test library. I'll try to make a PR tomorrow.

@victorteokw
Copy link

Many thanks @usmanyunusov 🎉

@rockwotj
Copy link

PR: #1096

@MrFoxPro
Copy link
Contributor

MrFoxPro commented Nov 18, 2022

@usmanyunusov @raveclassic nu kak tam s dengami?
I can help with solid btw
Check demo with astro + solid: #1118

@raveclassic
Copy link

@MrFoxPro I've updated the PR and added a simple demo #1096

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement: proposal 💬 Improvement of current behaviour that needs to be discussed needs: triage 🏷 Issue needs to be checked and prioritized
Projects
None yet
Development

No branches or pull requests

8 participants