Add fela support for static rendering

README.md

@@ -17,7 +17,7 @@ npm install @compositor/x0
 - No confusing APIs
 - Renders static HTML
 - Renders JS bundles
-- Use any CSS-in-JS library
+- Works with CSS-in-JS libraries like [styled-components][sc] and [glamorous][glamorous]
 - Support for routing with [react-router][react-router]
 - Support for async data fetching
 
@@ -88,9 +88,20 @@ App.getInitialProps = async ({
 
 ## CSS-in-JS
 
-x0 supports server-side rendering for styled-components, glamor, and glamorous.
+x0 supports server-side rendering for [styled-components][sc], [glamor][glamor], [glamorous][glamorous], and [fela][fela].
 To enable CSS rendering for static output, use the `cssLibrary` option
 
+```sh
+x0 build src/App.js --cssLibrary="styled-components"
+```
+
+Available options:
+
+- [`styled-components`][sc]
+- [`glamorous`][glamorous]
+- [`glamor`][glamor]
+- [`fela`][fela]
+
 ## Head content
 
 Head elements such as `<title>`, `<meta>`, and `<style>` can be rendered at the beginning of a component.
@@ -120,6 +131,10 @@ Default props can be passed to x0 in a `package.json` field named `x0`.
 }
 ```
 
+<!--
+Custom .babelrc
+-->
+
 ## Routing
 
 To render multiple pages and use routing, add a `routes` array to the `package.json` configuration object.
@@ -186,3 +201,6 @@ const App = props => (
 [nextjs]: https://github.com/zeit/next.js
 [react-router]: https://github.com/ReactTraining/react-router
 [sc]: https://github.com/styled-components/styled-components
+[glamorous]: https://github.com/paypal/glamorous
+[glamor]: https://github.com/threepointone/glamor
+[fela]: https://github.com/rofrischmann/fela

docs/App.js

@@ -34,11 +34,7 @@ const App = connect(props => <React.Fragment>
       <Flex wrap align='center'>
         <BlockLink href='https://compositor.io'>
           <Flex ml={-1} align='center'>
-            <Logo
-              size={32}
-              color='white'
-              backgroundColor='black'
-            />
+            <Logo size={32} />
             <Caps f='10px' fontWeight='600'>
               Compositor
             </Caps>
@@ -114,9 +110,9 @@ App.defaultProps = {
     'Static site generator',
     'Hot reloading',
     'Works with virtually any React component',
-    'No convoluted APIs to learn',
-    'No boilerplate required',
-    'Routing with react-router',
+    'No confusing APIs',
+    'No boilerplate generators',
+    'Supports routing with react-router',
     'Works with CSS-in-JS libraries like styled-components',
     'Support for async data fetching',
   ]

docs/Btn.js

@@ -12,8 +12,8 @@ const Btn = nano('a')({
   paddingBottom: '12px',
   paddingLeft: '24px',
   paddingRight: '24px',
-  color: 'black',
-  backgroundColor: 'white',
+  color: 'white',
+  backgroundColor: 'black',
   border: 0,
   borderRadius: '8px'
 }, space)

docs/Style.js

@@ -14,8 +14,8 @@ const base = `
   font-family: -apple-system, BlinkMacSystemFont, sans-serif;
   line-height: 1.5;
   min-height: 100vh;
-  color: white;
-  background-color: black;
+  color: #000;
+  background-color: #f6f6f6;
   -webkit-font-smoothing: antialiased;
 }
 `

lib/static/getCSS.js

@@ -24,10 +24,26 @@ const getGlamor = (Component, props) => {
   return tag
 }
 
+const getFela = (Component, props) => {
+  if (!props.renderer) {
+    console.log('Warning: Fela static rendering requires a `renderer` to be passed through the `getInitialProps()` method.')
+    return ''
+  }
+  const fela = require('fela')
+  const felaDOM = require('fela-dom')
+  const renderer = props.renderer || fela.createRenderer()
+  renderToString(
+    React.createElement(Component, props)
+  )
+  const tag = felaDOM.renderToMarkup(renderer)
+  return tag
+}
+
 const libraries = {
   'styled-components': getSC,
   glamorous: getGlamor,
   glamor: getGlamor,
+  fela: getFela,
 }
 
 const noop = () => ''

package.json

@@ -8,7 +8,7 @@
   },
   "scripts": {
     "start": "./bin/cli.js dev docs/App.js -op 8888",
-    "build": "./bin/cli.js build docs/App.js --static -d docs",
+    "build": "./bin/cli.js build docs/App.js --static -d docs --cssLibrary='fela'",
     "client": "./bin/cli.js build docs/App.js -d docs",
     "test": "nyc ava",
     "cover": "nyc report --reporter=html --reporter=lcov"
@@ -27,6 +27,8 @@
     "babel-preset-stage-0": "^6.24.1",
     "babel-register": "^6.26.0",
     "chalk": "^2.1.0",
+    "fela": "^6.1.0",
+    "fela-dom": "^7.0.0",
     "glamor": "^2.20.40",
     "glamorous": "^4.11.0",
     "meow": "^3.7.0",
@@ -34,6 +36,7 @@
     "ora": "^1.3.0",
     "pkg-up": "^2.0.0",
     "react": "^16.2.0",
+    "react-fela": "^6.1.1",
     "read-pkg-up": "^2.0.0",
     "update-notifier": "^2.2.0",
     "webpack": "^3.10.0",