compiled
compiled copied to clipboard
atlassian-labs
Extracted critical styles
After shipping CSS extraction we now lose the added benefit of "critical css". We should come up with an idea to add it back into the mix.
There are two paths which we need to solve:
- Synchronous
renderToString()- render everything, collect rendered class names, return styles to render
Quick API thrown at the wall:
import { CriticalStyles } from '@compiled/react/server';
let criticalStyles = '';
const html = renderToString(
<CriticalStyles onCollectedStyles={styles => (criticalStyles = styles)}>
<App />
</CriticalStyles>
);
return `
<html>
<head>
<style>{criticalStyles}</style>
</head>
<body>{html}</body>
</html>
`
- Streaming
renderToStream()- render styles interweaved between chunks and have a small runtime sent at the end to clean up before React starts up. Very important when Suspense on the server is a thing.
Potentially we can re-use a similar API as above except it would be on "flush" styles. Basically calling back repeatedly every time styles have been found. One issue we need to worry about is since we're essentially sending an atomic style sheet in parts, there is a chance for the style cascade to change before and after the cleanup has executed. It's OK for user interaction styles to not be stable, but layout and color need to be consistent. See: #31.
