Add example site for styled-jsx as well as some fixes to its plugin

Author: KyleAMathews

examples/using-styled-jsx/.eslintrc

@@ -0,0 +1,8 @@
+{
+  "env": {
+    "browser": true
+  },
+  "globals": {
+    "graphql": false
+  }
+}

examples/using-styled-jsx/.gitignore

@@ -0,0 +1,3 @@
+public
+.cache
+node_modules

examples/using-styled-jsx/README.md

@@ -0,0 +1,5 @@
+# using-styled-jsx
+
+https://using-styled-jsx.gatsbyjs.org
+
+Demonstrates using [styled-jsx](https://github.com/zeit/styled-jsx) with the Gatsby plugin [gatsby-plugin-styled-jsx](https://www.gatsbyjs.org/packages/gatsby-plugin-styled-jsx/) which automatically provides SSR support.

examples/using-styled-jsx/gatsby-config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [`gatsby-plugin-styled-jsx`],
+}

examples/using-styled-jsx/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "using-styled-jsx",
+  "private": true,
+  "description": "Gatsby example site using using-styled-jsx",
+  "author": "Kyle Mathews <[email protected]>",
+  "dependencies": {
+    "gatsby": "latest",
+    "gatsby-link": "latest",
+    "gatsby-plugin-styled-jsx": "^1.0.7"
+  },
+  "license": "MIT",
+  "main": "n/a",
+  "scripts": {
+    "develop": "gatsby develop",
+    "build": "gatsby build"
+  }
+}

examples/using-styled-jsx/src/pages/index.js

@@ -0,0 +1,14 @@
+import React from "react"
+
+export default () => (
+  <div>
+    <p>only this paragraph will get the style :)</p>
+    {/* you can include <Component />s here that include
+         other <p>s that don't get unexpected styles! */}
+    <style jsx>{`
+      p {
+        color: red;
+      }
+    `}</style>
+  </div>
+)

packages/gatsby-plugin-styled-jsx/.gitignore

@@ -0,0 +1,3 @@
+/*.js
+!index.js
+yarn.lock

packages/gatsby-plugin-styled-jsx/src/gatsby-node.js

@@ -0,0 +1,7 @@
+// Add babel plugin
+exports.modifyBabelrc = ({ babelrc }) => {
+  return {
+    ...babelrc,
+    plugins: babelrc.plugins.concat([`styled-jsx/babel`]),
+  }
+}