Theme-aware static rendering

packages/fela-bindings/src/index.js

@@ -7,6 +7,7 @@ import ThemeProviderFactory from './ThemeProviderFactory'
 import withThemeFactory from './withThemeFactory'
 import feFactory from './feFactory'
 import renderToNodeListFactory from './renderToNodeListFactory'
+import useFelaFactory from './useFelaFactory'
 
 export {
   connectFactory,
@@ -18,4 +19,5 @@ export {
   withThemeFactory,
   feFactory,
   renderToNodeListFactory,
+  useFelaFactory,
 }

packages/fela-bindings/src/useFelaFactory.js

@@ -0,0 +1,49 @@
+import { combineRules } from 'fela'
+
+function getPropsWithTheme(props, theme) {
+  if (props) {
+    return {
+      ...props,
+      theme,
+    }
+  }
+
+  return {
+    theme,
+  }
+}
+
+export default function useFelaFactory(
+  RendererContext,
+  ThemeContext,
+  useContext
+) {
+  return function useFela(props) {
+    const renderer = useContext(RendererContext)
+    const theme = useContext(ThemeContext) || {}
+
+    if (!renderer) {
+      throw new Error(
+        'The "useFela" hook can only be used inside a "RendererProvider"'
+      )
+    }
+
+    // we add the theme to props so that it can be used within styles
+    const propsWithTheme = getPropsWithTheme(props, theme)
+
+    function css(...rules) {
+      return renderer.renderRule(combineRules(...rules), propsWithTheme)
+    }
+
+    function staticStyle(style, selector) {
+      return renderer.renderStatic(style, selector, propsWithTheme)
+    }
+
+    return {
+      renderer,
+      theme,
+      css,
+      staticStyle,
+    }
+  }
+}

packages/fela-plugin-native-media-query/src/components/DimensionProvider.js

@@ -1,5 +1,4 @@
 /* eslint-disable */
-// $FlowFixMe
 import { Dimensions } from 'react-native'
 /* eslint-enable */
 

packages/fela/src/createRenderer.js

@@ -148,11 +148,11 @@ export default function createRenderer(config = {}) {
       return renderer.cache[fontReference].fontFamily
     },
 
-    renderStatic(staticStyle, selector) {
+    renderStatic(staticStyle, selector, props = {}) {
       const staticReference = generateStaticReference(staticStyle, selector)
 
       if (!renderer.cache.hasOwnProperty(staticReference)) {
-        const cssDeclarations = cssifyStaticStyle(staticStyle, renderer)
+        const cssDeclarations = cssifyStaticStyle(staticStyle, renderer, props)
 
         const change = {
           type: STATIC_TYPE,

packages/fela/src/cssifyStaticStyle.js

@@ -3,15 +3,16 @@ import { processStyleWithPlugins, STATIC_TYPE } from 'fela-utils'
 
 import minifyCSSString from './minifyCSSString'
 
-export default function cssifyStaticStyle(staticStyle, renderer) {
+export default function cssifyStaticStyle(staticStyle, renderer, props) {
   if (typeof staticStyle === 'string') {
     return minifyCSSString(staticStyle)
   }
 
   const processedStaticStyle = processStyleWithPlugins(
     renderer,
     staticStyle,
-    STATIC_TYPE
+    STATIC_TYPE,
+    props
   )
 
   return cssifyObject(processedStaticStyle)

packages/inferno-fela/src/context.js

@@ -1,7 +1,5 @@
 import createContext from 'create-inferno-context'
 
-// $FlowFixMe
 export const RendererContext = createContext()
 
-// $FlowFixMe
 export const ThemeContext = createContext()

packages/preact-fela/src/FelaComponent.js

@@ -1,4 +1,3 @@
-// $FlowFixMe
 import { h as createElement } from 'preact'
 import { FelaComponentFactory } from 'fela-bindings'
 

packages/preact-fela/src/FelaTheme.js

@@ -1,4 +1,3 @@
-// $FlowFixMe
 import { h as createElement } from 'preact'
 import { FelaThemeFactory } from 'fela-bindings'
 

packages/preact-fela/src/RendererProvider.js

@@ -1,4 +1,3 @@
-// $FlowFixMe
 import { Component, h as createElement } from 'preact'
 import { RendererProviderFactory } from 'fela-bindings'
 

packages/preact-fela/src/ThemeProvider.js

@@ -1,4 +1,3 @@
-// $FlowFixMe
 import { h as createElement } from 'preact'
 import { ThemeProviderFactory } from 'fela-bindings'
 

packages/preact-fela/src/connect.js

@@ -1,4 +1,3 @@
-// $FlowFixMe
 import { h as createElement, Component } from 'preact'
 import { connectFactory } from 'fela-bindings'
 

packages/preact-fela/src/context.js

@@ -1,8 +1,5 @@
-// $FlowFixMe
 import { createContext } from 'preact'
 
-// $FlowFixMe
 export const RendererContext = createContext()
 
-// $FlowFixMe
 export const ThemeContext = createContext()

packages/preact-fela/src/createComponent.js

@@ -1,4 +1,3 @@
-// $FlowFixMe
 import { h as createElement } from 'preact'
 import { createComponentFactory } from 'fela-bindings'
 

packages/preact-fela/src/createComponentWithProxy.js

@@ -1,4 +1,3 @@
-// $FlowFixMe
 import { h as createElement } from 'preact'
 import { createComponentFactory } from 'fela-bindings'
 

packages/preact-fela/src/fe.js

@@ -1,4 +1,3 @@
-// $FlowFixMe
 import { h } from 'preact'
 import { feFactory } from 'fela-bindings'
 

packages/preact-fela/src/renderToNodeList.js

@@ -1,4 +1,3 @@
-// $FlowFixMe
 import { h as createElement } from 'preact'
 import { renderToNodeListFactory } from 'fela-bindings'
 

packages/preact-fela/src/useFela.js

@@ -1,31 +1,6 @@
-// $FlowFixMe
 import { useContext } from 'preact/hooks'
-import { combineRules } from 'fela'
+import { useFelaFactory } from 'fela-bindings'
 
-import { RendererContext, ThemeContext } from './context'
+import { ThemeContext, RendererContext } from './context'
 
-export default function useFela(props = {}) {
-  const renderer = useContext(RendererContext)
-  const theme = useContext(ThemeContext) || {}
-
-  if (!renderer) {
-    throw new Error(
-      'The "useFela" hook can only be used  inside a "RendererProvider"'
-    )
-  }
-
-  const propsWithTheme = {
-    ...props,
-    theme,
-  }
-
-  function css(...rules) {
-    return renderer.renderRule(combineRules(...rules), propsWithTheme)
-  }
-
-  return {
-    renderer,
-    theme,
-    css,
-  }
-}
+export default useFelaFactory(RendererContext, ThemeContext, useContext)

packages/preact-fela/src/withTheme.js

@@ -1,4 +1,3 @@
-// $FlowFixMe
 import { h as createElement } from 'preact'
 import { withThemeFactory } from 'fela-bindings'
 

packages/react-fela/src/context.js

@@ -1,7 +1,5 @@
 import { createContext } from 'react'
 
-// $FlowFixMe
 export const RendererContext = createContext()
 
-// $FlowFixMe
 export const ThemeContext = createContext()

packages/react-fela/src/useFela.js

@@ -1,41 +1,6 @@
 import { useContext } from 'react'
-import { combineRules } from 'fela'
+import { useFelaFactory } from 'fela-bindings'
 
-import { RendererContext, ThemeContext } from './context'
+import { ThemeContext, RendererContext } from './context'
 
-function getPropsWithTheme(props, theme) {
-  if (props) {
-    return {
-      ...props,
-      theme,
-    }
-  }
-
-  return {
-    theme,
-  }
-}
-
-export default function useFela(props) {
-  const renderer = useContext(RendererContext)
-  const theme = useContext(ThemeContext) || {}
-
-  if (!renderer) {
-    throw new Error(
-      'The "useFela" hook can only be used  inside a "RendererProvider"'
-    )
-  }
-
-  // we add the theme to props so that it can be used within styles
-  const propsWithTheme = getPropsWithTheme(props, theme)
-
-  function css(...rules) {
-    return renderer.renderRule(combineRules(...rules), propsWithTheme)
-  }
-
-  return {
-    renderer,
-    theme,
-    css,
-  }
-}
+export default useFelaFactory(RendererContext, ThemeContext, useContext)

website/data/tocs/12.0.2.json

@@ -0,0 +1,84 @@
+{
+  "Intro": {
+    "Getting Started": "intro/getting-started",
+    "Motivation": "intro/motivation",
+    "Principles": "intro/principles",
+    "Benefits": "intro/benefits",
+    "Caveats": "intro/caveats",
+    "Ecosystem": "intro/ecosystem"
+  },
+  "Basics": {
+    "Rules": "basics/rules",
+    "Keyframes": "basics/keyframes",
+    "Fonts": "basics/fonts",
+    "Renderer": "basics/renderer"
+  },
+  "Advanced": {
+    "DOM Rendering": "advanced/dom-rendering",
+    "Server Rendering": "advanced/server-rendering",
+    "Plugins": "advanced/plugins",
+    "Renderer Configuration": "advanced/renderer-configuration",
+    "Global & Third-Party Styles": "advanced/static-style",
+    "Combined Rules": "advanced/combined-rules",
+    "Enhancers": "advanced/enhancers"
+  },
+  "Usage Guides": {
+    "Usage with React": "guides/usage-with-react",
+    "Usage with React Native": "guides/usage-with-react-native",
+    "Usage with Preact": "guides/usage-with-preact",
+    "Usage with Inferno": "guides/usage-with-inferno",
+    "Usage with ReasonML": "guides/usage-with-reasonml",
+    "Usage with Cycle": "guides/usage-with-cycle"
+  },
+  "Recipes": {
+    "Responsive Components": "recipes/responsive-components",
+    "Testing Components": "recipes/testing-components",
+    "Right-to-Left Rendering": "recipes/right-to-left-rendering",
+    "Dev utils as devDependencies": "recipes/dev-utils-as-dev-dependencies",
+    "Integrating with react-dates": "recipes/integrating-with-react-dates"
+  },
+  "API Reference": {
+    "fela": {
+      "createRenderer": "api/fela/createRenderer",
+      "Renderer": "api/fela/renderer",
+      "combineRules": "api/fela/combineRules",
+      "enhance": "api/fela/enhance"
+    },
+    "fela-dom": {
+      "render": "api/fela-dom/render",
+      "rehydrate": "api/fela-dom/rehydrate",
+      "renderToMarkup": "api/fela-dom/renderToMarkup",
+      "renderToSheetList": "api/fela-dom/renderToSheetList"
+    },
+    "fela-native": {
+      "createRenderer": "api/fela-native/createRenderer",
+      "Renderer": "api/fela-native/renderer"
+    },
+    "react-fela": {
+      "useFela": "api/react-fela/useFela",
+      "RendererProvider": "api/react-fela/RendererProvider",
+      "ThemeProvider": "api/react-fela/ThemeProvider",
+      "renderToNodeList": "api/react-fela/renderToNodeList",
+      "connect": "api/react-fela/connect",
+      "createComponent": "api/react-fela/createComponent",
+      "createComponentWithProxy": "api/react-fela/createComponentWithProxy",
+      "FelaComponent": "api/react-fela/FelaComponent",
+      "FelaRenderer": "api/react-fela/FelaRenderer",
+      "FelaTheme": "api/react-fela/FelaTheme",
+      "RendererContext": "api/react-fela/RendererContext",
+      "ThemeContext": "api/react-fela/ThemeContext",
+      "withTheme": "api/react-fela/withTheme",
+      "fe": "api/react-fela/fe"
+    },
+    "jest-react-fela": {
+      "createSnapshot": "api/jest-react-fela/createSnapshot"
+    }
+  },
+  "Extra": {
+    "Examples": "extra/examples",
+    "Migration": "extra/migration",
+    "Changelog": "extra/changelog",
+    "Support": "https://github.com/robinweser/fela/discussions",
+    "FAQ": "extra/faq"
+  }
+}

website/docs/11.7.0/api/fela-dom/rehydrate.mdx

@@ -8,9 +8,10 @@ It automatically connects the renderer with the DOM by calling [render](api/fela
 
 ## Arguments
 
-| Argument | Type                            | Description                               |
-| -------- | ------------------------------- | ----------------------------------------- |
-| renderer | [_Renderer_](api/fela/renderer) | The renderer which's cache is rehydrated. |
+| Argument       | Type                                                                     | Description                                       |
+| -------------- | ------------------------------------------------------------------------ | ------------------------------------------------- |
+| renderer       | [_Renderer_](api/fela/renderer)                                          | The renderer which's cache is rehydrated.         |
+| targetDocument | _[Document](https://developer.mozilla.org/en-US/docs/Web/API/Document)?_ | Document in which's head the styles are injected. |
 
 ## Example
 

website/docs/11.7.0/api/fela-dom/render.mdx

@@ -7,10 +7,10 @@ It also adds a change listener to automatically add newly rendered styles.
 
 ## Arguments
 
-| Argument       | Type                                                                    | Description                                                      |
-| -------------- | ----------------------------------------------------------------------- | ---------------------------------------------------------------- |
-| renderer       | [_Renderer_](api/fela/renderer)                                         | The renderer providing the styles which are rendered to the DOM. |
-| targetDocument | _[Document](https://developer.mozilla.org/en-US/docs/Web/API/Document)_ | Optional target document in which's head the styles are injected |
+| Argument       | Type                                                                     | Description                                                      |
+| -------------- | ------------------------------------------------------------------------ | ---------------------------------------------------------------- |
+| renderer       | [_Renderer_](api/fela/renderer)                                          | The renderer providing the styles which are rendered to the DOM. |
+| targetDocument | _[Document](https://developer.mozilla.org/en-US/docs/Web/API/Document)?_ | Document in which's head the styles are injected.                |
 
 ## Example
 

website/docs/11.7.0/api/react-fela/RendererProvider.mdx

@@ -4,10 +4,10 @@ RendererProvider is used to pass the Fela renderer down to all your child compon
 
 ## Props
 
-| Property       | Type                                                                    | Description                                                      |
-| -------------- | ----------------------------------------------------------------------- | ---------------------------------------------------------------- |
-| renderer       | _[Renderer](api/fela/renderer)_                                         | The Fela renderer which is used to actually render our styles.   |
-| targetDocument | _[Document](https://developer.mozilla.org/en-US/docs/Web/API/Document)_ | Optional target document in which's head the styles are injected |
+| Property       | Type                                                                     | Description                                                    |
+| -------------- | ------------------------------------------------------------------------ | -------------------------------------------------------------- |
+| renderer       | _[Renderer](api/fela/renderer)_                                          | The Fela renderer which is used to actually render our styles. |
+| targetDocument | _[Document](https://developer.mozilla.org/en-US/docs/Web/API/Document)?_ | Document in which's head the styles are injected.              |
 
 ## Imports