Plugins could not be passed through options in webpack 2.2.0

[artemkaint]

If I use the constraction from the example

module.exports = {
  module: {
    rules: [
      {
        test: /\.css/,
        use: [
          …
          {
            loader: 'postcss-loader',
            options: {
              plugins: function () {
                return [
                  require('precss'),
                  require('autoprefixer')
                ];
              }
            }
          }
        ]
      }
    ]
  }
}

I have obtain
/opt/project/node_modules/postcss-loader/index.js?{"plugins":{"default":[null,null],"fontAwesome":[null,null]},"pack":"default"}

https://github.com/webpack/webpack/blob/master/lib/NormalModuleFactory.js#L21
Beсause all function have been converted into string (of course null)

[artemkaint]

now we have to use ident key in options to pass function
https://webpack.js.org/guides/migrating/#complex-options

[ai]

@TheLarkInn I need you help here. Do we need to change our current docs?
https://github.com/postcss/postcss-loader#webpack-2-1

[maratfakhreev]

@ai @artemkaint Same issue, seems like postcss.config.js doesn't work for 2.2.0

[ai]

@maratfakhreev @artemkaint please show your full configs. In most previous cases it was not a PostCSS loader problem, but Extract Text plugin or other crazy thing.

[maratfakhreev]

@ai yeah, thx, have found the problem on my side. Loader works correctly.

[michael-ciniawsky]

@ai I work on new docs for inline config already, but I'm waiting for reply if 'this' (@example) will stay or not because I absolutely don't like it 😛 => { ident: 'whatever' } => https://webpack.js.org/guides/migrating/#complex-options

@artemkaint @maratfakhreev ⬇️

{
  loader: 'postcss-loader',
  options: { ident: 'postcss', plugins: () => [ require('plugin') ] }
}

README (WIP)

@ai I push (PR) them as quickly as possible, should I in addition push just the example fixes asap? I also wanted to add an example for extract-text-plugin but it must be fixed/working before I can write docs :D. webpack-contrib/extract-text-webpack-plugin#343 etc.

[michael-ciniawsky]

@ai @artemkaint @maratfakhreev guys please a on webpack/webpack#4073 to get rid of { ident: 'crap' } 😛 👍

[edmundo096]

I commented a summary of possible ways to resolve this on another (closed) issue. Here is my comment:

So basically, what I conclude after reading and some researching, there are 4 ways (as for now) to load the PostCSS configuration for Webpack 2:

1. Using a postcss.config.js file, which must be "anywhere down the file tree" where Webpack matches a file (e.g. if a match was on a \assets\stylesheets file, postcss.config.js must be anywhere inside that path).
   This is due how postcss-loader works. It uses postcss-load-config module, which uses cosmiconfig module (see more in davidtheclark/cosmiconfig).
   That is why there is almost no documentation about where one can place that file.
   Placing it on the root almost assures that postcss.config.js will just work, although this is not prefered by everybody.

As a side note, since this depends mainly on cosmiconfig we also have other 3 ways here:

• package.json property (anywhere down the file tree). An example reached reading this is here
• JSON or YAML "rc file" (anywhere down the file tree).
• CLI --config argument.
• As already commented, .config.js CommonJS module (anywhere down the file tree).

2. OLD workaround for Webpack <= 2.2.0, using the ident on the options object (as owenDods commented).
   Unnecessary in the in Webpack >= 2.2.1, see point 4

{
  loader: 'postcss-loader',
  options: {
    ident: 'postcss',     // <- This..
    plugins: () => [ require('plugin') ]
  }
}

3. Using the webpack.LoaderOptionsPlugin.
   This makes postcss-loader load the options (and plugins) as if we were using Webpack 1.
   See more here https://webpack.js.org/plugins/loader-options-plugin/

The last 2 are handled respectively by this line of code: var options = params.plugins || loader.options.postcss; in the index.js#L48.
All of this 3 proaches support an array of plugins.

Hope this helps someone else (avoiding possible headaches) in the future.

---

EDIT: Update as for Webpack >= v2.2.1

4. The preferred way (without the ident workaround for webpack <= 2.2.0).

{
  loader: 'postcss-loader',
  options: {
    plugins: () => [ require('plugin') ]
  }
}

[vladshcherbin]

Works for me with webpack 2.2.1:

{
  test: /\.scss$/,
  use: [
    ...,
    {
      loader: 'postcss-loader',
      options: {
        plugins: () => [ require('autoprefixer')({ browsers: ['last 2 versions'] }) ]
      }
    },
    ...
  ]
}

[michael-ciniawsky]

@vladshcherbin You where faster 😛

As a note for anyone coming here using an older webpack || extract-text-plugin version =>

1. webpack >= v2.2.1 solves bugs in loader.options by automatically creating an ident now. Options containing functions and require() statements work as expected.
2. ExtractTextPlugin is on the finish line, be aware of an API change fallbackLoader => fallback && loader => use before ExtractTextPlugin v2 final

webpack.config.js

import ExtractText from 'extract-text-webpack-plugin'

export default {
  module: {
    rules: [
       {
          test: /\.css$/,
          include: 'path/to/includes', // optional
          exclude: 'path/to/excludes', // optional
          use: [
            'style-loader',
             { loader: 'css-loader', options: { importLoaders: 1 } },
             { 
               loader: 'postcss-loader', 
               options: { plugins: (ctx) => [ require('plugin')({ option: ctx.resourcePath }) ] }
             }
          ]
       },
       // Extract Text Plugin
       {
          test: /\.css$/,
          include: 'path/to/includes', // optional
          exclude: 'path/to/excludes', // optional
          use: ExtractText.extract({
            fallback: 'style-loader'
            use: [
               { loader: 'css-loader', options: { importLoaders: 1 } },
               { 
                 loader: 'postcss-loader', 
                 options: { plugins: (ctx) => [ require('plugin')({ option: ctx.resourcePath }) ] }
               }
             ]
          })
        }
     ]
  },
  plugins: [
    new ExtractText([name].css)
  ]
}

Closed as fixed :)