Styled components

site/gatsby-config.js

@@ -9,7 +9,7 @@ module.exports = {
         pathToConfigModule: 'src/utils/typography.js'
       }
     },
-    'gatsby-plugin-jss',
+    'gatsby-plugin-emotion',
     {
       resolve: 'gatsby-source-filesystem',
       options: {

site/package-lock.json

@@ -4,6 +4,68 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@babel/helper-module-imports": {
+      "version": "7.0.0-beta.32",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.0.0-beta.32.tgz",
+      "integrity": "sha512-9jxfqCBrwCIa0p5ZIy1sakzKKm8x8tn0C52qpPr0M0WJ/k9gpD4ilS/mTV2v0tgmw4agjYdUXQ8slq51/5oOzQ==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "7.0.0-beta.32",
+        "lodash": "^4.2.0"
+      }
+    },
+    "@babel/types": {
+      "version": "7.0.0-beta.32",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.0.0-beta.32.tgz",
+      "integrity": "sha512-w8+wzVcYCMb9OfaBfay2Vg5hyj7UfBX6qQtA+kB0qsW1h1NH/7xHMwvTZNqkuFBwjz5wxGS2QmaIcC3HH+UoxA==",
+      "dev": true,
+      "requires": {
+        "esutils": "^2.0.2",
+        "lodash": "^4.2.0",
+        "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=",
+          "dev": true
+        }
+      }
+    },
+    "@emotion/hash": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.6.3.tgz",
+      "integrity": "sha1-DnpWBGJvxsbUrEBhovWsgNUCYqQ=",
+      "dev": true
+    },
+    "@emotion/is-prop-valid": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.6.2.tgz",
+      "integrity": "sha1-p2oWsXT/A/jjon+vYlm6zSGgKtw=",
+      "dev": true,
+      "requires": {
+        "@emotion/memoize": "^0.6.2"
+      }
+    },
+    "@emotion/memoize": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.6.2.tgz",
+      "integrity": "sha1-E44AszLVGbTjB73tYVnlukiro64=",
+      "dev": true
+    },
+    "@emotion/stylis": {
+      "version": "0.6.7",
+      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.6.7.tgz",
+      "integrity": "sha1-cwpqohmCVxJJQAFNf/+sfPPmYUw=",
+      "dev": true
+    },
+    "@emotion/unitless": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.6.3.tgz",
+      "integrity": "sha1-ZWguaKgnAccO77ONf5QaLAv6kN4=",
+      "dev": true
+    },
     "@types/configstore": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/@types/configstore/-/configstore-2.1.1.tgz",
@@ -105,6 +167,12 @@
       "integrity": "sha1-DTyzECL4Qn6ljACK8yuA2hJspOM=",
       "dev": true
     },
+    "abbrev": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
+      "dev": true
+    },
     "accepts": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.5.tgz",
@@ -803,6 +871,34 @@
         "babel-runtime": "^6.22.0"
       }
     },
+    "babel-plugin-emotion": {
+      "version": "9.1.2",
+      "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-9.1.2.tgz",
+      "integrity": "sha512-zc2JeGuXfk0O4Au4JtssH4H7241+BREmFctZoHJ3Z1JekckhkynlpTXc+9ZhysUAjxyjiaXMUgUIIALCzbkFNQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-imports": "7.0.0-beta.32",
+        "@emotion/hash": "^0.6.2",
+        "@emotion/memoize": "^0.6.1",
+        "@emotion/stylis": "^0.6.5",
+        "babel-plugin-macros": "^2.0.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "convert-source-map": "^1.5.0",
+        "find-root": "^1.1.0",
+        "mkdirp": "^0.5.1",
+        "source-map": "^0.5.7",
+        "touch": "^1.0.0"
+      }
+    },
+    "babel-plugin-macros": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.2.1.tgz",
+      "integrity": "sha512-DSLZpd6/LQFOJUr2pQK6pncxvAL87E6ReWgfaEfgOL1y/YTTIeqVfsrbdDgerdjtVzCIKajD32fxlvhEgvxMEw==",
+      "dev": true,
+      "requires": {
+        "cosmiconfig": "^4.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",
@@ -1994,12 +2090,6 @@
         "repeat-element": "^1.1.2"
       }
     },
