next-compose

next-compose

Compose next-plugins in a simple way

Installation

npm install -D next-compose

or

yarn add -D next-compose

Usage

Simple example with TypeScript and Sass plugins:

const withTS = require('@zeit/next-typescript')
const withSass = require('@zeit/next-sass')
const compose = require('next-compose')

const tsConfig = {/** ts config here */}
const sassConfig = {/** sass config here */}

module.exports = compose([
  [withTS, tsConfig],
  [withSass, sassConfig],
  {
    webpack: (config) => {
      /**some special code */
      return config
    }
  }
])

Example with build vendor.css and app.css from different input extensions:

const webpack = require('webpack')
const withSass = require('@zeit/next-sass')
const withSass = require('@zeit/next-less')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const commonsChunkConfig = require('@zeit/next-css/commons-chunk-config')
const compose = require('./scripts/next-compose')}

const extractVendorCSSPlugin = new ExtractTextPlugin('static/vendor.css')
const extractAppCSSPlugin = new ExtractTextPlugin('static/app.css')

module.exports = compose([
  [withLess, {
    cssLoaderOptions: { modules: false },
    lessLoaderOptions: { /** less loader options */ },
    extractCSSPlugin: extractVendorCSSPlugin
  }],
  [withSass, {
    cssLoaderOptions: {
      modules: true,
      localIdentName: '[local]-[hash:base64:5]',
    },
    sassLoaderOptions: { /** sass loader options */ },
    extractCSSPlugin: extractAppCSSPlugin,
  }],
  {
    webpack(config, options) {
      config.plugins.push(extractVendorCSSPlugin)
      config.plugins.push(extractAppCSSPlugin)

      if (!options.isServer) {
        config = commonsChunkConfig(config, /\.(less|scss|sass)$/)
      }

      return config
    }
  }
])