4d0783d9be
Use flush effects to custom apply css-in-js solution to app. Re-introduce flush effects to app-render, and remove default support of styled-jsx in `app/`. So that users will choose their own css-in-js solution if they need any customization. styled-jsx won't appear in client bundle if you didn't use it. For now we have to inject the initial styles before `</head>` to avoid hydration errors. Later on we can remove this once react can handle it. - [x] inject styles before end of head element - [x] add tests
14 lines
507 B
TypeScript
14 lines
507 B
TypeScript
import React, { createContext, useContext } from 'react'
|
|
|
|
export type FlushEffectsHook = (callbacks: () => React.ReactNode) => void
|
|
|
|
export const FlushEffectsContext = createContext<FlushEffectsHook | null>(
|
|
null as any
|
|
)
|
|
|
|
export function useFlushEffects(callbacks: () => React.ReactNode): void {
|
|
const flushEffectsImpl = useContext(FlushEffectsContext)
|
|
// Should have no effects on client where there's no flush effects provider
|
|
if (!flushEffectsImpl) return
|
|
return flushEffectsImpl(callbacks)
|
|
}
|