-    "brcast": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/brcast/-/brcast-3.0.1.tgz",
-      "integrity": "sha512-eI3yqf9YEqyGl9PCNTR46MGvDylGtaHjalcz6Q3fAPnP/PhpKkkve52vFdfGpwp4VUvK6LUr4TQN+2stCrEwTg==",
-      "dev": true
-    },
     "brorand": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz",
@@ -2128,6 +2218,12 @@
       "integrity": "sha512-YgBMBzdRLEfgxJIGu2wrvI2E03tMCFU1p7d1KhB4BOoMN0VxmTFjSyN5JtKt9z8Z9JajMHruI6SE25W96wNv7Q==",
       "dev": true
     },
+    "buffer-from": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-0.1.2.tgz",
+      "integrity": "sha512-RiWIenusJsmI2KcvqQABB83tLxCByE3upSP8QU3rJDMVFGPWLvPQJt/O1Su9moRWeH7d+Q2HYb68f6+v+tw2vg==",
+      "dev": true
+    },
     "buffer-peek-stream": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/buffer-peek-stream/-/buffer-peek-stream-1.0.1.tgz",
@@ -2835,6 +2931,46 @@
       "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
       "dev": true
     },
+    "cosmiconfig": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-4.0.0.tgz",
+      "integrity": "sha512-6e5vDdrXZD+t5v0L8CrurPeybg4Fmf+FCSYxXKYVAqLUtyCSbuyqE059d0kDthTNRzKVjL7QMgNpEUlsoYH3iQ==",
+      "dev": true,
+      "requires": {
+        "is-directory": "^0.3.1",
+        "js-yaml": "^3.9.0",
+        "parse-json": "^4.0.0",
+        "require-from-string": "^2.0.1"
+      },
+      "dependencies": {
+        "esprima": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.0.tgz",
+          "integrity": "sha512-oftTcaMu/EGrEIu904mWteKIv8vMuOgGYo7EhVJJN00R/EED9DCua/xxHRdYnKtcECzVg7xOWhflvJMnqcFZjw==",
+          "dev": true
+        },
+        "js-yaml": {
+          "version": "3.11.0",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.11.0.tgz",
+          "integrity": "sha512-saJstZWv7oNeOyBh3+Dx1qWzhW0+e6/8eDzo7p5rDFqxntSztloLtuKu+Ejhtq82jsilwOIZYsCz+lIjthg1Hw==",
+          "dev": true,
+          "requires": {
+            "argparse": "^1.0.7",
+            "esprima": "^4.0.0"
+          }
+        },
+        "parse-json": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
+          "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
+          "dev": true,
+          "requires": {
+            "error-ex": "^1.3.1",
+            "json-parse-better-errors": "^1.0.1"
+          }
+        }
+      }
+    },
     "create-ecdh": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.1.tgz",
@@ -2845,6 +2981,40 @@
         "elliptic": "^6.0.0"
       }
     },
+    "create-emotion": {
+      "version": "9.1.3",
+      "resolved": "https://registry.npmjs.org/create-emotion/-/create-emotion-9.1.3.tgz",
+      "integrity": "sha512-nCNDwBfDy0cgZRcKROFyHt9TmKyBVTkmjSxwYHuibAKW05UUM9btApKbwGi07wShP7s2IcUhVn8nNUz/nAFCOg==",
+      "dev": true,
+      "requires": {
+        "@emotion/hash": "^0.6.2",
+        "@emotion/memoize": "^0.6.1",
+        "@emotion/stylis": "^0.6.5",
+        "@emotion/unitless": "^0.6.2",
+        "stylis": "^3.5.0",
+        "stylis-rule-sheet": "^0.0.10"
+      }
+    },
+    "create-emotion-server": {
+      "version": "9.1.3",
+      "resolved": "https://registry.npmjs.org/create-emotion-server/-/create-emotion-server-9.1.3.tgz",
+      "integrity": "sha512-TdQHa9/agiTH6tApjeTCFYl+nYL/vyf9cAn6evLdUhfdB9tUUYDkLn1Zw6kORHI1Sfu1EpSE1uYiTK1zQ31hFg==",
+      "dev": true,
+      "requires": {
+        "html-tokenize": "^2.0.0",
+        "multipipe": "^1.0.2",
+        "through": "^2.3.8"
+      }
+    },
+    "create-emotion-styled": {
+      "version": "9.1.2",
+      "resolved": "https://registry.npmjs.org/create-emotion-styled/-/create-emotion-styled-9.1.2.tgz",
+      "integrity": "sha512-d0QGQIxxwjiEEmn8+kQe4G/I9znD8LHPDa+cbN3JLv2SrGNnVOCz6D+2lBCljKO5Tv4inXLxMBP5dVGGsTxDiQ==",
+      "dev": true,
+      "requires": {
+        "@emotion/is-prop-valid": "^0.6.1"
+      }
+    },
     "create-error-class": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/create-error-class/-/create-error-class-3.0.2.tgz",
