feat: new extension vike-react-styled-jsx

package.json

@@ -30,7 +30,8 @@
       "vike-react-apollo": "link:./packages/vike-react-apollo/",
       "vike-react-chakra": "link:./packages/vike-react-chakra/",
       "vike-react-antd": "link:./packages/vike-react-antd/",
-      "vike-react-styled-components": "link:./packages/vike-react-styled-components/"
+      "vike-react-styled-components": "link:./packages/vike-react-styled-components/",
+      "vike-react-styled-jsx": "link:./packages/vike-react-styled-jsx/"
     }
   },
   "devDependencies": {

packages/vike-react-styled-jsx/.gitignore

@@ -0,0 +1,2 @@
+/node_modules/
+/dist/

packages/vike-react-styled-jsx/README.md

@@ -0,0 +1,121 @@
+# `vike-react-styled-jsx`
+
+[Installation](#installation)  
+[Settings](#settings)  
+[Version history](https://github.com/vikejs/vike-react/blob/main/packages/vike-react-styled-jsx/CHANGELOG.md)  
+[What it does](#what-it-does)  
+[See also](#see-also)  
+
+<br/>
+
+Integrates [styled-jsx](https://github.com/vercel/styled-jsx) to your [`vike-react`](https://vike.dev/vike-react) app.
+
+## Installation
+
+1. `npm install vike-react-styled-jsx styled-jsx`
+2. Extend `+config.js`:
+   ```js
+   // pages/+config.js
+
+   import vikeReact from "vike-react/config"
+   import vikeReactStyledJsx from "vike-react-styled-jsx/config"
+
+   export default {
+     // ...
+     extends: [vikeReact, vikeReactStyledJsx]
+   }
+   ```
+
+3. Add `styled-jsx`'s Babel plugin:
+   ```js
+   // vite.config.js
+   import react from "@vitejs/plugin-react"
+   import vike from "vike/plugin"
+
+   export default {
+     plugins: [
+      vike(),
+      react({
+        babel: {
+          plugins: [["styled-jsx/babel"]]
+        }
+      })
+    ]
+   }
+   ```
+
+4. You can now use `styled-jsx` at any of your components.
+   ```jsx
+   function SomeComponent() {
+     return (
+       <div>
+        <p>Only this paragraph will get the style.</p>
+
+        <style jsx>{`
+          p {
+            color: red;
+          }
+        `}</style>
+       </div>
+     )
+   }
+   ```
+
+> [!NOTE]
+> The `vike-react-styled-jsx` extension requires [`vike-react`](https://vike.dev/vike-react).
+
+<br/>
+
+## Settings
+
+`vike-react-styled-jsx` provides a configuration `+styledJsx` to set the [CSP nonce for `styled-jsx`](https://github.com/vercel/styled-jsx#content-security-policy).
+
+> [!NOTE]
+> You also need to set a `<meta property="csp-nonce" content={nonce} />` tag with the same nonce.
+> See [Vike Docs > head-tags](https://vike.dev/head-tags).
+
+```ts
+// pages/+styledJsx.js
+export { styledJsx }
+
+import nanoid from 'nanoid'
+
+const styledJsx = {
+  nonce: Buffer.from(nanoid()).toString('base64') //ex: N2M0MDhkN2EtMmRkYi00MTExLWFhM2YtNDhkNTc4NGJhMjA3
+}
+```
+
+You can remove the `vike-react-styled-jsx` integration from [some of your pages](https://vike.dev/config#inheritance):
+
+```js
+// pages/about/+styledJsx.js
+
+export const styledJsx = null
+```
+
+For full customization consider [ejecting](https://vike.dev/eject).
+
+> [!NOTE]
+> Consider making a [Pull Request before ejecting](https://vike.dev/eject#when-to-eject).
+
+<br/>
+
+## What it does
+
+The `vike-react-styled-jsx` extension allows you to use `styled-jsx` without [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content).
+
+It collects the page's styles during SSR and injects them earlier in the HTML, ensuring that styles are applied early (before even hydration begins).
+
+You can learn more at:
+ - [Vike > CSS-in-JS > Collect styles](https://vike.dev/css-in-js#collect-styles)
+ - [styled-jsx README > Server Side Rendering](https://github.com/vercel/styled-jsx#server-side-rendering)
+
+For more details, have a look at the source code of `vike-react-styled-jsx` (which is small).
+
+<br/>
+
+## See also
+
+- [Vike Docs > styled-jsx](https://vike.dev/styled-jsx)
+- [Vike Docs > CSS-in-JS](https://vike.dev/css-in-js)
+- [styled-jsx README](https://github.com/vercel/styled-jsx#readme)

packages/vike-react-styled-jsx/Wrapper.tsx

@@ -0,0 +1,16 @@
+export { Wrapper }
+
+import React, { type ReactNode } from 'react'
+import { StyleRegistry } from 'styled-jsx'
+import { usePageContext } from 'vike-react/usePageContext'
+
+function Wrapper({ children }: { children: ReactNode }) {
+  const pageContext = usePageContext()
+
+  if (pageContext.config.styledJsx === null) return <>{children}</>
+
+  if ('styledJsx' in pageContext) {
+    return <StyleRegistry registry={pageContext.styledJsx!.registry}>{children}</StyleRegistry>
+  }
+  return <>{children}</>
+}

packages/vike-react-styled-jsx/config.ts

@@ -0,0 +1,38 @@
+export { config as default }
+
+import type { Config } from 'vike/types'
+import type { StyledJsxStyleRegistry } from 'styled-jsx'
+
+const config = {
+  name: 'vike-react-styled-jsx',
+  require: {
+    vike: '>=0.4.203',
+    'vike-react': '>=0.4.13',
+  },
+  onBeforeRenderHtml: 'import:vike-react-styled-jsx/__internal/onBeforeRenderHtml:onBeforeRenderHtml',
+  onAfterRenderHtml: 'import:vike-react-styled-jsx/__internal/onAfterRenderHtml:onAfterRenderHtml',
+  Wrapper: 'import:vike-react-styled-jsx/__internal/Wrapper:Wrapper',
+  meta: {
+    styledJsx: {
+      env: { server: true },
+    },
+    Wrapper: {
+      env: { server: true },
+    },
+  },
+} satisfies Config
+
+declare global {
+  namespace Vike {
+    interface PageContext {
+      styledJsx?: {
+        registry?: StyledJsxStyleRegistry
+      }
+    }
+    interface Config {
+      styledJsx?: null | {
+        nonce?: string
+      }
+    }
+  }
+}

packages/vike-react-styled-jsx/onAfterRenderHtml.ts

@@ -0,0 +1,20 @@
+export { onAfterRenderHtml }
+
+import { useConfig } from 'vike-react/useConfig'
+import type { PageContext } from 'vike/types'
+
+function onAfterRenderHtml(pageContext: PageContext) {
+  const config = useConfig()
+  const registry = pageContext.styledJsx?.registry
+
+  if (registry) {
+    const nonce = pageContext.config.styledJsx?.nonce
+    const styles = registry.styles({ nonce })
+
+    config({
+      Head: styles,
+    })
+
+    registry.flush()
+  }
+}

packages/vike-react-styled-jsx/onBeforeRenderHtml.ts

@@ -0,0 +1,11 @@
+export { onBeforeRenderHtml }
+
+import { createStyleRegistry } from 'styled-jsx'
+import type { PageContext } from 'vike/types'
+
+function onBeforeRenderHtml(pageContext: PageContext) {
+  if (pageContext.config.styledJsx !== null) {
+    pageContext.styledJsx ??= {}
+    pageContext.styledJsx.registry = createStyleRegistry()
+  }
+}

packages/vike-react-styled-jsx/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "vike-react-styled-jsx",
+  "version": "0.0.0",
+  "type": "module",
+  "exports": {
+    "./config": "./dist/config.js",
+    "./__internal/onAfterRenderHtml": "./dist/onAfterRenderHtml.js",
+    "./__internal/onBeforeRenderHtml": "./dist/onBeforeRenderHtml.js",
+    "./__internal/Wrapper": "./dist/Wrapper.js"
+  },
+  "scripts": {
+    "dev": "tsc --watch",
+    "build": "rimraf dist/ && tsc",
+    "release": "release-me patch",
+    "release:minor": "release-me minor",
+    "release:major": "release-me major",
+    "release:commit": "release-me commit"
+  },
+  "peerDependencies": {
+    "styled-jsx": ">=5",
+    "react": ">=18",
+    "vike-react": ">=0.4.13"
+  },
+  "devDependencies": {
+    "@brillout/release-me": "^0.4.2",
+    "@types/react": "^18.2.55",
+    "react": "^18.3.1",
+    "rimraf": "^5.0.5",
+    "styled-jsx": "^5.1.6",
+    "typescript": "^5.5.3",
+    "vike": "^0.4.203",
+    "vike-react": "^0.5.10",
+    "vite": "^5.4.0"
+  },
+  "typesVersions": {
+    "*": {
+      "config": [
+        "dist/config.d.ts"
+      ],
+      "__internal/onAfterRenderHtml": [
+        "dist/onAfterRenderHtml.d.ts"
+      ],
+      "__internal/onBeforeRenderHtml": [
+        "dist/onBeforeRenderHtml.d.ts"
+      ],
+      "__internal/Wrapper": [
+        "dist/Wrapper.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "repository": "https://github.com/vikejs/vike-react/tree/main/packages/vike-react-styled-jsx",
+  "license": "MIT"
+}

packages/vike-react-styled-jsx/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "declaration": true,
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react",
+    "outDir": "./dist/",
+    "skipLibCheck": true,
+    "types": ["vike-react"],
+    // Strictness
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitAny": true
+  }
+}