feat: contextual styled-jsx

index.d.ts

@@ -1,3 +1,5 @@
+import React from 'react'
+
 declare module 'react' {
   interface StyleHTMLAttributes<T> extends HTMLAttributes<T> {
     jsx?: boolean
@@ -8,10 +10,15 @@ declare module 'react' {
 export type StyleRegistry = {
   styles(options?: { nonce?: boolean }): JSX.Element
   flush(): void
+  add(props: any): void
+  remove(props: any): void
 }
 export function useStyleRegistry(): StyleRegistry
 export function StyleRegistry({
-  children
+  children,
+  registry
 }: {
-  children: JSX.Element
+  children: JSX.Element | React.ReactNode
+  registry?: StyleRegistry
 }): JSX.Element
+export function createStyleRegistry(): StyleRegistry

src/index.js

@@ -1 +1,5 @@
-export { StyleRegistry, useStyleRegistry } from './stylesheet-registry'
+export {
+  StyleRegistry,
+  createStyleRegistry,
+  useStyleRegistry
+} from './stylesheet-registry'

src/stylesheet-registry.js

@@ -2,6 +2,22 @@ import React, { useState, useContext, createContext, useMemo } from 'react'
 
 import DefaultStyleSheet from './lib/stylesheet'
 import { computeId, computeSelector } from './lib/hash'
+
+function mapRulesToStyle(cssRules, options = {}) {
+  return cssRules.map(args => {
+    const id = args[0]
+    const css = args[1]
+    return React.createElement('style', {
+      id: `__${id}`,
+      // Avoid warnings upon render with a key
+      key: `__${id}`,
+      nonce: options.nonce ? options.nonce : undefined,
+      dangerouslySetInnerHTML: {
+        __html: css
+      }
+    })
+  })
+}
 export class StyleSheetRegistry {
   constructor({
     styleSheet = null,
@@ -120,6 +136,10 @@ export class StyleSheetRegistry {
     )
   }
 
+  styles(options) {
+    return mapRulesToStyle(this.cssRules(), options)
+  }
+
   getIdAndRules(props) {
     const { children: css, dynamic, id } = props
 
@@ -163,11 +183,17 @@ function invariant(condition, message) {
   }
 }
 
-export const StyleSheetContext = createContext(new StyleSheetRegistry())
+export const StyleSheetContext = createContext(null)
+
+export function createStyleRegistry() {
+  return new StyleSheetRegistry()
+}
 
-export function StyleRegistry({ children }) {
+export function StyleRegistry({ registry: configuredRegistry, children }) {
   const rootRegistry = useContext(StyleSheetContext)
-  const [registry] = useState(() => rootRegistry || new StyleSheetRegistry())
+  const [registry] = useState(
+    () => configuredRegistry || rootRegistry || createStyleRegistry()
+  )
 
   return React.createElement(
     StyleSheetContext.Provider,
@@ -179,31 +205,5 @@ export function StyleRegistry({ children }) {
 export function useStyleRegistry() {
   const registry = useContext(StyleSheetContext)
 
-  return useMemo(
-    () => ({
-      styles(options) {
-        return mapRulesToStyle(registry.cssRules(), options)
-      },
-      flush() {
-        registry.flush()
-      }
-    }),
-    [registry]
-  )
-}
-
-function mapRulesToStyle(cssRules, options = {}) {
-  return cssRules.map(args => {
-    const id = args[0]
-    const css = args[1]
-    return React.createElement('style', {
-      id: `__${id}`,
-      // Avoid warnings upon render with a key
-      key: `__${id}`,
-      nonce: options.nonce ? options.nonce : undefined,
-      dangerouslySetInnerHTML: {
-        __html: css
-      }
-    })
-  })
+  return useMemo(() => registry, [registry])
 }