@@ -3074,15 +3244,6 @@
         }
       }
     },
-    "css-vendor": {
-      "version": "0.3.8",
-      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-0.3.8.tgz",
-      "integrity": "sha1-ZCHP0wNM5mT+dnOXL9ARn8KJQfo=",
-      "dev": true,
-      "requires": {
-        "is-in-browser": "^1.0.2"
-      }
-    },
     "css-what": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.0.tgz",
@@ -3560,6 +3721,15 @@
       "integrity": "sha1-rOb/gIwc5mtX0ev5eXessCM0z8E=",
       "dev": true
     },
+    "duplexer2": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz",
+      "integrity": "sha1-ixLauHjA1p4+eJEFFmKjL8a93ME=",
+      "dev": true,
+      "requires": {
+        "readable-stream": "^2.0.2"
+      }
+    },
     "duplexer3": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz",
@@ -3615,6 +3785,25 @@
       "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=",
       "dev": true
     },
+    "emotion": {
+      "version": "9.1.3",
+      "resolved": "https://registry.npmjs.org/emotion/-/emotion-9.1.3.tgz",
+      "integrity": "sha512-hoLEhtbGHK6scwQ4Bdulq6df/NOB3c5nGowkqweItWWUhJOsyrKFS7/AjOuvAzBsWlI75mWSglC3PKrkN+zUwg==",
+      "dev": true,
+      "requires": {
+        "babel-plugin-emotion": "^9.1.2",
+        "create-emotion": "^9.1.3"
+      }
+    },
+    "emotion-server": {
+      "version": "9.1.3",
+      "resolved": "https://registry.npmjs.org/emotion-server/-/emotion-server-9.1.3.tgz",
+      "integrity": "sha512-Pa3Sen1jcUDPjNwNJltJ1mB07m7qGkI3c6ZCldoCM7uehLw2sQ2mPRBbAyCW9IAfwBRr7jk6+iClbdIaGhZFRw==",
+      "dev": true,
+      "requires": {
+        "create-emotion-server": "^9.1.3"
+      }
+    },
     "encodeurl": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
@@ -4639,6 +4828,12 @@
         }
       }
     },
+    "find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
+      "dev": true
+    },
     "find-up": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
@@ -6260,14 +6455,13 @@
         "loader-utils": "^0.2.16"
       }
     },
-    "gatsby-plugin-jss": {
+    "gatsby-plugin-emotion": {
-      "version": "1.5.13",
+      "version": "1.1.16",
-      "resolved": "https://registry.npmjs.org/gatsby-plugin-jss/-/gatsby-plugin-jss-1.5.13.tgz",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-emotion/-/gatsby-plugin-emotion-1.1.16.tgz",
-      "integrity": "sha1-lWsXFOgMnehUoSdC6B9zt3JGTAc=",
+      "integrity": "sha1-fvoa4N+9d3G+mT0r+o3TW2p7iYE=",
       "dev": true,
       "requires": {
-        "babel-runtime": "^6.26.0",
+        "babel-runtime": "^6.26.0"
-        "react-jss": "^7.0.2"
       }
     },
     "gatsby-plugin-react-helmet": {
@@ -7110,6 +7304,70 @@
       "integrity": "sha1-DfKTUfByEWNRXfueVUPl9u7VFi8=",
       "dev": true
     },
+    "html-tokenize": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/html-tokenize/-/html-tokenize-2.0.0.tgz",
+      "integrity": "sha1-izqaXetHXK5qb5ZxYA0sIKspglE=",
+      "dev": true,
+      "requires": {
+        "buffer-from": "~0.1.1",
+        "inherits": "~2.0.1",
+        "minimist": "~0.0.8",
+        "readable-stream": "~1.0.27-1",
+        "through2": "~0.4.1"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
+          "dev": true
+        },
+        "object-keys": {
+          "version": "0.4.0",
+          "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-0.4.0.tgz",
+          "integrity": "sha1-KKaq50KN0sOpLz2V8hM13SBOAzY=",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "1.0.34",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
+          "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
+          "dev": true,
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.1",
+            "isarray": "0.0.1",
+            "string_decoder": "~0.10.x"
+          }
+        },
+        "string_decoder": {
+          "version": "0.10.31",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
+          "dev": true
+        },
+        "through2": {
+          "version": "0.4.2",
+          "resolved": "https://registry.npmjs.org/through2/-/through2-0.4.2.tgz",
+          "integrity": "sha1-2/WGYDEVHsg1K7bE22SiKSqEC5s=",
+          "dev": true,
+          "requires": {
+            "readable-stream": "~1.0.17",
+            "xtend": "~2.1.1"
+          }
+        },
+        "xtend": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/xtend/-/xtend-2.1.2.tgz",
+          "integrity": "sha1-bv7MKk2tjmlixJAbM3znuoe10os=",
+          "dev": true,
+          "requires": {
+            "object-keys": "~0.4.0"
+          }
+        }
+      }
+    },
     "html-void-elements": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-1.0.3.tgz",
