jjenzz/Stitches SSR with Remix Secret

## Stitches SSR with Remix
// entry.server.tsx
import * as ReactDOMServer from 'react-dom/server';
import * as Remix from 'remix';
import { getCssText } from '~/stitches.config';
import type { EntryContext } from 'remix';

export default function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext
) {
  const markup = ReactDOMServer.renderToString(
    <Remix.RemixServer context={remixContext} url={request.url} />
  ).replace(/<\/head>/, `<style>${getCssText()}</style></head>`);

  responseHeaders.set('Content-Type', 'text/html');

  return new Response('<!DOCTYPE html>' + markup, {
    status: responseStatusCode,
    headers: responseHeaders,
  });
}


// root.tsx
import { globalStyles } from '~/stitches.config';
export default function App() {
  globalStyles();
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <Remix.Meta />
        <Remix.Links />
        <style dangerouslySetInnerHTML={{ __html: getCssText() }} />
      </head>
      <body>
        <Remix.Outlet />
        <Remix.ScrollRestoration />
        <Remix.Scripts />
        {process.env.NODE_ENV === 'development' && <Remix.LiveReload />}
      </body>
    </html>
  );
};
	// entry.server.tsx
	import * as ReactDOMServer from 'react-dom/server';
	import * as Remix from 'remix';
	import { getCssText } from '~/stitches.config';
	import type { EntryContext } from 'remix';

	export default function handleRequest(
	request: Request,
	responseStatusCode: number,
	responseHeaders: Headers,
	remixContext: EntryContext
	) {
	const markup = ReactDOMServer.renderToString(
	<Remix.RemixServer context={remixContext} url={request.url} />
	).replace(/<\/head>/, `<style>${getCssText()}</style></head>`);

	responseHeaders.set('Content-Type', 'text/html');

	return new Response('<!DOCTYPE html>' + markup, {
	status: responseStatusCode,
	headers: responseHeaders,
	});
	}


	// root.tsx
	import { globalStyles } from '~/stitches.config';
	export default function App() {
	globalStyles();
	return (
	<html lang="en">
	<head>
	<meta charSet="utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1" />
	<Remix.Meta />
	<Remix.Links />
	<style dangerouslySetInnerHTML={{ __html: getCssText() }} />
	</head>
	<body>
	<Remix.Outlet />
	<Remix.ScrollRestoration />
	<Remix.Scripts />
	{process.env.NODE_ENV === 'development' && <Remix.LiveReload />}
	</body>
	</html>
	);
	};