diff --git a/lib/build.js b/lib/build.js
index 68ea5fa..86d2a9f 100644
--- a/lib/build.js
+++ b/lib/build.js
@@ -5,9 +5,12 @@ const log = require('./log')
const build = async (opts = {}) => {
log('rendering static html')
- const { body, head } = await renderHTML(opts)
- opts.head = head
- opts.body = body
+ const { body, head, css } = await renderHTML(opts)
+ Object.assign(opts, {
+ body,
+ head,
+ css,
+ })
log('bundling js')
const config = createConfig(opts)
diff --git a/lib/config.js b/lib/config.js
index dac4f49..32029b0 100644
--- a/lib/config.js
+++ b/lib/config.js
@@ -13,6 +13,9 @@ const babel = {
'babel-preset-env',
'babel-preset-stage-0',
'babel-preset-react',
+ ].map(require.resolve),
+ plugins: [
+ 'babel-plugin-styled-components'
].map(require.resolve)
}
@@ -55,6 +58,7 @@ const rules = [
const template = ({
head = 'mdx-deck',
+ css = '',
body = '',
js,
publicPath
@@ -65,7 +69,7 @@ const template = ({
-${head}
+${head}${css}
${body}
diff --git a/lib/html.js b/lib/html.js
index 8ce0a67..12e1470 100644
--- a/lib/html.js
+++ b/lib/html.js
@@ -5,7 +5,9 @@ const {
renderToString,
renderToStaticMarkup
} = require('react-dom/server')
+const { ServerStyleSheet } = require('styled-components')
const webpack = require('webpack')
+const nodeExternals = require('webpack-node-externals')
const rimraf = require('rimraf')
const createConfig = require('./config')
@@ -26,6 +28,7 @@ const getApp = async opts => {
App: path.join(__dirname, '../dist/entry.js')
}
config.target = 'node'
+ config.externals = [ nodeExternals() ]
const compiler = webpack(config)
@@ -49,11 +52,15 @@ const getApp = async opts => {
const renderHTML = async opts => {
const App = await getApp(opts)
const headTags = []
+ const sheet = new ServerStyleSheet()
const body = renderToString(
- React.createElement(App, { headTags })
+ sheet.collectStyles(
+ React.createElement(App, { headTags })
+ )
)
const head = renderToStaticMarkup(headTags)
- return { body, head }
+ const css = sheet.getStyleTags()
+ return { body, head, css }
}
module.exports = renderHTML
diff --git a/package-lock.json b/package-lock.json
index b3dafc1..948d23d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,14 @@
"@babel/highlight": "7.0.0-rc.1"
}
},
+ "@babel/helper-annotate-as-pure": {
+ "version": "7.0.0-rc.3",
+ "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0-rc.3.tgz",
+ "integrity": "sha512-RhZtfIVaNmz9MfnvAdkxh8rgsYr1OCg1Oj3s7AC53W7Jm7sDeHGJihO3qnDcKbudHXyAdNWACTglRo+72pVhOQ==",
+ "requires": {
+ "@babel/types": "7.0.0-rc.3"
+ }
+ },
"@babel/highlight": {
"version": "7.0.0-rc.1",
"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.0.0-rc.1.tgz",
@@ -32,6 +40,23 @@
}
}
},
+ "@babel/types": {
+ "version": "7.0.0-rc.3",
+ "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.0.0-rc.3.tgz",
+ "integrity": "sha512-9sN1GWRztypQ2lViYR9HcClQILkObaX8vNFwrdgtMGB697xQePxSZqyhe8R2VR0afnJ1Jdg7y4X+IRE2CDRhDQ==",
+ "requires": {
+ "esutils": "^2.0.2",
+ "lodash": "^4.17.10",
+ "to-fast-properties": "^2.0.0"
+ },
+ "dependencies": {
+ "to-fast-properties": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+ "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
+ }
+ }
+ },
"@compositor/webfont": {
"version": "1.0.39",
"resolved": "https://registry.npmjs.org/@compositor/webfont/-/webfont-1.0.39.tgz",
@@ -1112,6 +1137,16 @@
"integrity": "sha1-5h+uBaHKiAGq3uV6bWa4zvr0QWc=",
"dev": true
},
+ "babel-plugin-styled-components": {
+ "version": "1.5.1",
+ "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.5.1.tgz",
+ "integrity": "sha1-MdvraW0TVNFYXmDWbHkF9eR0r80=",
+ "requires": {
+ "@babel/helper-annotate-as-pure": "^7.0.0-beta.37",
+ "babel-types": "^6.26.0",
+ "stylis": "^3.0.0"
+ }
+ },
"babel-plugin-syntax-async-functions": {
"version": "6.13.0",
"resolved": "https://registry.npmjs.org/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz",
@@ -9891,6 +9926,11 @@
"uuid": "^3.1.0"
}
},
+ "webpack-node-externals": {
+ "version": "1.7.2",
+ "resolved": "https://registry.npmjs.org/webpack-node-externals/-/webpack-node-externals-1.7.2.tgz",
+ "integrity": "sha512-ajerHZ+BJKeCLviLUUmnyd5B4RavLF76uv3cs6KNuO8W+HuQaEs0y0L7o40NQxdPy5w0pcv8Ew7yPUAQG0UdCg=="
+ },
"webpack-sources": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.1.0.tgz",
diff --git a/package.json b/package.json
index d50c279..f0356da 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
"ansi-html": "0.0.7",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
+ "babel-plugin-styled-components": "^1.5.1",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
@@ -63,7 +64,8 @@
"styled-system": "^3.0.2",
"superbox": "^2.1.0",
"webpack": "^4.16.5",
- "webpack-hot-client": "^4.1.1"
+ "webpack-hot-client": "^4.1.1",
+ "webpack-node-externals": "^1.7.2"
},
"peerDependencies": {},
"devDependencies": {