@@ -7554,6 +7812,12 @@
         }
       }
     },
+    "is-directory": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/is-directory/-/is-directory-0.3.1.tgz",
+      "integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=",
+      "dev": true
+    },
     "is-dotfile": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/is-dotfile/-/is-dotfile-1.0.3.tgz",
@@ -7596,12 +7860,6 @@
       "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
       "dev": true
     },
-    "is-function": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.1.tgz",
-      "integrity": "sha1-Es+5i2W1fdPRk6MSH19uL0N2ArU=",
-      "dev": true
-    },
     "is-glob": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
@@ -7617,12 +7875,6 @@
       "integrity": "sha1-bghLvJIGH7sJcexYts5tQE4k2mk=",
       "dev": true
     },
-    "is-in-browser": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
-      "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU=",
-      "dev": true
-    },
     "is-installed-globally": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.1.0.tgz",
@@ -7985,6 +8237,12 @@
       "integrity": "sha512-QLPs8Dj7lnf3e3QYS1zkCo+4ZwqOiF9d/nZnYozTISxXWCfNs9yuky5rJw4/W34s7POaNlbZmQGaB5NiXCbP4w==",
       "dev": true
     },
+    "json-parse-better-errors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
+      "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
+      "dev": true
+    },
     "json-schema": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
@@ -8155,99 +8413,6 @@
         "verror": "1.10.0"
       }
     },
