diff --git a/src/builder/webpack/config.node.js b/src/builder/webpack/config.node.js
index 9665394a3..f47e92d56 100644
--- a/src/builder/webpack/config.node.js
+++ b/src/builder/webpack/config.node.js
@@ -20,6 +20,10 @@ const defaultExternals = [
// to not bundle all deps in the static build (for perf)
// the problem is that if people rely on node_modules for stuff
// like css, this breaks their build.
+ //
+ // Glamor integration
+ "glamor",
+ "glamor/server",
]
const sourceMapSupport = require.resolve("source-map-support/register")
diff --git a/src/components/Html/__tests__/__snapshots__/index.js.snap b/src/components/Html/__tests__/__snapshots__/index.js.snap
index 9b811c66a..ef820b1d9 100644
--- a/src/components/Html/__tests__/__snapshots__/index.js.snap
+++ b/src/components/Html/__tests__/__snapshots__/index.js.snap
@@ -1,4 +1,4 @@
-exports[`test should render Html componnent 1`] = `
+exports[`test should render Html component 1`] = `
@@ -21,11 +21,71 @@ exports[`test should render Html componnent 1`] = `
rel="stylesheet" />
-
-
+ ",
+ }
+ }
+ id="phenomic" />
+
+
+
+
+`;
+
+exports[`test should render Html component when glamor available 1`] = `
+
+
+
+
+
+
+
+
+
+
+ ",
+ }
+ }
+ id="phenomic" />
+
+
+ src="test.js" />
`;
diff --git a/src/components/Html/__tests__/index.js b/src/components/Html/__tests__/index.js
index 8d50441b9..dde1db7f8 100644
--- a/src/components/Html/__tests__/index.js
+++ b/src/components/Html/__tests__/index.js
@@ -3,16 +3,42 @@ import { createRenderer } from "react-addons-test-utils"
import Html from "../index.js"
-test("should render Html componnent", () => {
+test("should render Html component", () => {
const renderer = createRenderer()
renderer.render(
/* eslint-disable react/jsx-no-bind */
}
- renderScript={ () => }
+ js={ [ "test.js" ] }
+ renderBody={ () => "" }
+ renderScript={ () => }
/>
)
expect(renderer.getRenderOutput()).toMatchSnapshot()
})
+
+test("should render Html component when glamor available", () => {
+ jest.mock(
+ "glamor/server",
+ () => ({
+ renderStatic: (render) => ({
+ html: render(),
+ css: ".stuff {}",
+ ids: [ { id: "s" } ],
+ }),
+ }),
+ { virtual: true }
+ )
+ const renderer = createRenderer()
+ renderer.render(
+ /* eslint-disable react/jsx-no-bind */
+ "" }
+ renderScript={ () => }
+ />
+ )
+ expect(renderer.getRenderOutput()).toMatchSnapshot()
+ jest.unmock("glamor/server", { virtual: true })
+})
diff --git a/src/components/Html/index.js b/src/components/Html/index.js
index db209f42b..d261218c4 100644
--- a/src/components/Html/index.js
+++ b/src/components/Html/index.js
@@ -24,12 +24,52 @@ const defaultMeta = [
]
const Html = (props: Props) => {
+
// Inject default html metas before
// Those need to be rendered somehow otherwise Helmet won't consider those
renderToString(
+ )
+
+ // Glamor integration
+ // https://github.com/threepointone/glamor/blob/master/docs/server.md
+ let glamorRenderStatic
+ try {
+ // $FlowFixMe just ignore glamor as we don't have it as a dep
+ glamorRenderStatic = require("glamor/server").renderStatic
+ }
+ catch (e) {
+ // skip glamor if not working
+ }
+
+ // render body
+ let body
+ if (glamorRenderStatic) {
+ const glamorResult = glamorRenderStatic(() => props.renderBody())
+
+ console.log({ glamorResult })
+ renderToString(
+
+ )
+ body = glamorResult.html
+ }
+
+ body = body || props.renderBody()
+
+ renderToString(
+ ({ rel: "stylesheet", href: file })),
] }
@@ -39,8 +79,6 @@ const Html = (props: Props) => {
/>
)
- // render body
- const body = props.renderBody()
// rewind html metas
const head = Helmet.rewind()
@@ -51,10 +89,11 @@ const Html = (props: Props) => {
{ head.base.toComponent() }
{ head.title.toComponent() }
{ head.meta.toComponent() }
+ { head.style.toComponent() }
{ head.link.toComponent() }
- { body }
+
{ props.renderScript() }
{ head.script.toComponent() }
diff --git a/src/static/__tests__/url-as-html.js b/src/static/__tests__/url-as-html.js
index fd825e80b..33baa0880 100644
--- a/src/static/__tests__/url-as-html.js
+++ b/src/static/__tests__/url-as-html.js
@@ -212,8 +212,8 @@ test("custom script tags", async (t) => {
}
}
-
+