From e9d14613d48bf082da4ae912710fd7de6d7d51e9 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Sun, 15 Oct 2017 19:54:57 +0200 Subject: [PATCH] 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 | 14 ++++++++ examples/with-styled-jsx-plugins/README.md | 35 +++++++++++++++++++ examples/with-styled-jsx-plugins/package.json | 24 +++++++++++++ .../pages/index.js | 13 ++++--- examples/with-styled-jsx-postcss/.babelrc | 5 --- examples/with-styled-jsx-postcss/README.md | 30 ---------------- .../with-styled-jsx-postcss/babel-preset.js | 17 --------- examples/with-styled-jsx-postcss/package.json | 18 ---------- .../with-styled-jsx-postcss/postcss.config.js | 5 --- examples/with-styled-jsx-postcss/readme.md | 1 + package.json | 2 +- server/build/babel/preset.js | 30 ++++++++++++++-- 12 files changed, 108 insertions(+), 86 deletions(-) create mode 100644 examples/with-styled-jsx-plugins/.babelrc create mode 100644 examples/with-styled-jsx-plugins/README.md create mode 100644 examples/with-styled-jsx-plugins/package.json rename examples/{with-styled-jsx-postcss => with-styled-jsx-plugins}/pages/index.js (61%) delete mode 100644 examples/with-styled-jsx-postcss/.babelrc delete mode 100644 examples/with-styled-jsx-postcss/README.md delete mode 100644 examples/with-styled-jsx-postcss/babel-preset.js delete mode 100644 examples/with-styled-jsx-postcss/package.json delete mode 100644 examples/with-styled-jsx-postcss/postcss.config.js create mode 100644 examples/with-styled-jsx-postcss/readme.md diff --git a/examples/with-styled-jsx-plugins/.babelrc b/examples/with-styled-jsx-plugins/.babelrc new file mode 100644 index 000000000000000..f0779ab79ad1d7e --- /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 000000000000000..340feec6e52923b --- /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 000000000000000..439da3d0e95759b --- /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 1b14687ea6bb1c6..ddb870d3effaa0f 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 () => (

Hello World

diff --git a/examples/with-styled-jsx-postcss/.babelrc b/examples/with-styled-jsx-postcss/.babelrc deleted file mode 100644 index 9ffa20a24fca758..000000000000000 --- 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 bf7c69959e7c9ff..000000000000000 --- 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 6db8469d3003a41..000000000000000 --- 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 3f70c7b7870c049..000000000000000 --- 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 cb45fcf05aaad1d..000000000000000 --- 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 000000000000000..f9d2f83e3c3ae66 --- /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 40f910307411051..515e0c212086629 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 9a0156f7ca638da..d8f218e11bdc9d3 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'),