Add config option

[ai]

OK, I will add configoptions to set path to PostCSS config :-P.

[ai]

We don’t need multiple configs anymore https://github.com/postcss/postcss-loader#plugins

[sammdec]

Is there a way to specify the postcss config location as even with adding the configuration to webpack 2

{
        test: /\.(css|scss)$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' },
          {
            loader: 'postcss-loader',
            options: {
              plugins: function () {
                return [
                  require('autoprefixer')({
                    browsers: [
                      '>1%',
                      'last 3 versions',
                      'Firefox ESR',
                      'not ie < 9', // React doesn't support IE8 anyway
                    ]
                  })
                ];
              }
            }
          },
          {
            loader: 'sass-loader',
            options: {
              importLoaders: true
            }
          }
        ]
      },

Im still getting an error saying Module build failed: Error: No PostCSS Config found in:

[ai]

@samjbmason please, debug what you have here in params.plugins and loader.options?
https://github.com/postcss/postcss-loader/blob/master/index.js#L48

[sammdec]

@ai Im not sure I follow what your asking for

[ai]

@samjbmason open plugin code in node_modules/postcss-loader, put console.log(params.plugins, loader.options) after line 48. Run build. Post here the output.

[sammdec]

Ah right yeah sure thing

undefined { devtool: 'cheap-module-source-map',
  entry:
   [ '/Users/samm/Sites/lmn-webpack-config/node_modules/react-dev-utils/webpackHotDevClient.js',
     './src/js/main.js' ],
  output:
   { pathinfo: true,
     path: '/Users/samm/Sites/design-system/build',
     publicPath: '/',
     filename: 'bundle.js',
     chunkFilename: '[id].bundle.js',
     library: '',
     hotUpdateFunction: 'webpackHotUpdate',
     jsonpFunction: 'webpackJsonp',
     libraryTarget: 'var',
     sourceMapFilename: '[file].map[query]',
     hotUpdateChunkFilename: '[id].[hash].hot-update.js',
     hotUpdateMainFilename: '[hash].hot-update.json',
     crossOriginLoading: false,
     hashFunction: 'md5',
     hashDigest: 'hex',
     hashDigestLength: 20,
     devtoolLineToLine: false,
     strictModuleExceptionHandling: false },
  resolve:
   { extensions: [ '.js', '.json', '.scss' ],
     alias:
      { component: '/Users/samm/Sites/design-system/node_modules/@lostmyname/components/dist',
        chameleon: '/Users/samm/Sites/design-system/node_modules/chameleon-sass/assets/stylesheets',
        css: '/Users/samm/Sites/design-system/node_modules/@lostmyname/css/scss',
        fonts: '/Users/samm/Sites/design-system/node_modules/@lostmyname/css/fonts',
        scss: '/Users/samm/Sites/design-system/src/scss',
        helpers: '/Users/samm/Sites/design-system/src/js/helpers' },
     modules:
      [ '/Users/samm/Sites/design-system/src',
        'node_modules',
        '/Users/samm/Sites/design-system/node_modules' ],
     unsafeCache: true,
     aliasFields: [ 'browser' ],
     mainFields: [ 'browser', 'module', 'main' ] },
  resolveLoader:
   { modules: [ '/Users/samm/Sites/lmn-webpack-config/node_modules' ],
     unsafeCache: true,
     mainFields: [ 'loader', 'main' ],
     extensions: [ '.js', '.json' ] },
  module:
   { rules: [ [Object], [Object], [Object], [Object], [Object], [Object] ],
     unknownContextRequest: '.',
     unknownContextRegExp: false,
     unknownContextRecursive: true,
     unknownContextCritical: true,
     exprContextRequest: '.',
     exprContextRegExp: false,
     exprContextRecursive: true,
     exprContextCritical: true,
     wrappedContextRegExp: /.*/,
     wrappedContextRecursive: true,
     wrappedContextCritical: false,
     unsafeCache: true },
  plugins:
   [ OccurrenceOrderPlugin { preferEntry: undefined },
     EnvironmentPlugin { keys: [Object] },
     HotModuleReplacementPlugin { multiStep: undefined, fullBuildTimeout: 200 } ],
  node:
   { fs: 'empty',
     net: 'empty',
     tls: 'empty',
     console: false,
     process: true,
     global: true,
     Buffer: true,
     setImmediate: true,
     __filename: 'mock',
     __dirname: 'mock' },
  cache: true,
  context: '/Users/samm/Sites/design-system',
  target: 'web',
  performance:
   { maxAssetSize: 250000,
     maxEntrypointSize: 250000,
     hints: 'warning' } }

