From ef2d8b3ecb4d9fb9b07b02bd0909a5dae3c06401 Mon Sep 17 00:00:00 2001 From: Josh <37798644+joshuaellis@users.noreply.github.com> Date: Sat, 11 May 2024 15:11:53 +0100 Subject: [PATCH] chore: fix stitches issues --- docs/app/components/Feedback/Feedback.tsx | 3 +- docs/app/entry.client.tsx | 30 +- docs/app/entry.server.tsx | 9 +- docs/app/root.tsx | 22 +- docs/app/styles/client.context.ts | 13 + docs/package.json | 17 +- docs/vite.config.mts | 24 +- package.json | 4 +- yarn.lock | 691 ++++++++++++++-------- 9 files changed, 522 insertions(+), 291 deletions(-) create mode 100644 docs/app/styles/client.context.ts diff --git a/docs/app/components/Feedback/Feedback.tsx b/docs/app/components/Feedback/Feedback.tsx index 93ac9926ca..36347b4d3e 100644 --- a/docs/app/components/Feedback/Feedback.tsx +++ b/docs/app/components/Feedback/Feedback.tsx @@ -25,7 +25,6 @@ export const Feedback = ({ location }: FeedbackProps) => { const isDarkMode = useIsDarkTheme() const handleClick = (type: 'upvote' | 'downvote') => () => { - console.log('clicked!') setSelected(type) const name = @@ -146,7 +145,7 @@ const FeedbackButton = ({ -
+ { + setSheet(getCssText()) + }, []) + + return ( + + {children} + + ) +} -hydrateRoot(document, ) +hydrateRoot( + document, + + + +) diff --git a/docs/app/entry.server.tsx b/docs/app/entry.server.tsx index 448f21eaa8..404378aeae 100644 --- a/docs/app/entry.server.tsx +++ b/docs/app/entry.server.tsx @@ -10,9 +10,14 @@ export default function handleRequest( responseHeaders: Headers, remixContext: EntryContext ) { - const markup = renderToString( + let markup = renderToString( - ).replace(/<\/head>/, ``) + ) + + markup = markup.replace( + /` + ) responseHeaders.set('Content-Type', 'text/html') diff --git a/docs/app/root.tsx b/docs/app/root.tsx index c2490bae14..1f58b4e04d 100644 --- a/docs/app/root.tsx +++ b/docs/app/root.tsx @@ -1,3 +1,5 @@ +import * as React from 'react' + import { MetaFunction, LinksFunction, @@ -6,7 +8,6 @@ import { } from '@remix-run/node' import { Links, - LiveReload, Meta, Outlet, Scripts, @@ -20,6 +21,7 @@ import { globalStyles } from './styles/global' import { WidgetTheme } from './components/Widgets/WidgetTheme' import { WidgetPlausible } from './components/Widgets/WidgetPlausible' import { SiteFooter } from './components/Site/SiteFooter' +import { ClientStyleContext } from './styles/client.context' export const meta: MetaFunction = () => { return [ @@ -82,7 +84,15 @@ export const loader: LoaderFunction = () => { function Document({ children }: { children: React.ReactNode }) { globalStyles() - const data = useLoaderData() + const clientStyleData = React.useContext(ClientStyleContext) + + // Only executed on client + React.useEffect(() => { + // reset cache to re-apply global styles + clientStyleData.reset() + }, [clientStyleData]) + + const data = useLoaderData<{ ENV: object }>() return ( @@ -91,8 +101,13 @@ function Document({ children }: { children: React.ReactNode }) { +