-    "jss": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/jss/-/jss-8.1.0.tgz",
-      "integrity": "sha512-NZ4CNAoPaPlM2rqHxPG5uGQbQEFZ9n1PITn0+wGIdAk2ZtA/F6el0SphLHf8So1Sx6N34hnVFFIuc32/hdsEzw==",
-      "dev": true,
-      "requires": {
-        "is-in-browser": "^1.0.2",
-        "warning": "^3.0.0"
-      }
-    },
-    "jss-camel-case": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/jss-camel-case/-/jss-camel-case-5.0.0.tgz",
-      "integrity": "sha512-vz11ip5EIlGuevtlUo9xIgiuD+it4Ebbb0+Y4o0A4oA8eOWY4aY7ihi/L7WvkQ54xnGOjUvLZ6nm2VYch2ufYg==",
-      "dev": true
-    },
-    "jss-compose": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/jss-compose/-/jss-compose-4.0.0.tgz",
-      "integrity": "sha512-VnsEziD2Lwrfwp10wx39FNybRLW5+RX/E2qQAXPAMbS+nHc0Jf2dC6ZiCfn5FaBGrpzLfIZ9MalTJDx4CQoMAQ==",
-      "dev": true,
-      "requires": {
-        "warning": "^3.0.0"
-      }
-    },
-    "jss-default-unit": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/jss-default-unit/-/jss-default-unit-7.0.0.tgz",
-      "integrity": "sha512-U1Oi1h45vFRuISr+g1DQ3Oua7CkNKNs47fTdiT/lHkuBMc6BBDUbPv9IbPPhk9gsEaX45Iy9TX8CAuaHLPCfEA==",
-      "dev": true
-    },
-    "jss-expand": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/jss-expand/-/jss-expand-4.0.1.tgz",
-      "integrity": "sha512-LRIMXXChAOgnhwSqYLJg8MS6dI98bf/sg52pAg04pbjOAtjfzyS0JTnQAiyk3PxqR3nKFR/Yv44ahpIpkdcxVA==",
-      "dev": true
-    },
-    "jss-extend": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/jss-extend/-/jss-extend-5.0.0.tgz",
-      "integrity": "sha512-fUp+9KipbdmzSfTxNHoT3mrFnE7fYn7EyHg3LTUexfpWrwj5Afkwb3iCfYV7GYCpg9OKDsqc18atwjHvSPWWKg==",
-      "dev": true,
-      "requires": {
-        "warning": "^3.0.0"
-      }
-    },
-    "jss-global": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/jss-global/-/jss-global-2.0.0.tgz",
-      "integrity": "sha512-/FSOMp4lF/vg47T/w8kKvL9tu7ka9am8N4izS63W81Qlay9hAq6xe9RxrPxygLpnn4KEb8LNbkKRoUv4SJfQsQ==",
-      "dev": true
-    },
-    "jss-nested": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/jss-nested/-/jss-nested-5.0.0.tgz",
-      "integrity": "sha512-9Molau+XVpSc6QEco3EC5yXmzeGMc5ZVII8+qy6jD6bvu6Y9mpfGoJ00LalR/n7xr/LC7Cxgs44UQQlLzumMBg==",
-      "dev": true,
-      "requires": {
-        "warning": "^3.0.0"
-      }
-    },
-    "jss-preset-default": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/jss-preset-default/-/jss-preset-default-3.0.0.tgz",
-      "integrity": "sha512-5wRsHsV89XjnQlUVN5jQfo6gcfcirDJmsMJL52HmWoQlV9SA+jhUtt1w3LjcJHe4e3tX4u/To/x3Btmhi+LZtQ==",
-      "dev": true,
-      "requires": {
-        "jss-camel-case": "^5.0.0",
-        "jss-compose": "^4.0.0",
-        "jss-default-unit": "^7.0.0",
-        "jss-expand": "^4.0.0",
-        "jss-extend": "^5.0.0",
-        "jss-global": "^2.0.0",
-        "jss-nested": "^5.0.0",
-        "jss-props-sort": "^5.0.0",
-        "jss-vendor-prefixer": "^6.0.0"
-      }
-    },
-    "jss-props-sort": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/jss-props-sort/-/jss-props-sort-5.0.0.tgz",
-      "integrity": "sha512-xtoVE7BlcPaMN/dzypHPYJn+QiphLPB1skypAOp9zLkOozPbR/x0JVAFdZnd7zqmmjvg+Ma/txjSg0HN/eZsGA==",
-      "dev": true
-    },
-    "jss-vendor-prefixer": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/jss-vendor-prefixer/-/jss-vendor-prefixer-6.0.0.tgz",
-      "integrity": "sha512-leqW7B2QLXYsUNR3jsUZP3CkuOYcWXyfF8TSJc4XNxhVCNH7ztK5dcnF8nLoMnxT0w/ajloeJKcch2ty/viCAA==",
-      "dev": true,
-      "requires": {
-        "css-vendor": "^0.3.8"
-      }
-    },
     "kebab-case": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/kebab-case/-/kebab-case-1.0.0.tgz",
@@ -9056,6 +9221,16 @@
       "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
       "dev": true
     },
+    "multipipe": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/multipipe/-/multipipe-1.0.2.tgz",
+      "integrity": "sha1-zBPv2DPJzamfIk+GhGG44aP9k50=",
+      "dev": true,
+      "requires": {
+        "duplexer2": "^0.1.2",
+        "object-assign": "^4.1.0"
+      }
+    },
     "mute-stream": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz",
@@ -9253,6 +9428,15 @@
         }
       }
     },
+    "nopt": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz",
+      "integrity": "sha1-bd0hvSoxQXuScn3Vhfim83YI6+4=",
+      "dev": true,
+      "requires": {
+        "abbrev": "1"
+      }
+    },
     "normalize-package-data": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.4.0.tgz",
@@ -11501,6 +11685,16 @@
         "prop-types": "^15.5.10"
       }
     },
+    "react-emotion": {
+      "version": "9.1.3",
+      "resolved": "https://registry.npmjs.org/react-emotion/-/react-emotion-9.1.3.tgz",
+      "integrity": "sha512-JRE6LbUpc7/Lu4Cr8VKbN03gClmkWjF3dsiBHF9sgXu2BVUE2rkf1rMIZ0cZoGtL9KrvY37Z+SL6RphU1NrOJA==",
+      "dev": true,
+      "requires": {
+        "babel-plugin-emotion": "^9.1.2",
+        "create-emotion-styled": "^9.1.2"
+      }
+    },
     "react-error-overlay": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-3.0.0.tgz",
