chore: fix stitches issues

pmndrs · May 11, 2024 · 487bdb5 · 487bdb5
1 parent 454a771
commit 487bdb5
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 7 deletions.
diff --git 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 = ({
  <X />
  </PopoverClose>
  </PopoverHeader>
- <Form ref={formRef} method="post" action="/api/feedback" replace>
+ <Form ref={formRef} method="post" action="/api/feedback">
  <HiddenInput
  name="variant"
  type="checkbox"

diff --git a/docs/app/entry.client.tsx b/docs/app/entry.client.tsx
@@ -1,5 +1,31 @@
+import { RemixBrowser } from '@remix-run/react'
+import * as React from 'react'
 import { hydrateRoot } from 'react-dom/client'
 
-import { RemixBrowser } from '@remix-run/react'
+import { ClientStyleContext } from '~/styles/client.context'
+import { getCssText } from '~/styles/stitches.config'
+
+interface ClientCacheProviderProps {
+ children: React.ReactNode
+}
+
+function ClientCacheProvider({ children }: ClientCacheProviderProps) {
+ const [sheet, setSheet] = React.useState(getCssText())
+
+ const reset = React.useCallback(() => {
+ setSheet(getCssText())
+ }, [])
+
+ return (
+ <ClientStyleContext.Provider value={{ reset, sheet }}>
+ {children}
+ </ClientStyleContext.Provider>
+ )
+}
 
-hydrateRoot(document, <RemixBrowser />)
+hydrateRoot(
+ document,
+ <ClientCacheProvider>
+ <RemixBrowser />
+ </ClientCacheProvider>
+)
diff --git 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(
  <RemixServer context={remixContext} url={request.url} />
- ).replace(/<\/head>/, `<style id="stitches">${getCssText()}</style></head>`)
+ )
+
+ markup = markup.replace(
+ /<style id="stitches">.*<\/style>/g,
+ `<style id="stitches">${getCssText()}</style>`
+ )
 
  responseHeaders.set('Content-Type', 'text/html')
 

diff --git a/docs/app/root.tsx b/docs/app/root.tsx
@@ -1,3 +1,5 @@
+import * as React from 'react'
+
 import {
  MetaFunction,
  LinksFunction,
@@ -20,6 +22,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 +85,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 (
  <html lang="en">
@@ -91,6 +102,11 @@ function Document({ children }: { children: React.ReactNode }) {
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <Meta />
  <Links />
+ <style
+ id="stitches"
+ dangerouslySetInnerHTML={{ __html: clientStyleData.sheet }}
+ suppressHydrationWarning
+ />
  <WidgetPlausible />
  <WidgetTheme />
  </head>

diff --git a/docs/app/styles/client.context.ts b/docs/app/styles/client.context.ts
@@ -0,0 +1,13 @@
+import { createContext } from 'react'
+
+export interface ClientStyleContextData {
+ reset: () => void
+ sheet: string
+}
+
+const ClientStyleContext = createContext<ClientStyleContextData>({
+ reset: () => {},
+ sheet: '',
+})
+
+export { ClientStyleContext }