Add styled-jsx-postcss example

examples/with-styled-jsx-postcss/.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": [
+    "next/babel"
+  ],
+  "plugins": [
+    "styled-jsx-postcss/babel"
+  ]
+}

examples/with-styled-jsx-postcss/README.md

@@ -0,0 +1,26 @@
+
+# Example app with styled-jsx-postcss
+
+This example features how you use PostCSS with styled-jsx via [styled-jsx-postcss](https://github.com/giuseppeg/styled-jsx-postcss)
+
+## How to use
+
+Download the example (or clone the repo)[https://github.com/zeit/next.js.git]:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-styled-jsx-postcss
+cd with-styled-jsx-postcss
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+```
+
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
+
+```bash
+now
+```

examples/with-styled-jsx-postcss/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "with-styled-jsx-postcss",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "^2.0.0-beta",
+    "postcss-cssnext": "^2.9.0",
+    "styled-jsx-postcss": "^0.1.5"
+  },
+  "author": "Giuseppe Gurgone",
+  "license": "MIT"
+}

examples/with-styled-jsx-postcss/pages/index.js

@@ -0,0 +1,22 @@
+export default () => (
+  <div className='hello'>
+    <p>Hello World</p>
+    <style jsx>{`
+      :global(:root) {
+        --bgColor: green;
+        --color: white;
+      }
+      .hello {
+        font: 15px Helvetica, Arial, sans-serif;
+        background: var(--bgColor);
+        color: var(--color);
+        padding: 100px;
+        text-align: center;
+        transition: 100ms ease-in background;
+      }
+      .hello:hover {
+        color: color(var(--color) blackness(+80%));
+      }
+    `}</style>
+  </div>
+)

examples/with-styled-jsx-postcss/postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = () => ({
+  plugins: {
+    'postcss-cssnext': {}
+  }
+})