CSS-in-JS Support #65
Replies: 2 comments 6 replies
-
|
Maybe consider a zero-runtime library like Linaria, which does all its work at build time with Babel and a bundler (Rollup is supported)? |
Beta Was this translation helpful? Give feedback.
-
|
Yeah, that makes sense, and I know you wouldn't want to proscribe something like that for a general purpose library like this. My reason for suggesting it is that it doesn't really hook into the rendering process at all, it's all performed at build time. |
Beta Was this translation helpful? Give feedback.
-
|
Ahh OK, gotcha. There really aren't any hooks to modify the build process like Linaria would need, but maybe exposing |
Beta Was this translation helpful? Give feedback.
-
|
Ah I misremembered which bundler is used in my earlier comment, I thought it was Rollup. It looks like Linaria doesn't currently (yet?) work with Snowpack (though I'd imagine it certainly could). In any case, more generally I think as far as config goes, I'd probably take a cue from Next.js and allow an optional |
Beta Was this translation helpful? Give feedback.
-
|
You were right! Microsite's "secret sauce" is an opinionated Rollup config with some special I am open to introducing an optional |
Beta Was this translation helpful? Give feedback.
-
|
Oh awesome. I didn’t know Snowpack is built on Rollup. I’m just surveying the landscape outside of Next.js for a web project after years working backend, particularly focusing on partial hydration/small bundle size as the content is mostly static. But the whole world of bundlers is pretty inscrutable to me. |
Beta Was this translation helpful? Give feedback.
-
|
I think I landed on the following option for v1.1.0. You can define a custom Document component at import { defineDocument, Html, Head, Main, MicrositeScript } from "microsite/document";
const Document = () => (
<Html>
<Head />
<body>
<Main />
<MicrositeScript />
</body>
</Html>
);
export default defineDocument(Document, {
async prepare({ renderPage }) {
const page = await renderPage();
const styles = await somePostRenderHook();
return { ...page, styles };
},
}); |
Beta Was this translation helpful? Give feedback.
-
As mentioned in the docs, CSS-in-JS is unsupported at the moment. This is because I'm not exposing the internal Document component wrapper (yet).
Next.js solution is to allow users to create a custom
_app.jsor_document.jscomponent, and this is where most CSS-in-JS libraries hook in to generate their stylesheets.I'd love community feedback on this, to see if there's a nicer API that could be exposed here. I'm very open to alternative suggestions.
Beta Was this translation helpful? Give feedback.
All reactions