search

Xiphe / remix-island

utils to render remix into a dom-node instead of the whole document
MIT License
131 stars 7 forks source link

Helpful hint for anyone having a link tag below injected style tags #10

Closed SirZach closed 1 year ago

SirZach commented 1 year ago

I'm using both tailwind and emotion style mui components and ran into an issue using remix-island where the generated tailwind CSS was getting appended to the bottom of head and mui style tags were at the top and getting overwritten by tailwind. I wrote this little function to relocate the tailwind script tag and sharing here in case anyone else is experiencing the same or similar problems:

          body.write(
            `<!DOCTYPE html><html><head>${head}</head><body><div id="root">`
          );
          pipe(body);
          body.write(`</div>
          <script>
          (function () {
            const timer = setInterval(() => {
              const tailwindscript = document.getElementById('TAILWIND');
              const firstChild = document.head.children[0];

              if (tailwindscript === firstChild) {
                clearInterval(timer);
              } else if (firstChild.tagName === 'STYLE') {
                document.head.insertBefore(tailwindscript, firstChild);
              }
            }, 10)
          })()
          </script>
          </body></html>`);

Where in root.tsx the tailwind link is set up like

{ rel: "stylesheet", id: "TAILWIND", href: stylesheet },
SirZach commented 1 year ago

Will close as this isn't actually an issue.

Xiphe commented 1 year ago

Cool thanks for sharing. Have you tried adding your tailwind styles like so?


 body.write(
  `<!DOCTYPE html><html><head>
      <link rel="stylesheet" href="${tailwindStylesHref}" />
      ${head}
    </head><body><div id="root">`
);
SirZach commented 1 year ago

I did but MUI injects its script tags to the top of head after the app has initialized

Xiphe commented 1 year ago

that's odd 🤔 really hope we'll get rid of this workaround soon 🤞 and glad you fond a way to make it work for you!