diff --git a/examples/with-styled-jsx-plugins/.babelrc b/examples/with-styled-jsx-plugins/.babelrc
new file mode 100644
index 0000000000000000000000000000000000000000..f0779ab79ad1d7ef529a3c2d6b23940a92b26f36
--- /dev/null
+++ b/examples/with-styled-jsx-plugins/.babelrc
@@ -0,0 +1,14 @@
+{
+ "presets": [
+ [
+ "next/babel",
+ {
+ "styled-jsx": {
+ "plugins": [
+ "styled-jsx-plugin-postcss"
+ ]
+ }
+ }
+ ]
+ ]
+}
diff --git a/examples/with-styled-jsx-plugins/README.md b/examples/with-styled-jsx-plugins/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..340feec6e52923b0e76106417718f8cff6fb6e4a
--- /dev/null
+++ b/examples/with-styled-jsx-plugins/README.md
@@ -0,0 +1,35 @@
+[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/basic-css)
+
+# With styled-jsx plugins
+
+## How to use
+
+Download the example [or clone the repo](https://github.com/zeit/next.js):
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-styled-jsx-plugins
+cd with-styled-jsx-plugins
+```
+
+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
+```
+
+## The idea behind the example
+
+Next.js ships with [styled-jsx](https://github.com/zeit/styled-jsx) allowing you
+to write scope styled components with full css support. This is important for
+the modularity and code size of your bundles and also for the learning curve of the framework. If you know css you can write styled-jsx right away.
+
+This example shows how to configure styled-jsx to use external plugins to modify the output. Using this you can use PostCSS, SASS (SCSS), LESS, or any other pre-processor with styled-jsx. You can define plugins in `.babelrc`. In this case PostCSS was used as an example. PostCSS plugins are defined in `package.json`.
+
+More details about how plugins work can be found in the [styled-jsx readme](https://github.com/zeit/styled-jsx#css-preprocessing-via-plugins)
diff --git a/examples/with-styled-jsx-plugins/package.json b/examples/with-styled-jsx-plugins/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..439da3d0e95759b24aedf41a86beca07f78fa969
--- /dev/null
+++ b/examples/with-styled-jsx-plugins/package.json
@@ -0,0 +1,24 @@
+{
+ "name": "basic-css",
+ "version": "1.0.0",
+ "scripts": {
+ "dev": "next",
+ "build": "next build",
+ "start": "next start"
+ },
+ "dependencies": {
+ "lost": "8.2.0",
+ "next": "4.0.4",
+ "postcss-nested": "2.1.2",
+ "react": "16.0.0",
+ "react-dom": "16.0.0",
+ "styled-jsx-plugin-postcss": "0.1.0"
+ },
+ "license": "ISC",
+ "postcss": {
+ "plugins": {
+ "lost": {},
+ "postcss-nested": {}
+ }
+ }
+}
diff --git a/examples/with-styled-jsx-postcss/pages/index.js b/examples/with-styled-jsx-plugins/pages/index.js
similarity index 61%
rename from examples/with-styled-jsx-postcss/pages/index.js
rename to examples/with-styled-jsx-plugins/pages/index.js
index 1b14687ea6bb1c6ba28897d0e63cbe69fb2dd2f0..ddb870d3effaa0fdba6dc541db52c347f9ef5b48 100644
--- a/examples/with-styled-jsx-postcss/pages/index.js
+++ b/examples/with-styled-jsx-plugins/pages/index.js
@@ -2,20 +2,19 @@ export default () => (
diff --git a/examples/with-styled-jsx-postcss/.babelrc b/examples/with-styled-jsx-postcss/.babelrc
deleted file mode 100644
index 9ffa20a24fca758d8632bff13544af1c926f55be..0000000000000000000000000000000000000000
--- a/examples/with-styled-jsx-postcss/.babelrc
+++ /dev/null
@@ -1,5 +0,0 @@
-{
- "presets": [
- "./babel-preset"
- ]
-}
diff --git a/examples/with-styled-jsx-postcss/README.md b/examples/with-styled-jsx-postcss/README.md
deleted file mode 100644
index bf7c69959e7c9ffc4fe59cd14b680f7133c1665d..0000000000000000000000000000000000000000
--- a/examples/with-styled-jsx-postcss/README.md
+++ /dev/null
@@ -1,30 +0,0 @@
-[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-styled-jsx-postcss)
-
-# 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)
-
-N.B. In order to integrate `styled-jsx-postcss` with Next.js you need to patch Next.js'
-babel preset. See [babel-preset.js](./babel-preset.js) and [.babelrc](./.babelrc).
-
-## How to use
-
-Download the example [or clone the repo](https://github.com/zeit/next.js):
-
-```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
-```
diff --git a/examples/with-styled-jsx-postcss/babel-preset.js b/examples/with-styled-jsx-postcss/babel-preset.js
deleted file mode 100644
index 6db8469d3003a4128c38e8635130657b73f88b6e..0000000000000000000000000000000000000000
--- a/examples/with-styled-jsx-postcss/babel-preset.js
+++ /dev/null
@@ -1,17 +0,0 @@
-const nextBabelPreset = require('next/babel')
-
-/*
- This code will load the 'styled-jsx-postcss/babel' package instead
- of built-in 'styled-jsx/babel'
-*/
-
-let presetArray = nextBabelPreset()
-
-presetArray.plugins = presetArray.plugins.map(plugin => {
- if (!Array.isArray(plugin) && plugin.indexOf('styled-jsx/babel') !== -1) {
- return require.resolve('styled-jsx-postcss/babel')
- }
- return plugin
-})
-
-module.exports = presetArray
diff --git a/examples/with-styled-jsx-postcss/package.json b/examples/with-styled-jsx-postcss/package.json
deleted file mode 100644
index 3f70c7b7870c04952690e5202f918f8ead45f488..0000000000000000000000000000000000000000
--- a/examples/with-styled-jsx-postcss/package.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
- "name": "with-styled-jsx-postcss",
- "version": "1.0.0",
- "scripts": {
- "dev": "next",
- "build": "next build",
- "start": "next start"
- },
- "dependencies": {
- "next": "latest",
- "postcss-cssnext": "^2.9.0",
- "react": "^15.4.2",
- "react-dom": "^15.4.2",
- "styled-jsx-postcss": "^0.1.5"
- },
- "author": "Giuseppe Gurgone",
- "license": "MIT"
-}
diff --git a/examples/with-styled-jsx-postcss/postcss.config.js b/examples/with-styled-jsx-postcss/postcss.config.js
deleted file mode 100644
index cb45fcf05aaad1db1cc8c0c48ca45cbf59bf9a3e..0000000000000000000000000000000000000000
--- a/examples/with-styled-jsx-postcss/postcss.config.js
+++ /dev/null
@@ -1,5 +0,0 @@
-module.exports = () => ({
- plugins: {
- 'postcss-cssnext': {}
- }
-})
diff --git a/examples/with-styled-jsx-postcss/readme.md b/examples/with-styled-jsx-postcss/readme.md
new file mode 100644
index 0000000000000000000000000000000000000000..f9d2f83e3c3ae6617942ef5d092ef7a7476a2699
--- /dev/null
+++ b/examples/with-styled-jsx-postcss/readme.md
@@ -0,0 +1 @@
+This examples was moved to [https://github.com/zeit/next.js/tree/master/examples/with-styled-jsx-plugins](https://github.com/zeit/next.js/tree/master/examples/with-styled-jsx-plugins)
diff --git a/package.json b/package.json
index 40f9103074110514dc0e714fdec47ba42cef6a6a..515e0c212086629a9a8afa101076ffe47bceb77e 100644
--- a/package.json
+++ b/package.json
@@ -91,7 +91,7 @@
"send": "0.16.1",
"source-map-support": "0.4.18",
"strip-ansi": "4.0.0",
- "styled-jsx": "2.0.2",
+ "styled-jsx": "2.1.0",
"touch": "3.1.0",
"unfetch": "3.0.0",
"url": "0.11.0",
diff --git a/server/build/babel/preset.js b/server/build/babel/preset.js
index 9a0156f7ca638da4c3c01c11a523b5a70993eb38..d8f218e11bdc9d3e27b023d79f51e7fd70ed311d 100644
--- a/server/build/babel/preset.js
+++ b/server/build/babel/preset.js
@@ -1,5 +1,30 @@
const relativeResolve = require('../root-module-relative-path').default(require)
+// Resolve styled-jsx plugins
+function styledJsxOptions (opts) {
+ if (!opts) {
+ return {}
+ }
+
+ if (!Array.isArray(opts.plugins)) {
+ return opts
+ }
+
+ opts.plugins = opts.plugins.map(plugin => {
+ if (Array.isArray(plugin)) {
+ const [name, options] = plugin
+ return [
+ require.resolve(name),
+ options
+ ]
+ }
+
+ return require.resolve(plugin)
+ })
+
+ return opts
+}
+
const envPlugins = {
'development': [
require.resolve('babel-plugin-transform-react-jsx-source')
@@ -24,9 +49,8 @@ module.exports = (context, opts = {}) => ({
require.resolve('./plugins/handle-import'),
require.resolve('babel-plugin-transform-object-rest-spread'),
require.resolve('babel-plugin-transform-class-properties'),
- [require.resolve('babel-plugin-transform-runtime'),
- opts['transform-runtime'] || {}],
- require.resolve('styled-jsx/babel'),
+ [require.resolve('babel-plugin-transform-runtime'), opts['transform-runtime'] || {}],
+ [require.resolve('styled-jsx/babel'), styledJsxOptions(opts['styled-jsx'])],
...plugins,
[
require.resolve('babel-plugin-module-resolver'),