Make styled-jsx configurable (#3050)

* Make styled-jsx configurable

* Add styled-jsx-plugin-postcss example

* Add styled-jsx 2.1.0 with plugins support

* Move examples around and add description

* Add link to new example

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

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

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)

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": {}
+    }
+  }
+}

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

@@ -2,20 +2,19 @@ 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);
+        background: #eee;
         padding: 100px;
         text-align: center;
         transition: 100ms ease-in background;
+        lost-column: 1/3;
+        &:hover {
+          color: red;
+        }
       }
       .hello:hover {
-        color: color(var(--color) blackness(+80%));
+        background: #ccc;
       }
     `}</style>
   </div>

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)

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",

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'),