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.

Sign up for GitHub

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

Jump to bottom

Style not applied when using returned component #27

Open
BulliedBeginner opened this issue Jun 1, 2022 · 7 comments
Open

Style not applied when using returned component #27

BulliedBeginner opened this issue Jun 1, 2022 · 7 comments

Comments

@BulliedBeginner
Copy link

BulliedBeginner commented Jun 1, 2022 •
edited
Loading

When I pass an object which is already created inside function, the style is not applied.

image

The background supposed to become red and I should have flexbox layout shown inside the developer tool.
image

I am using Astro JS as framework. Therefore if this is not a bug, the problem might occur inside Astro JS
@ryansolid
Copy link
Member

Is the SSR script getting included on the page? Ie are you using extractCss(https://github.com/solidjs/solid-styled-components#extractcsstarget)? CSS in JS library like this will need to output a style tag on the page. Otherwise not sure timing of when JS will be run.

I'm pretty sure this works pure client-side. As for server-side I'm just guessing. A reproduction could help narrow this down.

@BulliedBeginner
Copy link
Author

Nope, I am not using extractCss. The picture have shown all the code I have. I do not quite understand how to use it. So if I want to export the component. Do I need to export the CSS style separately?
Or in my case, which steps I have missed to successfully export the component?

@ryansolid
Copy link
Member

Yeah with CSS in JS libraries you need to put the CSS on the page when you SSR. To be fair I have no clue how to do this with Astro. But generally you call extractCss after server rendering and then generate the Style tag like shown in the docs and insert it in the head of your page. I don't know how Astro handles these sort of injections. Might be worth asking them. But without it the CSS won't be present when the app renders. Now it is possible something else is going on as well since once the Solid component hydrates it should rerun some of this logic in the client.

@dephiros dephiros mentioned this issue Sep 7, 2022
Closed
1 task
@dephiros
Copy link

dephiros commented Sep 7, 2022

I made a failed attempt here: https://stackblitz.com/edit/github-rqtizn-easxa3?file=astro.config.mjs. The integration does not work because document does not exist to inject css
Without the extractCss, it will work only when client:load is enabled for a component since the js will inject the css at runtime but no SSR stylesheet

@ryansolid
Copy link
Member

Yeah all CSS in JS libraries generally work this way requiring a way to serialize it out with something like extractCss I'm just not clear what Astro does here. This seems like more of an Astro question. Yeah reading the issue most CSS in JS libraries aren't built to handle their case.

@dephiros
Copy link

dephiros commented Sep 8, 2022 •
edited
Loading

I was staring at the adapter API yesterday and thought that the one place that make sense is through: https://docs.astro.build/en/reference/integrations-reference/#injectscript-option but this obviously does not work because Astro does not have an API to add to <head />
I guess another solution is potentially using vite virtual module to call extractCss and let vite inject the css to the header.
This is all my noob research theory since I am very unfamiliar with both vite and astro.
But yeah i saw both twind and goober requires the extractCss pattern. I guess a framework like svelte/vue has the advantage in this particular scenario since they don't need css-in-js and can just handle SSR their css with addRenderer API. addRenderer is the on place I can see so far that you can put random text in the header

@mlaopane
Copy link

mlaopane commented Dec 29, 2022 •
edited
Loading

@BulliedBeginner
Don't you need to forward the props to a top level tag in your component ?

Also when creating an issue, I'd generally recommend to :

  • provide something which can be copied (not a screenshot)
  • share a small example so someone can reproduce

Otherwise, it makes it harder for people who may want to help.

@dephiros dephiros mentioned this issue Sep 7, 2022
Closed
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@dephiros @ryansolid @mlaopane @BulliedBeginner