diff --git a/examples/using-emotion/.eslintrc b/examples/using-emotion/.eslintrc new file mode 100644 index 0000000000000..aadde9c0aa03d --- /dev/null +++ b/examples/using-emotion/.eslintrc @@ -0,0 +1,8 @@ +{ + "env": { + "browser": true + }, + "globals": { + "graphql": false + } +} \ No newline at end of file diff --git a/examples/using-emotion/.gitignore b/examples/using-emotion/.gitignore new file mode 100644 index 0000000000000..8f5b35a4a9cbc --- /dev/null +++ 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 new file mode 100644 index 0000000000000..4edf686d537f7 --- /dev/null +++ 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 new file mode 100644 index 0000000000000..7e206269c6b08 --- /dev/null +++ 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 new file mode 100644 index 0000000000000..03d2028592ce2 --- /dev/null +++ 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 ", + "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 new file mode 100644 index 0000000000000..6ae35f56813d5 --- /dev/null +++ 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 }) => + + + + + + + + Gatsby Emotion + {headComponents} + + +
+ {postBodyComponents} + + + +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 new file mode 100644 index 0000000000000..7c464414b34f6 --- /dev/null +++ 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 = () => + + + Hello World, this is my first component styled with{` `} + <a href="https://emotion.sh/">emotion</a>! + + + + gatsby-plugin-emotion docs + + + + +export default IndexPage diff --git a/packages/gatsby-plugin-emotion/.gitignore b/packages/gatsby-plugin-emotion/.gitignore new file mode 100644 index 0000000000000..8c9686624a187 --- /dev/null +++ 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 new file mode 100644 index 0000000000000..e771d2c9fa299 --- /dev/null +++ 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 new file mode 100644 index 0000000000000..fb154418bbff0 --- /dev/null +++ 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 new file mode 100644 index 0000000000000..172f1ae6a468c --- /dev/null +++ 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 new file mode 100644 index 0000000000000..5ad332d511149 --- /dev/null +++ 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 ", + "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 new file mode 100644 index 0000000000000..a8b9e890525bd --- /dev/null +++ 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 new file mode 100644 index 0000000000000..464ba058919a6 --- /dev/null +++ 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 new file mode 100644 index 0000000000000..0c50588cf74f4 --- /dev/null +++ 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 =