Does not work with solid-start
wakaztahir opened this issue · comments
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
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