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 () => (

Hello World

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