Network request for packagestyles.css. CSS file loaded multiple times.

[BitStream1]

Many thanks for this gradient picker!

In v3, I notice that a network request is being made for: https://gradient-package-demo.web.app/packagestyles.css

I think developers typically want to bundle their CSS and not rely on external network requests for resources, for numerous reasons.

I think the relevant code is here: https://github.com/hxf31891/react-gradient-color-picker/blob/bf38dffde3597adb7b7566f65e81a0a74aa42515/src/components/index.tsx#L65

It also seems to load 2 copies each time the color picker is opened, so you end up with a lot of copies of the file loaded:

Maybe this is something that might have been used for the demo app, that you might want to turn off for production?

I don't think this was happening in v2. Just thought I'd bring this to your attention. Cheers!

[hxf31891]

@BitStream1 styles have been a constant issue with people using Next. Might just go back to inline.

[kacperadach]

yeah I just ran into this, ended up moving all the styles into my own CSS file.

[Teckden]

This library is awesome! Thanks a lot for creating it.

Unfortunately, the remote link to packagestyles file is kinda unexpected :) I completely missed this part when I used the lib initially.

it used to load via https://prod-api.outsyde.app/packagestyles.css, which is dead now and is replaced with https://gradient-package-demo.web.app/packagestyles.css which killed the styling and I was not aware of it for some time :(

Would be great to have the option to skip remote loading of the packagestyles

[hxf31891]

I am working on a fix as we speak, bear with me for a couple hours.

[Teckden]

As for multiple link tags, i guess it can be solved by wrapping it in the useEffect that runs only on mount once:

useEffect(
  () => {
    document
    ?.getElementsByTagName('head')[0]
    ?.insertAdjacentHTML(
      'beforeend',
      '<link rel="stylesheet" href="https://gradient-package-demo.web.app/packagestyles.css" />'
    )
  },
  []
)

and we can add an option not to include it inside the useEffect if (skipRemoteStyles) return

[hxf31891]

Remote styles are completely removed in v3.0.5, package now uses reactJSS. Let me know if any issues arise.