Add head option

docs/App.js

@@ -1,6 +1,5 @@
 import React from 'react'
 import connect from 'refunk'
-import cxs from 'cxs/x'
 import { Logo } from '@compositor/logo'
 import pkg from '../package.json'
 import Style from './Style'
@@ -27,7 +26,7 @@ const App = connect(props => <React.Fragment>
   <meta name='twitter:title' content='Compositor x0' />
   <meta name='twitter:title' content={props.description} />
   <meta name='twitter:image' content='https://compositor.io/logo/dist/compositor-black.png' />
-  <Style css={props.css} />
+  <Style />
   <Container>
     <nav>
       <Flex wrap align='center'>
@@ -139,12 +138,13 @@ App.defaultProps = {
 }
 
 App.getInitialProps = async ({ Component, html, pathname }) => {
-  const css = cxs.css()
-  cxs.reset()
+  // const css = cxs.css()
+  // cxs.reset()
+  // const head = `<meta name='test'><style>${css}</style>`
 
   return {
     hello: 'hi',
-    css
+    // head
   }
 }
 

docs/BlockLink.js

@@ -1,7 +1,7 @@
-import styled from 'cxs/x'
+import nano from 'nano-style'
 import { space, propTypes } from 'styled-system'
 
-const BlockLink = styled('a')({
+const BlockLink = nano('a')({
   display: 'block',
   color: 'inherit',
   textDecoration: 'none'

docs/Box.js

@@ -1,4 +1,4 @@
-import styled from 'cxs/x'
+import nano from 'nano-style'
 import {
   space,
   width,
@@ -7,7 +7,7 @@ import {
   propTypes
 } from 'styled-system'
 
-const Box = styled('div')(space, width, fontSize, color)
+const Box = nano('div')(space, width, fontSize, color)
 
 Box.propTypes = {
   ...propTypes.space,

docs/Btn.js

@@ -1,7 +1,7 @@
-import styled from 'cxs/x'
+import nano from 'nano-style'
 import { space, propTypes } from 'styled-system'
 
-const Btn = styled('a')({
+const Btn = nano('a')({
   display: 'inline-block',
   textDecoration: 'none',
   fontSize: '12px',

docs/BtnOutline.js

@@ -1,7 +1,7 @@
-import styled from 'cxs/x'
+import nano from 'nano-style'
 import Btn from './Btn'
 
-const BtnOutline = styled(Btn)({
+const BtnOutline = nano(Btn)({
   boxShadow: 'inset 0 0 0 2px',
   color: 'inherit !important',
   backgroundColor: 'transparent !important',

docs/Caps.js

@@ -1,7 +1,7 @@
-import styled from 'cxs/x'
+import nano from 'nano-style'
 import Text from './Text'
 
-const Caps = styled(Text)({
+const Caps = nano(Text)({
   textTransform: 'uppercase',
   letterSpacing: '.2em'
 })

docs/Container.js

@@ -1,7 +1,7 @@
-import styled from 'cxs/x'
+import nano from 'nano-style'
 import Box from './Box'
 
-const Container = styled(Box)({
+const Container = nano(Box)({
   maxWidth: '768px'
 })
 

docs/Flex.js

@@ -1,4 +1,4 @@
-import styled from 'cxs/x'
+import nano from 'nano-style'
 import {
   alignItems,
   justifyContent,
@@ -7,7 +7,7 @@ import {
 } from 'styled-system'
 import Box from './Box'
 
-const Flex = styled(Box)({
+const Flex = nano(Box)({
   display: 'flex'
 }, alignItems, justifyContent, flexWrap)
 

docs/Mono.js

@@ -1,7 +1,7 @@
-import styled from 'cxs/x'
+import nano from 'nano-style'
 import Text from './Text'
 
-const Mono = styled(Text)({
+const Mono = nano(Text)({
   fontFamily: '"Roboto Mono", Menlo, monospace',
 })
 

docs/NavLink.js

@@ -1,7 +1,7 @@
-import styled from 'cxs/x'
+import nano from 'nano-style'
 import { fontSize, space, propTypes } from 'styled-system'
 
-const NavLink = styled('a')({
+const NavLink = nano('a')({
   textDecoration: 'none',
   display: 'inline-block',
   fontWeight: 'bold',

docs/Pre.js

@@ -1,7 +1,7 @@
-import styled from 'cxs/x'
+import nano from 'nano-style'
 import { fontSize, color, propTypes } from 'styled-system'
 
-const Pre = styled('pre')({
+const Pre = nano('pre')({
   fontFamily: '"Roboto Mono", Menlo, monospace',
   margin: 0,
   padding: 0,

docs/Text.js

@@ -1,4 +1,4 @@
-import styled from 'cxs/x'
+import nano from 'nano-style'
 import {
   fontSize,
   fontWeight,
@@ -8,7 +8,7 @@ import {
   propTypes
 } from 'styled-system'
 
-const Text = styled('div')({},
+const Text = nano('div')({},
   fontSize,
   fontWeight,
   textAlign,

docs/Title.js

@@ -1,7 +1,7 @@
-import styled from 'cxs/x'
+import nano from 'nano-style'
 import { space } from 'styled-system'
 
-const MonoTitle = styled('h1')({
+const MonoTitle = nano('h1')({
   fontFamily: '"Roboto Mono", Menlo, monospace',
   fontSize: '32px',
   fontWeight: 600,
@@ -18,7 +18,7 @@ MonoTitle.defaultProps = {
   px: 2,
 }
 
-const Title = styled('h1')({
+const Title = nano('h1')({
   fontSize: '64px',
   fontWeight: 600,
   lineHeight: 1.25,

docs/Video.js

@@ -1,6 +1,6 @@
-import styled from 'cxs/x'
+import nano from 'nano-style'
 
-const Video = styled('video')({
+const Video = nano('video')({
   display: 'block',
   width: '100%',
   height: 'auto',

lib/static/index.js

@@ -21,11 +21,14 @@ const createHTML = ({
   scripts = []
 }) => (`<!DOCTYPE html>
 <meta charset='utf-8'>
+${getHead(initialProps)}
 ${body}
 ${initialProps ? `<script id='__initial-props__' type='application/json'>${JSON.stringify(initialProps)}</script>` : ''}
 ${scripts.map(src => `<script src='${src}'></script>`)}
 `)
 
+const getHead = props => typeof props.head === 'string' ? props.head : ''
+
 const render = (Component, props, isStatic) =>
   (isStatic ? renderToStaticMarkup : renderToString)(
     React.createElement(Component, props)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compositor/x0",
-  "version": "3.0.0-2",
+  "version": "3.0.0-3",
   "description": "Zero-config React development environment and static site generator",
   "main": "index.js",
   "bin": {
@@ -44,6 +44,7 @@
     "ava": "^0.24.0",
     "cxs": "^6.1.0",
     "isomorphic-fetch": "^2.2.1",
+    "nano-style": "^1.0.0-20",
     "nyc": "^11.2.1",
     "refunk": "^2.0.0-1",
     "styled-system": "^1.0.7"