gatsbyjs · KyleAMathews · Jul 11, 2017 · Jul 10, 2017 · Jul 11, 2017
diff --git a/examples/using-emotion/.eslintrc b/examples/using-emotion/.eslintrc
@@ -0,0 +1,8 @@
+{
+  "env": {
+    "browser": true
+  },
+  "globals": {
+    "graphql": false
+  }
+}
diff --git a/examples/using-emotion/.gitignore b/examples/using-emotion/.gitignore
@@ -0,0 +1,3 @@
+public
+.cache
+node_modules
diff --git a/examples/using-emotion/README.md b/examples/using-emotion/README.md
@@ -0,0 +1,5 @@
+# using-emotion
+
+https://using-emotion.gatsbyjs.org
+
+Example site that demonstrates how to build Gatsby sites with [emotion](https://github.com/tkh44/emotion).
diff --git a/examples/using-emotion/gatsby-config.js b/examples/using-emotion/gatsby-config.js
@@ -0,0 +1,15 @@
+module.exports = {
+  siteMetadata: {
+    title: `Gatsby with Emotion`,
+  },
+  plugins: [
+    `gatsby-plugin-emotion`,
+    {
+      resolve: `gatsby-plugin-google-analytics`,
+      options: {
+        trackingId: `UA-93349937-2`,
+      },
+    },
+    `gatsby-plugin-offline`,
+  ],
+}
diff --git a/examples/using-emotion/package.json b/examples/using-emotion/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "using-emotion",
+  "private": true,
+  "description": "Gatsby example site using using-emotion",
+  "author": "Tegan Churchill <churchill.tegan@gmail.com>",
+  "dependencies": {
+    "gatsby": "^1.0.11",
+    "gatsby-link": "^1.0.9",
+    "gatsby-plugin-emotion": "latest",
+    "gatsby-plugin-google-analytics": "^1.0.1",
+    "gatsby-plugin-offline": "^1.0.1"
+  },
+  "license": "MIT",
+  "main": "n/a",
+  "scripts": {
+    "develop": "gatsby develop",
+    "build": "gatsby build"
+  }
+}
diff --git a/examples/using-emotion/src/html.js b/examples/using-emotion/src/html.js
@@ -0,0 +1,27 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+const Html = ({ headComponents, body, postBodyComponents }) =>
+  <html lang="en">
+    <head>
+      <meta name="referrer" content="origin" />
+      <meta charSet="utf-8" />
+      <meta name="description" content="Gatsby example site using Emotion" />
+      <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <title>Gatsby Emotion</title>
+      {headComponents}
+    </head>
+    <body>
+      <div id="___gatsby" dangerouslySetInnerHTML={{ __html: body }} />
+      {postBodyComponents}
+    </body>
+  </html>
+
+Html.propTypes = {
+  headComponents: PropTypes.node.isRequired,
+  body: PropTypes.node.isRequired,
+  postBodyComponents: PropTypes.node.isRequired,
+}
+
+export default Html
diff --git a/examples/using-emotion/src/pages/index.js b/examples/using-emotion/src/pages/index.js
@@ -0,0 +1,60 @@
+import React from "react"
+import { fontFace, injectGlobal } from "emotion"
+import styled from "emotion/react"
+
+injectGlobal`
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+`
+
+fontFace`
+  font-family: system-ui;
+  font-style: normal;
+  font-weight: 400;
+  src: local(".SFNSText-Regular"), local(".HelveticaNeueDeskInterface-Regular"), local(".LucidaGrandeUI"), local("Segoe UI"), local("Ubuntu"), local("Roboto-Regular"), local("DroidSans"), local("Tahoma");
+`
+
+const Wrapper = styled.section`
+  align-items: center;
+  background: #282a36;
+  display: flex;
+  flex-direction: column;
+  font-family: system-ui;
+  height: 100vh;
+  justify-content: center;
+  width: 100vw;
+`
+
+const Title = styled.h1`
+  font-size: 1.5em;
+  color: #ff79c6;
+  margin-bottom: .5em;
+  & a {
+    color: #8be9fd;
+  }
+`
+
+const Subtitle = styled.p`
+  color: #bd93f9;
+  & a {
+    color: inherit;
+  }
+`
+
+const IndexPage = () =>
+  <Wrapper>
+    <Title>
+      Hello World, this is my first component styled with{` `}
+      <a href="https://emotion.sh/">emotion</a>!
+    </Title>
+    <Subtitle>
+      <a href="https://www.gatsbyjs.org/docs/packages/gatsby-plugin-emotion/">
+        gatsby-plugin-emotion docs
+      </a>
+    </Subtitle>
+  </Wrapper>
+
+export default IndexPage
diff --git a/packages/gatsby-plugin-emotion/.gitignore b/packages/gatsby-plugin-emotion/.gitignore
@@ -0,0 +1,3 @@
+/*.js
+!index.js
+yarn.lock
diff --git a/packages/gatsby-plugin-emotion/.npmignore b/packages/gatsby-plugin-emotion/.npmignore
@@ -0,0 +1,34 @@
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
+node_modules
+*.un~
+yarn.lock
+src
+flow-typed
+coverage
+decls
+examples
diff --git a/packages/gatsby-plugin-emotion/README.md b/packages/gatsby-plugin-emotion/README.md
@@ -0,0 +1,17 @@
+# gatsby-plugin-emotion
+Provide support for using the css-in-js library [Emotion](https://github.com/tkh44/emotion) including server side rendering.
+
+## Install
+
+```
+npm install --save gatsby-plugin-emotion
+```
+
+## How to use
+Add the plugin to your `gatsby-config.js`.
+
+```js
+plugins: [
+  'gatbsy-plugin-emotion'
+]
+```
diff --git a/packages/gatsby-plugin-emotion/index.js b/packages/gatsby-plugin-emotion/index.js
@@ -0,0 +1 @@
+// noop
diff --git a/packages/gatsby-plugin-emotion/package.json b/packages/gatsby-plugin-emotion/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "gatsby-plugin-emotion",
+  "version": "1.0.0",
+  "description": "Gatsby plugin to add support for Emotion",
+  "main": "index.js",
+  "scripts": {
+    "build": "babel src --out-dir . --ignore __tests__",
+    "watch": "babel -w src --out-dir . --ignore __tests__"
+  },
+  "keywords": [
+    "gatsby",
+    "emotion"
+  ],
+  "author": "Tegan Churchill <churchill.tegan@gmail.com>",
+  "license": "MIT",
+  "devDependencies": {
+    "babel-cli": "^6.24.1"
+  },
+  "dependencies": {
+    "emotion": "^5.2.0"
+  }
+}
diff --git a/packages/gatsby-plugin-emotion/src/gatsby-browser.js b/packages/gatsby-plugin-emotion/src/gatsby-browser.js
@@ -0,0 +1,11 @@
+/* globals window */
+import { hydrate } from "emotion"
+
+exports.onClientEntry = () => {
+  if (
+    typeof window !== `undefined` &&
+    typeof window.__EMOTION_CRITICAL_CSS_IDS__ !== `undefined`
+  ) {
+    hydrate(window.__EMOTION_CRITICAL_CSS_IDS__)
+  }
+}
diff --git a/packages/gatsby-plugin-emotion/src/gatsby-node.js b/packages/gatsby-plugin-emotion/src/gatsby-node.js
@@ -0,0 +1,5 @@
+exports.modifyBabelrc = ({ babelrc }) => {
+  return {
+    plugins: babelrc.plugins.concat([[`emotion/babel`, { inline: true }]]),
+  }
+}
diff --git a/packages/gatsby-plugin-emotion/src/gatsby-ssr.js b/packages/gatsby-plugin-emotion/src/gatsby-ssr.js
@@ -0,0 +1,23 @@
+import React from "react"
+import { renderToString } from "react-dom/server"
+import { extractCritical } from "emotion/server"
+
+exports.replaceRenderer = ({
+  bodyComponent,
+  replaceBodyHTMLString,
+  setHeadComponents,
+}) => {
+  const { html, ids, css } = extractCritical(renderToString(bodyComponent))
+
+  const criticalStyle = <style dangerouslySetInnerHTML={{ __html: css }} />
+  const criticalIds = (
+    <script
+      dangerouslySetInnerHTML={{
+        __html: `window.__EMOTION_CRITICAL_CSS_IDS__ = ${JSON.stringify(ids)};`,
+      }}
+    />
+  )
+
+  setHeadComponents([criticalIds, criticalStyle])
+  replaceBodyHTMLString(html)
+}