[sammdec]

Additional info is that this is running the latest webpack 2 RC

[ai]

Replace it to console.log(options)

[sammdec]

Getting undefined logged out

[ai]

Did you put it after 48 line? What output will be for console.log(params.plugins || loader.options.postcss)?

[michael-ciniawsky]

@samjbmason Could you try removing the .scss ext from webpack.resolve.extensions, since you testing for /\$.(css|scss}/ in webpack.module.rules?

[sammdec]

Yeah sure did here is the code

var loader = this;
    var file   = loader.resourcePath;
    var params = loaderUtils.parseQuery(loader.query);

    var options  = params.plugins || loader.options.postcss;
    console.log(options)
    var pack     = params.pack;
    var callback = loader.async();

[ai]

@michael-ciniawsky seems like it has postcss in loader by some reason :-/

[ai]

@samjbmason Could you replace line 48 to:

var options  = params.plugins || loader.postcss || loader.options.postcss;

Did it fix build for you?

[sammdec]

@ai Still getting undefined after adding var options = params.plugins || loader.postcss || loader.options.postcss;

[ai]

@michael-ciniawsky oops, it was webpack plugins :)

[ai]

@samjbmason go to webpack team. It is webpack 2 issue or webpack UX issue.

/cc @TheLarkInn

[sammdec]

Brilliant thanks, do you know what kind of info they will need when I log the issue?

[ai]

@samjbmason they will need your full config, full webpack version and that loaderUtils.parseQuery(loader.query) didn’t contains config options.

[michael-ciniawsky]

@samjbmason I think issue is locate somewhere here. Does it build correctly without postcss-loader ?

 resolve:
   { extensions: [ '.js', '.json', '.scss' ],
     alias:
      { component: '/Users/samm/Sites/design-system/node_modules/@lostmyname/components/dist',
        chameleon: '/Users/samm/Sites/design-system/node_modules/chameleon-sass/assets/stylesheets',
        css: '/Users/samm/Sites/design-system/node_modules/@lostmyname/css/scss',
        fonts: '/Users/samm/Sites/design-system/node_modules/@lostmyname/css/fonts',
        scss: '/Users/samm/Sites/design-system/src/scss',
        helpers: '/Users/samm/Sites/design-system/src/js/helpers' },
     modules:
      [ '/Users/samm/Sites/design-system/src',
        'node_modules',
        '/Users/samm/Sites/design-system/node_modules' ],
     unsafeCache: true,
     aliasFields: [ 'browser' ],
     mainFields: [ 'browser', 'module', 'main' ] },
  resolveLoader:
   { modules: [ '/Users/samm/Sites/lmn-webpack-config/node_modules' ],
     unsafeCache: true,
     mainFields: [ 'loader', 'main' ],
     extensions: [ '.js', '.json' ] },

[ai]

@TheLarkInn maybe I use API in wrong way? But I didn’t found good 2.0 migration guide for loader authors.

We load plugins from:

{
  loader: 'posctss-loader',
  options: {
    plugins: [function () { … }]
  }
}

by loaderUtils.parseQuery(loader.query).plugins

[michael-ciniawsky]

@samjbmason To my knowledge there is no importLoaders: true option for sass-loader

[sammdec]

@michael-ciniawsky Yeah it works when i remove postcss-loader

[michael-ciniawsky]

@samjbmason Yep, I can confirm that's a bug, functions/requires inside of rules.use[index].options are not parsed/loaded at all in webpack@2.2.0-rc4+. Meanwhile switch to either postcss.config.js (recommended) or try with LoaderOptionsPlugin

Tracking issue is here

/cc @sokra @TheLarkInn

[sammdec]

@michael-ciniawsky Unfortunately using a postcss.config.js doesnt work as Im creating the webpack within another npm module similar to how create-react-app works.

However, I can confirm LoaderOptionsPlugin works for now 👍

Thanks for all your help on this

[michael-ciniawsky]

@samjbmason Ok I understand, so with LoaderOptionsPlugin the No PostCSS Config found in: ...vanishes (Definitely no postcss.config.js present somewhere, 'inline' options get parsed (especially functions) correctly)?

[ai]

BTW, we should not use LoaderOptionsPlugin here.

Seems like webpack 2 has a issue. If we will fix it by a hack, issue will be released version and many users will get it.

So, don't use hack. Create a issue in webpack repo.

[michael-ciniawsky]

@ai Already open

[sammdec]

@ai I agree LoaderOPtionsPlugin is not a long term solution but was useful that I could use it, before the bug gets fixed.