@@ -11540,27 +11734,6 @@
         }
       }
     },
-    "react-jss": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/react-jss/-/react-jss-7.2.0.tgz",
-      "integrity": "sha512-vgnNFImsjfchBloCt0BCe7MeiNEiGtTm/MGA0RVFjU/ccTt+YAlfFhSlGJ+KOC3qQ9Sl5mkl07JatGfjW2CTQQ==",
-      "dev": true,
-      "requires": {
-        "hoist-non-react-statics": "^1.2.0",
-        "jss": "^8.1.0",
-        "jss-preset-default": "^3.0.0",
-        "prop-types": "^15.5.8",
-        "theming": "^1.1.0"
-      },
-      "dependencies": {
-        "hoist-non-react-statics": {
-          "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz",
-          "integrity": "sha1-qkSM8JhtVcxAdzsXF0t90GbLfPs=",
-          "dev": true
-        }
-      }
-    },
     "react-proxy": {
       "version": "3.0.0-alpha.1",
       "resolved": "https://registry.npmjs.org/react-proxy/-/react-proxy-3.0.0-alpha.1.tgz",
@@ -12242,6 +12415,12 @@
       "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=",
       "dev": true
     },
+    "require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true
+    },
     "require-like": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/require-like/-/require-like-0.1.2.tgz",
@@ -13670,6 +13849,18 @@
         }
       }
     },
+    "stylis": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.0.tgz",
+      "integrity": "sha512-pP7yXN6dwMzAR29Q0mBrabPCe0/mNO1MSr93bhay+hcZondvMMTpeGyd8nbhYJdyperNT2DRxONQuUGcJr5iPw==",
+      "dev": true
+    },
+    "stylis-rule-sheet": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz",
+      "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==",
+      "dev": true
+    },
     "supports-color": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
@@ -13820,18 +14011,6 @@
       "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
       "dev": true
     },
-    "theming": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/theming/-/theming-1.3.0.tgz",
-      "integrity": "sha512-ya5Ef7XDGbTPBv5ENTwrwkPUexrlPeiAg/EI9kdlUAZhNlRbCdhMKRgjNX1IcmsmiPcqDQZE6BpSaH+cr31FKw==",
-      "dev": true,
-      "requires": {
-        "brcast": "^3.0.1",
-        "is-function": "^1.0.1",
-        "is-plain-object": "^2.0.1",
-        "prop-types": "^15.5.8"
-      }
-    },
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
@@ -13954,6 +14133,15 @@
         "hoek": "4.x.x"
       }
     },
+    "touch": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/touch/-/touch-1.0.0.tgz",
+      "integrity": "sha1-RJy+LbrlqMgDjjDXH6D/RklHxN4=",
+      "dev": true,
+      "requires": {
+        "nopt": "~1.0.10"
+      }
+    },
     "tough-cookie": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.4.tgz",

site/package.json

