diff --git a/README.md b/README.md
index c8d6e4b..a1be3d1 100644
--- a/README.md
+++ b/README.md
@@ -87,68 +87,8 @@ App.getInitialProps = async ({
## CSS-in-JS
-Use the `getInitialProps` static method to precompile CSS from css-in-js libraries such as [styled-components][sc]
-
-```jsx
-// styled-components
-import React from 'react'
-import styled from 'styled-components'
-
-const Heading = styled.h1`
- color: tomato;
-`
-
-const App = props => [
- props.styles && (
-
` elements a
```jsx
const App = props => (
-
+
Hello x0
Hello x0
-
+
)
```
-Returning an array of elements also works.
-
-```jsx
-const App = props => [
- Hello,
-
-
Hello
-
-]
-```
-
## Configuration
@@ -207,6 +136,7 @@ To render multiple pages and use routing, add a `routes` array to the `package.j
x0 static src/App.js --out-dir site
```
+
+
+[Made by Compositor](https://compositor.io/)
+|
+[MIT License](LICENSE.md)
[nextjs]: https://github.com/zeit/next.js
[react-router]: https://github.com/ReactTraining/react-router
diff --git a/docs/App.js b/docs/App.js
index c1bf46f..f2342ec 100644
--- a/docs/App.js
+++ b/docs/App.js
@@ -18,10 +18,6 @@ import Btn from './Btn'
import BtnOutline from './BtnOutline'
import Tweet from './Tweet'
-// testing
-import styled from 'styled-components'
-const Hello = styled.h2`color:tomato;`
-
const App = connect(props =>
{props.title}
@@ -29,7 +25,7 @@ const App = connect(props =>
-
+
@@ -57,23 +53,11 @@ const App = connect(props =>
-
- Hello styled-components
-
- x0 {props.count}
-
@@ -112,9 +96,6 @@ const App = connect(props =>
Documentation
-
- Sign Up
-
-)
-
-export default Root
diff --git a/examples/custom-html/package.json b/examples/custom-html/package.json
deleted file mode 100644
index fd99aa7..0000000
--- a/examples/custom-html/package.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
- "name": "x0-html-example",
- "private": true,
- "scripts": {
- "start": "x0 dev App.js -o",
- "build": "x0 build App.js --html Root.js --out-dir ./site",
- "test": "x0 build App.js --html Root.js"
- },
- "dependencies": {
- "refunk": "^1.0.0-2",
- "@compositor/x0": "^1.0.9"
- },
- "x0": {
- "title": "x0 HTML Example",
- "description": "Just a simple example",
- "count": 16
- }
-}
diff --git a/lib/dev/config.js b/lib/dev/config.js
index 64e92c0..b8474fc 100644
--- a/lib/dev/config.js
+++ b/lib/dev/config.js
@@ -3,8 +3,7 @@ const webpack = require('webpack')
// dev webpack config
module.exports = {
- mode: 'development',
- // devtool: 'eval',
+ // mode: 'development',
devtool: 'source-map',
entry: [
path.join(__dirname, './entry'),
diff --git a/lib/static/client.js b/lib/static/client.js
index a80f424..e3ff144 100644
--- a/lib/static/client.js
+++ b/lib/static/client.js
@@ -3,7 +3,7 @@ const webpack = require('webpack')
const MinifyPlugin = require('babel-minify-webpack-plugin')
const config = {
- mode: 'production',
+ // mode: 'production',
entry: [
path.join(__dirname, './entry')
],
diff --git a/lib/static/getCSS.js b/lib/static/getCSS.js
index 185859e..5a1cfa7 100644
--- a/lib/static/getCSS.js
+++ b/lib/static/getCSS.js
@@ -1,9 +1,8 @@
const React = require('react')
const { renderToString } = require('react-dom/server')
-const SC = require('styled-components')
-const glamor = require('glamor/server')
const getSC = (Component, props) => {
+ const SC = require('styled-components')
const sheet = new SC.ServerStyleSheet()
renderToString(
sheet.collectStyles(
@@ -15,6 +14,7 @@ const getSC = (Component, props) => {
}
const getGlamor = (Component, props) => {
+ const glamor = require('glamor/server')
const { css } = glamor.renderStatic(() => (
renderToString(
React.createElement(Component, props)
@@ -24,18 +24,10 @@ const getGlamor = (Component, props) => {
return tag
}
-const getEmotion = (Component, props) => {
-}
-
-const getFela = (Component, props) => {
-}
-
const libraries = {
'styled-components': getSC,
glamorous: getGlamor,
glamor: getGlamor,
- // emotion: getEmotion,
- // fela: getFela,
}
const noop = () => ''
diff --git a/lib/static/index.js b/lib/static/index.js
index 55245e8..d96267b 100644
--- a/lib/static/index.js
+++ b/lib/static/index.js
@@ -14,7 +14,6 @@ const path = require('path')
const React = require('react')
const { renderToString, renderToStaticMarkup } = require('react-dom/server')
const client = require('./client')
-
const getCSS = require('./getCSS')
const createHTML = ({
diff --git a/package.json b/package.json
index db9ccfa..6ec5ac7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@compositor/x0",
- "version": "3.0.0-6",
+ "version": "3.0.0-7",
"description": "Zero-config React development environment and static site generator",
"main": "index.js",
"bin": {
@@ -9,7 +9,7 @@
"scripts": {
"start": "./bin/cli.js dev docs/App.js -op 8888",
"build": "./bin/cli.js build docs/App.js --static -d docs",
- "client": "./bin/cli.js build docs/App.js -d docs --cssLibrary='styled-components'",
+ "client": "./bin/cli.js build docs/App.js -d docs",
"test": "nyc ava",
"cover": "nyc report --reporter=html --reporter=lcov"
},
@@ -27,8 +27,6 @@
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.26.0",
"chalk": "^2.1.0",
- "emotion": "^8.0.12",
- "fela": "^6.1.0",
"glamor": "^2.20.40",
"glamorous": "^4.11.0",
"meow": "^3.7.0",
@@ -37,18 +35,15 @@
"pkg-up": "^2.0.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
- "react-emotion": "^8.0.12",
- "react-fela": "^6.1.1",
"react-router-dom": "^4.2.2",
"read-pkg-up": "^2.0.0",
"update-notifier": "^2.2.0",
- "webpack": "^4.0.0-alpha.0",
+ "webpack": "^3.10.0",
"webpack-dev-server": "^2.9.1"
},
"devDependencies": {
"@compositor/logo": "^1.2.2",
"ava": "^0.24.0",
- "cxs": "^6.1.0",
"isomorphic-fetch": "^2.2.1",
"nano-style": "^1.0.0-20",
"nyc": "^11.2.1",
diff --git a/test/snapshots/static.js.md b/test/snapshots/static.js.md
index e6945de..8ff5ad4 100644
--- a/test/snapshots/static.js.md
+++ b/test/snapshots/static.js.md
@@ -18,6 +18,7 @@ Generated by [AVA](https://ava.li).
`␊
␊
+ ␊
Hello
␊
␊
␊
@@ -29,6 +30,7 @@ Generated by [AVA](https://ava.li).
`␊
␊
+ ␊
Hello
␊
␊
␊
@@ -40,6 +42,7 @@ Generated by [AVA](https://ava.li).
`␊
␊
+ ␊
Hello
␊
␊
␊
diff --git a/test/snapshots/static.js.snap b/test/snapshots/static.js.snap
index 87e68e6..a52a7e9 100644
Binary files a/test/snapshots/static.js.snap and b/test/snapshots/static.js.snap differ
- ),
-
- Hello
-
-]
-
-App.getInitialProps = async ({
- Component,
- props
-}) => {
- const { ServerStyleSheet } = require('styled-components')
- const sheet = new ServerStyleSheet()
- sheet.collectStyles()
- const styles = sheet.getStyleTags()
- return { styles }
-}
-```
-
-```jsx
-// CXS
-import React from 'react'
-import cxs from 'cxs/component'
-
-const Heading = cxs('h1')({
- color: 'tomato'
-})
-
-const App = props => (
-
-
- Hello
-
-)
-
-App.getInitialProps = async () => {
- const css = cxs.css()
- return { css }
-}
-```
-
+x0 supports server-side rendering for styled-components, glamor, and glamorous.
+To enable CSS rendering for static output, use the `cssLibrary` option
## Head content
@@ -157,27 +97,16 @@ Browsers should handle this correctly since the `
` and `