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

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

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

-[![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)
+[![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)
 
-# 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).
+# 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-postcss
-cd with-styled-jsx-postcss
+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:
@@ -28,3 +23,13 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
 ```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-postcss/package.json → examples/with-styled-jsx-plugins/package.json

 {
-  "name": "with-styled-jsx-postcss",
+  "name": "basic-css",
   "version": "1.0.0",
   "scripts": {
     "dev": "next",
@@ -7,12 +7,18 @@
     "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"
+    "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"
   },
-  "author": "Giuseppe Gurgone",
-  "license": "MIT"
+  "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/.babelrc

-{
-  "presets": [
-    "./babel-preset"
-  ]
-}

examples/with-styled-jsx-postcss/babel-preset.js

-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

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

-module.exports = () => ({
-  plugins: {
-    'postcss-cssnext': {}
-  }
-})

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

+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

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