callstack / linaria

Zero-runtime CSS in JS library
https://linaria.dev
MIT License
11.48k stars 415 forks source link

Support SolidStart & Astro #1377

Open wakaztahir opened 10 months ago

wakaztahir commented 10 months ago

I created a fork of linaria with a different name "xqp" I want to use it in my project which uses SolidJS

I know that Linaria works with SolidJS & SolidJS with server side streaming, However that's not enough

So I set out to solve these issues in my own fork and did these things

Then instead of merging this into main, I merged main into this branch, I made it work after some effort, I could probably do it all again and merge this pull request back into main and create it here but I think it would be ignored since the above pull request has been ignored

Currently I am encountering issues like import.meta.hot cannot be used outside a module, which is being put in by solid plugin, My best guess is these must be evaluated and babel is not evaluating them, I have turned on softErrors for this to work for now as traversing the tree to remove these is hard. Also reactivity doesn't work when using linaria with solid, don't know why which is a big issue, https://github.com/callstack/linaria/pull/1096#issuecomment-1360750259

My Request is that These issues should be fixed and SolidStart & Astro should be supported with server side rendering without a single issue

Here's my build commit https://github.com/Qinetik/xqp/tree/db3ff2e924d2c7815402836b275fd1fac1b2da56

shiro commented 10 months ago

I'm currently trying to use linaria in my solid start project and got it to run (somewhat), here's some of my observations:

  1. the linaria vite plugin runs after solid start (prob. a good thing for perf.) so it has to work with the files already transformed by solid (and other user babel plugins), this causes some eval issues (i.e. solid refresh)

I used a custom babel plugin that I pass to linaria to remove things that cause eval errors from the AST (certain import, solid refresh function calls, solid function calls, etc.). It's very fragile, but I guess this will improve as linaria shaker gets better?

  1. 1246 pops up constantly (it's an unresolved issue on vite's side) and goes away after restarting the server (and waiting for the recompile) only to pop up again when navigating to another lazy component on the page that hasn't compiled yet.

I guess we have to wait for https://github.com/vitejs/vite/issues/14493 to get fixed for this one...

  1. production build often fails with Module 001234 is disposed (maybe #1352), it always happens when compiling the server bundle, client always works for me... I made sure that linaria is not evaluating any server files.

No clue, just re-run build until it works... Probably more likely to happen with bigger code-bases so builds have a smaller chance of succeeding.

  1. There's currently no styled.something support for solid in linaria, but adding it shouldn't be too hard as the previous PR gets very close, just needs some adjustments to not lose reactivity.

Just use css or patch up the solid styled support PR.

Would really love to see the issues fixed and solid start getting first-class support, although they are currently moving over to vinxi as the base, so not sure if the linaria vite plugin will be sufficient or if a separate nitro integration is required for it to work in production builds... (based on the example it looks sufficient)

chrisbirster commented 2 weeks ago

I would love to see Linaria support for Solid Start.