From 44b0cb556297a90446e8d8a2ca19f815edf39fa9 Mon Sep 17 00:00:00 2001 From: Brent Jackson Date: Sat, 25 Aug 2018 10:39:35 -0400 Subject: [PATCH] Add CSS SSR support --- lib/build.js | 9 ++++++--- lib/config.js | 6 +++++- lib/html.js | 11 +++++++++-- package-lock.json | 40 ++++++++++++++++++++++++++++++++++++++++ package.json | 4 +++- 5 files changed, 63 insertions(+), 7 deletions(-) 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": {