@@ -8,15 +8,18 @@
     "build": "gatsby build"
   },
   "devDependencies": {
+    "emotion": "^9.1.3",
+    "emotion-server": "^9.1.3",
     "gatsby": "1.9.250",
     "gatsby-link": "1.6.40",
-    "gatsby-plugin-jss": "1.5.13",
+    "gatsby-plugin-emotion": "^1.1.16",
     "gatsby-plugin-react-helmet": "2.0.10",
     "gatsby-plugin-react-next": "^1.0.11",
     "gatsby-plugin-typography": "1.7.18",
     "gatsby-source-filesystem": "1.5.31",
     "gatsby-transformer-remark": "^1.7.40",
     "prop-types": "15.6.1",
+    "react-emotion": "^9.1.3",
     "react-helmet": "5.2.0",
     "rollup": "^0.58.1",
     "rollup-plugin-commonjs": "^9.1.0",

site/plugins/examples/components/Example.js

@@ -1,54 +1,78 @@
-import React, {Component, Fragment} from 'react';
 import {object} from 'prop-types';
-import injectSheet from 'react-jss';
 import ExampleList from './ExampleList';
+import React, {Component, Fragment} from 'react';
+import styled from 'react-emotion';
+
+const Wrapper = styled('div')({
+  display: 'flex'
+});
+
+const Sidebar = styled('div')({
+  marginRight: '1em'
+});
+
+const Content = styled('div')({
+  minWidth: 300,
+  flexGrow: 1
+});
+
+const Embed = styled('iframe')({
+  margin: 0,
+  padding: 0,
+  height: 350,
+  width: '100%'
+});
+
+const Aside = styled('aside')({
+  textAlign: 'right',
+  fontSize: '0.75em'
+});
+
+const Block = styled('pre')({
+  overflow: 'auto'
+});
 
 class Example extends Component {
   render() {
     const example = this.props.data.sitePage.context;
 
     return (
-      <section className={this.props.classes.wrapper}>
+      <Wrapper>
-        <div className={this.props.classes.nav}>
+        <Sidebar>
           <ExampleList active={example.slug} />
-        </div>
+        </Sidebar>
-        <div className={this.props.classes.content}>
+        <Content>
           <h1>{example.frontmatter.title}</h1>
-          <iframe
+          <Embed src={example.embedUrl} frameBorder="0" />
-            className={this.props.classes.embed}
+          <Aside>
-            src={example.embedUrl}
-            frameBorder="0"
-          />
-          <aside className={this.props.classes.aside}>
             <p>
               <a href={example.embedUrl}>stand-alone version</a>
             </p>
-          </aside>
+          </Aside>
           <h3>script</h3>
-          <pre className={this.props.classes.pre}>
+          <Block>
             <code>{example.js}</code>
-          </pre>
+          </Block>
           <h3>markup</h3>
-          <pre className={this.props.classes.pre}>
+          <Block>
             <code>{example.html}</code>
-          </pre>
+          </Block>
           {example.css && (
             <Fragment>
               <h3>style</h3>
-              <pre className={this.props.classes.pre}>
+              <Block>
                 <code>{example.css}</code>
-              </pre>
+              </Block>
             </Fragment>
           )}
-        </div>
+        </Content>
-      </section>
+      </Wrapper>
     );
   }
 }
 
 Example.propTypes = {
-  data: object.isRequired,
+  data: object.isRequired
-  classes: object.isRequired
 };
 
 export const query = graphql`
@@ -68,30 +92,4 @@ export const query = graphql`
   }
 `;
 
-const styles = {
+export default Example;
-  wrapper: {
-    display: 'flex'
-  },
-  nav: {
-    marginRight: '1em'
-  },
-  content: {
-    minWidth: 300,
-    flexGrow: 1
-  },
-  pre: {
-    overflow: 'auto'
-  },
-  embed: {
-    margin: 0,
-    padding: 0,
-    height: 350,
-    width: '100%'
-  },
-  aside: {
-    textAlign: 'right',
-    fontSize: '0.75em'
-  }
-};
-
-export default injectSheet(styles)(Example);

site/plugins/examples/components/ExampleList.js

@@ -1,7 +1,15 @@
-import React, {Component} from 'react';
-import {object} from 'prop-types';
-import injectSheet from 'react-jss';
 import Link from 'gatsby-link';
+import React, {Component} from 'react';
+import styled from 'react-emotion';
+
+const Wrapper = styled('div')({
+  minWidth: '10em'
+});
+
+const List = styled('ul')({
+  margin: 0,
+  listStyle: 'none'
+});
 
 class ExampleList extends Component {
   constructor(props) {
@@ -35,28 +43,12 @@ class ExampleList extends Component {
         </li>
       );
     }
-    return <ul className={this.props.classes.list}>{list}</ul>;
+    return <List>{list}</List>;
   }
 
   render() {
-    return (
+    return <Wrapper>{this.renderList()}</Wrapper>;
-      <div className={this.props.classes.wrapper}>{this.renderList()}</div>
-    );
   }
 }
 
-ExampleList.propTypes = {
+export default ExampleList;
-  classes: object.isRequired
-};
-
-const styles = {
-  wrapper: {
-    minWidth: '10em'
-  },
-  list: {
-    margin: 0,
-    listStyle: 'none'
-  }
-};
-
-export default injectSheet(styles)(ExampleList);

site/plugins/examples/gatsby-node.js

@@ -3,13 +3,10 @@ const {createFilePath} = require('gatsby-source-filesystem');
 const rollup = require('rollup');
 const resolve = require('rollup-plugin-node-resolve');
 const common = require('rollup-plugin-commonjs');
-const fs = require('fs');
+const fse = require('fs-extra');
 const promisify = require('util').promisify;
 const compileTemplate = require('string-template/compile');
 
-const writeFile = promisify(fs.writeFile);
-const readFile = promisify(fs.readFile);
-
 let rollupCache;
 const rollupPlugins = [resolve(), common()];
 
@@ -19,7 +16,7 @@ async function getOLCss() {
     return olCss;
   }
   const cssPath = path.join(__dirname, '..', '..', '..', 'css', 'ol.css');
-  olCss = await readFile(cssPath, {encoding: 'utf8'});
+  olCss = await fse.readFile(cssPath, {encoding: 'utf8'});
   return olCss;
 }
 
@@ -29,7 +26,7 @@ async function getEmbedTemplate() {
     return embedTemplate;
   }
   const embedPath = path.join(__dirname, 'embed.html');
-  const src = await readFile(embedPath, {encoding: 'utf8'});
+  const src = await fse.readFile(embedPath, {encoding: 'utf8'});
   embedTemplate = compileTemplate(src);
   return embedTemplate;
 }
@@ -54,7 +51,7 @@ exports.createPages = async (
 
   createRedirect({
     fromPath: `/examples/`,
-    isPermanent: false,
+    isPermanent: true,
     redirectInBrowser: true,
     toPath: `/examples/map/`
   });
@@ -154,8 +151,8 @@ exports.createPages = async (
     let exampleCss = '';
     const cssNode = examples[name].css;
     if (cssNode) {
-      exampleCss = await readFile(cssNode.absolutePath, {encoding: 'utf8'});
+      exampleCss = await fse.readFile(cssNode.absolutePath, {encoding: 'utf8'});
-      await writeFile(path.join(embedDir, cssNode.base), exampleCss);
+      await fse.writeFile(path.join(embedDir, cssNode.base), exampleCss);
     }
 
     const embedTemplate = await getEmbedTemplate();
@@ -169,7 +166,7 @@ exports.createPages = async (
     });
 
     const embedName = `${name}.html`;
-    writes.push(writeFile(path.join(embedDir, embedName), embed));
+    writes.push(fse.writeFile(path.join(embedDir, embedName), embed));
 
     const slug = markdownNode.fields.slug;
     index[name] = {
@@ -191,8 +188,10 @@ exports.createPages = async (
     });
   }
 
+  await fse.ensureDir(exampleDir);
+
   writes.push(
-    writeFile(path.join(exampleDir, 'index.json'), JSON.stringify(index))
+    fse.writeFile(path.join(exampleDir, 'index.json'), JSON.stringify(index))
   );
 
   await Promise.all(writes);

site/src/layouts/index.js

@@ -1,44 +1,43 @@
-import React from 'react';
+import {func} from 'prop-types';
-import injectSheet from 'react-jss';
-import {object, func} from 'prop-types';
 import Link from 'gatsby-link';
+import React from 'react';
+import styled from 'react-emotion';
 
-const Layout = ({classes, children}) => (
+const Page = styled('div')({
-  <div className={classes.layout}>
+  margin: '1em auto',
-    <header className={classes.header}>
+  maxWidth: '960px'
+});
+
+const Header = styled('header')({
+  display: 'flex',
+  alignItems: 'baseline',
+  padding: '0 2em',
+  marginBottom: '2em',
+  '& h1': {
+    margin: '0 auto 0 0'
+  }
+});
+
+const Main = styled('main')({
+  padding: '0 2em'
+});
+
+const Layout = ({children}) => (
+  <Page>
+    <Header>
       <h1>
         <Link to="/">OpenLayers</Link>
       </h1>
       <div>
         <Link to="/examples/">examples</Link>
       </div>
-    </header>
+    </Header>
-    <main className={classes.main}>{children()}</main>
+    <Main>{children()}</Main>
-  </div>
+  </Page>
 );
 
 Layout.propTypes = {
-  children: func.isRequired,
+  children: func.isRequired
-  classes: object.isRequired
 };
 
-const styles = {
+export default Layout;
-  layout: {
-    margin: '1em auto',
-    maxWidth: '960px'
-  },
-  header: {
-    display: 'flex',
-    alignItems: 'baseline',
-    padding: '0 2em',
-    marginBottom: '2em',
-    '& h1': {
-      margin: '0 auto 0 0'
-    }
-  },
-  main: {
-    padding: '0 2em'
-  }
-};
-
-export default injectSheet(styles)(Layout);