linaria
linaria copied to clipboard
Support SolidStart & Astro
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
-
Linaria doesn't work with SolidStart & probably with updated Astro, because they use server side streaming, They extract HTML from components and strip javascript which is delivered separately as you might know i.e Islands Architecture
-
This pull request is open and hasn't been merged into main #1096
So I set out to solve these issues in my own fork and did these things
- I got #1096 working with latest versions of
SolidJS
andAstro
- I got #1096 working with latest SolidJS and
Astro
versions - I also managed to make
SolidJS
work with server side rendering withbabel-preset-solid
with SSR options["babel-preset-solid", { generate : "ssr", hydratable : true }]
- I also had to add
babel-preset-solid
into transform options presets, So I had to provide transform options object parameter in vite plugin options and then to transform services and get the object and put it in transform options - I also had to exclude extensions which were empty, so had to add
extension != ""
This is because /@solid-refresh was going inside readFileAsync and cause File Not found
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
I'm currently trying to use linaria in my solid start project and got it to run (somewhat), here's some of my observations:
- 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?
- #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...
- 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.
- 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)
I would love to see Linaria support for Solid Start.