facebook / facebook/docusaurus

CSS-in-JS Rendering Hooks

Open
#3,236 26 comments 8 reactions 0 assignees View on GitHub
difficulty: advanced proposal
Dominant language
TypeScript
Stars
66.2k
Forks
10k
Avg merge
1d 3h
Merged PRs (30d)
52

Description

## 💥 Proposal: Hooks for CSS-in-JS Client and Server Rendering

> - [ ] Guides / Styling and Layouts → Styling components with CSS-in-JS frameworks

So, the [[v2] ☂️ Umbrella issue for v2 docs](https://github.com/facebook/docusaurus/issues/1640) has the above open TODO (although the issue has been closed); and this is [also currently mentioned in the docs](https://v2.docusaurus.io/docs/styling-layout/#css-in-js) as "welcoming PRs".

I have some experience with the setup patterns for [`emotion`](https://emotion.sh/docs/ssr) (incl. v11) and [`styled-components`](https://styled-components.com/docs/advanced#server-side-rendering) here, and would like to help with this. As far as I can tell from the source, this would require additions to the [Lifecycle APIs](https://v2.docusaurus.io/docs/lifecycle-apis) so that the [`serverEntry.js`](https://github.com/facebook/docusaurus/blob/be210a1bc45976b106dadf83e89445ba56cd73cb/packages/docusaurus/src/client/serverEntry.js#L47-L55) and [`clientEntry.ts`](https://github.com/facebook/docusaurus/blob/be210a1bc45976b106dadf83e89445ba56cd73cb/packages/docusaurus/src/client/clientEntry.tsx#L32-L37) files' rendering functions could be modified. I would need some guidance on creating these hooks.

Anyone want to help me get started?

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.