No PostCSS Config found

[jeffijoe]

I've been using LoaderOptionsPlugin until now where everything worked. I then tried to use the inline options but I got Error: No PostCSS Config found in node_modules/..., apparently because the plugin uses the PostCSS config resolver if not using webpack 1-style options.

Would it be possible to prevent this if inline options are provided?

[TrySound]

Add postcss config to postcss.config.js as specified in documentation

[jeffijoe]

The docs specify 2 ways of config: a file and inline as loader options. I want to use the latter, which according to docs is supported. I think this behavior is unintended.

[michael-ciniawsky]

@jeffijoe Please post your webpack.config.js here, both ways are supported 😛 I will help to fix it, looks like a setup error somewhere

[michael-ciniawsky]

@jeffijoe Still free free to post your webpack.config.js 😛

[jeffijoe]

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

[michael-ciniawsky]

webpack version and the error log aswell please :)

[jeffijoe]

Webpack 2.4.1

[michael-ciniawsky]

The ERROR in ./.../... ... postcss-loader?->{}<- is empty ? The config doesn't seem to be applied and that's why it tries to load postcss.config.js. Please post the full webpack.config.js

[jeffijoe]

Sure thing.

const path = require('path')
const webpack = require('webpack')
const yenv = require('yenv')
const filter = require('lodash/fp/filter')
const identity = require('lodash/fp/identity')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const BabiliPlugin = require('babili-webpack-plugin')

// Used to filter out environment-specific
// entries in arrays.
const clean = filter(identity)

// Webpack 2 supports function configurations.
// In our package.json we set --env.prod when building for
// production.
module.exports = function ({ prod }) {
  // Since we use ExtractTextPlugin in production, we can't use
  // the new way of declaring loaders, so defining all the CSS loader
  // stuff here to avoid repeating it.
  const cssLoaders = [{
    loader: 'css-loader',
    options: {
      modules: true,
      importLoaders: 2,
      localIdentName: '[name]__[local]___[hash:base64:5]'
    }
  }, {
    loader: 'postcss-loader',
    options: {
      plugins: () => {
        return clean([
          require('rucksack-css')({
            autoprefixer: true
          }),
          prod && require('postcss-csso')
        ])
      }
    }
  }, {
    loader: 'sass-loader'
  }]
  const dev = !prod
  // Used to pass environment variables from env.yaml
  // to DefinePlugin.
  const env = Object.assign(
    yenv(),
    { NODE_ENV: prod ? 'production' : 'development' }
  )
  return {
    devtool: dev ? 'inline-source-map' : 'source-map',
    entry: {
      vendor: [
        'inferno',
        'moment',
        'classnames',
        'jwt-decode',
        'mobx',
        'mobx-task',
        'libx',
        'marked',
        'messageformat',
        'memoizee',
        'inferno-mobx',
        'standalone-react-css-transition-group',
        'react-textarea-autosize',
        'react-router',
        'react-helmet',
        'tinycolor2'
      ],
      app: clean([
        dev && 'react-hot-loader/patch',
        dev && 'webpack-hot-middleware/client',
        path.resolve(__dirname, './index.jsx')
      ])
    },
    plugins: clean([
      new webpack.LoaderOptionsPlugin({
        minimize: prod,
        debug: dev
      }),
      new webpack.optimize.CommonsChunkPlugin({ name: 'vendor' }),
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: JSON.stringify(env.NODE_ENV),
          API_ROOT: JSON.stringify(env.API_ROOT)
        }
      }),
      new webpack.NamedModulesPlugin(),
      prod && new webpack.NoErrorsPlugin(),
      dev && new webpack.NoEmitOnErrorsPlugin(),
      dev && new webpack.HotModuleReplacementPlugin(),
      prod && new BabiliPlugin(),
      prod && new webpack.optimize.UglifyJsPlugin({
        output: { comments: false },
        compress: {
          sequences: true,
          dead_code: true,
          conditionals: true,
          booleans: true,
          unused: true,
          if_return: true,
          join_vars: true,
          drop_console: true
        }
      }),
      prod && new ExtractTextPlugin({ filename: 'bundle.css', allChunks: true })
    ]),
    output: {
      // This is only used for production
      path: path.join(__dirname, '../../dist/public'),
      filename: '[name].js',
      publicPath: '/',
      pathinfo: dev
    },
    module: {
      rules: [{
        test: /\.[jt]sx?$/i,
        use: clean([
          'babel-loader'
        ]),
        exclude: /node_modules/
      }, {
        test: /\.(css|sass)$/i,
        use: dev
          ? [{ loader: 'style-loader' }, ...cssLoaders]
          : ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: cssLoaders
          })
      }, {
        test: /\.(gif|png|jpe?g|svg)$/i,
        use: [
          {
            loader: 'image-webpack-loader',
            options: {
              progressive: true,
              pngquant: { quality: '65-90', speed: 4 }
            }
          },
          {
            loader: 'url-loader',
            options: { limit: 5000 }
          }
        ]
      }, {
        // Favicon
        test: /favicon\.ico/i,
        use: [{
          loader: 'file-loader',
          options: { name: 'favicon.ico' }
        }]
      }]
    },
    resolve: {
      extensions: ['.js', '.jsx'],
      modules: ['./', 'node_modules'],
      alias: Object.assign(
        {},
        prod && {
          react: 'inferno-compat',
          'react-dom': 'inferno-compat',
          'mobx-react': 'inferno-mobx',
          'react-addons-css-transition-group': 'standalone-react-css-transition-group'
        }
      )
    },
    performance: {
      hints: prod ? 'warning' : false
    }
  }
}

[michael-ciniawsky]

    options: {
      plugins: () => {
-       return clean([
+      return [
          require('rucksack-css')({
            autoprefixer: true
          }),
-          prod && require('postcss-csso')
        ])
      }
    }

This won't work because webpack stringifies the returned value internally, that's why we have postcss.config.js and recommend it

webpack.config.js

...
plugins: () => prod ? return [ ...plugins ] : return [ ...plugins, ...devPlugins ] // maybe

or

postcss.config.js

module.exports = (ctx) => ({
  plugins: [
    ...
    ctx.env === 'production' ? require('postcss-csso') : false
  ]
})