Does not work with solid-start

[wakaztahir]

@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]

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