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

Does not work with solid-start #53

Open
wakaztahir opened this issue Oct 26, 2023 · 1 comment
Open

Does not work with solid-start #53

wakaztahir opened this issue Oct 26, 2023 · 1 comment

Comments

@wakaztahir
Copy link

wakaztahir commented Oct 26, 2023

@ryansolid

I forked a library and made it work with solid-start, What it does is create Dynamic Component and also the style tag with all the styles inside it, Making it useless because all the styles are duplicated every time you use the styled component

This

const MyDiv = styled("div")`
  background-color : red;
`

becomes

(
   <>
      <style>.someclass { background-color : red }</style>
       <Dynamic component="div" class="someclass">
   </>
)

So I thought oh I need to cache the styles, I created a Map<string, boolean> which maps unique hash values to whether a style has been used. The map instantly becomes all true and no component renders styles in development.

The library is based on emotion-solid when using that library, It cleans up styles from head after rendering

here https://github.com/Qinetik/anique/blob/main/packages/styled/src/cache.tsx

Basically there's no way to cache styles at server side. You must render each style once on a single page, I cannot know if the style is has been rendered on the page.

This library also doesn't work #36

How should I use a CSS in JS library with Solid Start

@wakaztahir wakaztahir changed the title Not a single CSS in JS library works perfectly with solid-start Not a single CSS in JS library works with solid-start Oct 26, 2023
@wakaztahir
Copy link
Author

wakaztahir commented Oct 26, 2023

I've figured out how to fix my own bug, I am going to also make a pull request to emotion-solid and fix it there too

Gonna use useAssets hook, Although I don't know how it works

This library still doesn't work though and that's why I'm not closing this issue

@wakaztahir wakaztahir changed the title Not a single CSS in JS library works with solid-start Does not work with solid-start Oct 27, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant