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,101 @@
+# `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)  
+[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/babel` to plugins in your babel configuration:
+   ```js
+   // vite.config.js
+   import { defineConfig } from "vite"
+   import react from "@vitejs/plugin-react"
+   import vike from "vike/plugin"
+
+   export default defineConfig({
+     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` that adds a [CSP nonce](https://github.com/vercel/styled-jsx?tab=readme-ov-file#content-security-policy) meta tag and injects the nonce into the style tag.
+
+```ts
+// pages/+styledJsx.js
+export { styledJsx }
+
+import nanoid from 'nanoid'
+
+const styledJsx = {
+  nonce: Buffer.from(nanoid()).toString('base64') //ex: N2M0MDhkN2EtMmRkYi00MTExLWFhM2YtNDhkNTc4NGJhMjA3
+}
+```
+
+You can remove the styled-jsx SSR 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/>
+
+## See also
+
+- [Vike Docs > styled-jsx](https://vike.dev/styled-jsx)

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

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

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

@@ -0,0 +1,35 @@
+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',
+  },
+  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 {
+      styledJsxRegistry?: StyledJsxStyleRegistry
+    }
+    interface Config {
+      styledJsx?: null | {
+        nonce?: string
+      }
+    }
+  }
+}

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

@@ -0,0 +1,26 @@
+export { onAfterRenderHtml }
+
+import React from 'react'
+import { useConfig } from 'vike-react/useConfig'
+import type { PageContext } from 'vike/types'
+
+function onAfterRenderHtml(pageContext: PageContext) {
+  const config = useConfig()
+  const registry = pageContext.styledJsxRegistry
+
+  if (registry) {
+    const nonce = pageContext.config.styledJsx?.nonce
+    const styles = registry.styles({ nonce })
+
+    config({
+      Head: (
+        <>
+          {nonce ? <meta property="csp-nonce" content={nonce} /> : ''}
+          {styles}
+        </>
+      ),
+    })
+
+    registry.flush()
+  }
+}

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

@@ -0,0 +1,52 @@
+{
+  "name": "vike-react-styled-jsx",
+  "version": "0.0.0",
+  "type": "module",
+  "exports": {
+    "./config": "./dist/config.js",
+    "./__internal/onAfterRenderHtml": "./dist/onAfterRenderHtml.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/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
+  }
+}