[2.0.1] 'No PostCSS Config found' (options.config)

[Uriziel01]

After todays upgrade to postcss-loader 2.0.0 I'm getting No PostCSS Config found everywhere.

I'm using weback.config.js from https://github.com/JeffreyWay/laravel-mix repository

My actual postCss options are:

    postCss: [
        require('autoprefixer')({
            browsers: ['Chrome >= 35',
                'Firefox >= 38',
                'Edge >= 12',
                'Explorer >= 10',
                'iOS >= 8',
                'Safari >= 8',
                'Android 2.3',
                'Android >= 4',
                'Opera >= 12'],
            cascade: true,
            add: true,
            remove: true
        })
    ]

[michael-ciniawsky]

Fixed in c4f0064
Released in v2.0.1

😛

[Uriziel01]

Now I'm getting other type of error messages:

Module build failed: TypeError: Cannot create property 'prev' on boolean 'false'
    at Promise.resolve.then.then (C:\Users\Uriziel\ponteus\wp-content\themes\ponteus\node_modules\postcss-loader\lib\index.js:125:47)

[michael-ciniawsky]

Did you update to v2.0.1? This should also be fixed by v2.0.1 😛

[Uriziel01]

Yes, I've updated everything and even cleaned npm cache. 😃

[michael-ciniawsky]

You make me sweat here :D, mom I will investigate

[gtwilliams03]

I am getting the same error using the font-awesome-webpack2 package:

ERROR in ./~/css-loader?sourceMap&-minimize!./~/postcss-loader/lib!./~/sass-loader/lib/loader.js?sourceMap!./~/bootstrap-sass/assets/stylesheets/_bootstrap.scss
Module build failed: TypeError: Cannot create property 'prev' on boolean 'false'
    at Promise.resolve.then.then (/Users/gtw/clearwater-public-web/node_modules/postcss-loader/lib/index.js:125:47)
 @ ./~/bootstrap-sass/assets/stylesheets/_bootstrap.scss 4:14-175 18:2-22:4 19:20-181
 @ ./src/layouts/CoreLayout/CoreLayout.js
 @ ./src/main.js
 @ multi font-awesome-webpack2 ./src/main.js webpack-hot-middleware/client?path=http://192.168.4.61:3000/__webpack_hmr

I am using (what I think is) a pretty standard postcss options from a starter kit:

webpackConfig.plugins.push(
new webpack.LoaderOptionsPlugin({
    options: {
      postcss: [
        cssnano({
          autoprefixer : {
            add      : true,
            remove   : true,
            browsers : ['last 2 versions']
          },
          discardComments : {
            removeAll : true
          },
          discardUnused : false,
          mergeIdents   : false,
          reduceIdents  : false,
          safe          : true,
          sourcemap     : true
        })
      ]
    }
  })
)

[iAdramelk]

Don't use starter kit, and tried to update to postcss-loader 2.0.1, still have No PostCSS Config found message. Have pretty big postcss config in few separate postcss.config.js files. What should I upload to help you find problem cause?

[mythz]

Had the same issue after installing the latest postcss-loader, so I reverted back to:

"postcss-loader": "^1.3.3",

[Fardinak]

I'm also getting the original error (using 2.0.1).
Now, I'm not sure... am I allowed to NOT have a separate postcss.config.js? I don't have much to config; would rather keep it in my webpack.config.js.

[iAdramelk]

To clarify I do have postcss.config.js files, but not in the root category, they are in separate subfolders fro different entry points.

[michael-ciniawsky]

Please try the fix branch and provide feedback 😛 npm i -D postcss/postcss-loader#fix

@iAdramelk I'm especially interested in your setup :D

[jimblue]

Same error here since I've upgrade:

Module build failed: Error: No PostCSS Config found in: /websites/webpack

Basicaly I was doing this:

// ===========================
// LOADERS
// ===========================
  
module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractCSSPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'postcss-loader', 'sass-loader']
        })
      },
      {
        test: /\.css$/,
        use: ExtractCSSPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'postcss-loader']
        })
      }
    ]
  },

// ===========================
// PLUGINS
// ===========================

  plugins: [

    // LOADER OPTIONS PLUGIN
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: [
          autoprefixer()
        ]
      }
    }),

    // EXTRACT CSS PLUGIN
    new ExtractCSSPlugin({
      filename: '[name].[contenthash:8].css',
      disable: config.debug
    })
  ]

}

If you want to see the complete config I just made a gist:

webpack config gist

[michael-ciniawsky]

@iAdramelk Thx I will take a look as soon as possible :)

[michael-ciniawsky]

@iAdramelk Fixed && Released in v2.0.4

I was sloppy... 😛

[JPortegijs]

Is postcss.config.js actually required, can't I just specify the options directly in my webpack.config?

[michael-ciniawsky]

@JPortegijs Both are supported && loading hierarchy iswebpack.config.js > postcss.config.js

[iAdramelk]

@michael-ciniawsky yep, no more error! Thank you very much.

[JPortegijs]

Everything good here, too! Thanks!

[th3fallen]

still getting the mentioned error on postcss-loader@2.0.5 using

new webpack.LoaderOptionsPlugin({
      minimize: false,
      debug: true,
      options: {
        postcss: [autoprefixer({ browsers: ['last 2 versions'] })],
      },
    }),

[michael-ciniawsky]

I need to add this to the README... 😛

@th3fallen LoaderOptionsPlugin doesn't work with postcss-loader >= v2.0.0 anymore since it's deprecated to use for loader options, when the loader supports webpack 2 config syntax

**webpack.config.js

{
   test: /\.css$/,
   use: [ 
     ..., 
     ..., 
    { loader: 'postcss-loader', options: { plugins: [ require('autoprefixer')(options)) ] } }
  ]
}

[michael-ciniawsky]

new webpack.LoaderOptionsPlugin({
      minimize: false,
      debug: true,
-      options: {
-        postcss: [autoprefixer({ browsers: ['last 2 versions'] })],
-      },
    }),

[th3fallen]

@michael-ciniawsky thanks for the input but how would i manage that in this syntax?

 {
        test: /\.(scss|css)$/,
        loader: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
      },

[michael-ciniawsky]

@th3fallen

**webpack.config.js

// webpack 2 module.loaders => module.rules 
{
   test: /\.(scss|css)$/,
   use: [ // webpack 2 loader => use 
     'style-loader' 
    { loader: 'css-loader', options: { importLoaders: 2 }, // needed for webpack @import handling
    { loader: 'postcss-loader', options: { plugins: [ require('autoprefixer')(options)) ] } },
    { loader: 'sass-loader', options: { includePaths: [ /* path/to/@imports */ ]}
  ]
}

[th3fallen]

thanks @michael-ciniawsky that works for my dev env. but in my productions build that's formatted like this...

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
import getConfig from '../config';
const path = require('path');
const config = getConfig(process.env.NODE_ENV).config;

const publicPath = (config.PREFIX || '').replace(/\/$/, '') + path.join(process.env.PUBLIC_PATH || '/').replace(/^\./, '');

module.exports =  {
  plugins: [
    new webpack.LoaderOptionsPlugin({
      minimize: true,
      debug: false,
    }),
    new ExtractTextPlugin({
      filename: 'assets/css/[name]-[hash].css',
      allChunks: true,
    }),
  ],
  module: {
    rules: [
      {
        test: /\.(scss|css)$/,
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            'style-loader',
            'css-loader',
            {
              loader: 'postcss-loader',
              options: { plugins: [require('autoprefixer')({ browsers: ['last 2 versions'] })] },
            },
            'sass-loader',
          ],
          publicPath,
        }),
      },
    ],
  },
};

im getting...

ERROR in ./~/css-loader!./~/postcss-loader/lib?{"plugins":[null]}!./~/sass-loader/lib/loader.js!./app/styles/app.scss
    Module build failed: TypeError: Cannot read property 'postcss' of null
        at Processor.normalize (/Users/clarktomlinson/Sites/When-I-Work/wheniwork-js/node_modules/postcss-loader/node_modules/postcss/lib/processor.es6:101:18)
        at new Processor (/Users/clarktomlinson/Sites/When-I-Work/wheniwork-js/node_modules/postcss-loader/node_modules/postcss/lib/processor.es6:35:29)
        at postcss (/Users/clarktomlinson/Sites/When-I-Work/wheniwork-js/node_modules/postcss-loader/node_modules/postcss/lib/postcss.es6:34:12)
        at Promise.resolve.then.then (/Users/clarktomlinson/Sites/When-I-Work/wheniwork-js/node_modules/postcss-loader/lib/index.js:137:12)
     @ ./~/style-loader!./~/css-loader!./~/postcss-loader/lib?{"plugins":[null]}!./~/sass-loader/lib/loader.js!./app/styles/app.scss 4:14-189

any ideas?

[alexander-akait]

@th3fallen ./~/postcss-loader/lib?{"plugins":[null]} in error line, seems require('autoprefixer')({ browsers: ['last 2 versions'] }) return null

[th3fallen]

so why would that exact same config work for my dev environment?

[th3fallen]

apparently adding ident: 'postcss', fixed it.... scratch that

[michael-ciniawsky]

@th3fallen latest postcss-loader ? (v2.0.5)

and please remove style-loader from ExtractTextPlugin.extract().use it should only get triggered via fallback and isn't needed for the extract process

{
        test: /\.(scss|css)$/,
-       loader: ExtractTextPlugin.extract({
+       use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
-           'style-loader',
            'css-loader',
            {
              loader: 'postcss-loader',
              options: { plugins: [require('autoprefixer')({ browsers: ['last 2 versions'] })] },
            },
            'sass-loader',
          ],
          publicPath,
        }),
      },

[th3fallen]

@michael-ciniawsky yep, what you suggested works, not sure why not it does...

[michael-ciniawsky]

style-loader 'pitches' code for <style></style> into your files, loading this madness can break ETWP and then the automatically generated ident might be missing, bc of a former error and your plugins don't get stringified etc etc... 😛 It works now and you get a separate 'autoprefixed' CSS file ?

[th3fallen]

no, i get 1 css file but that's what's expected from my build thanks so much for the help.

[heisian]

Kept getting

ERROR in ./~/css-loader?{"modules":true,"importLoaders":3,"localIdentName":"[name]__[local]__[hash:base64:5]"}!./~/postcss-loader/lib!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"outputStyle":"expanded","sourceMap":true}!./main/src/accountPages/MyPolicies/Policy/policy.scss
Module build failed: Error: No PostCSS Config found in:
...

until I added:

      {
        test: /\.scss$/,
        use: [{
          loader: 'style-loader'
        }, {
          loader: 'css-loader', options: {
            modules: true,
            importLoaders: 3,
            localIdentName: '[name]__[local]__[hash:base64:5]'
          }
        }, {
          loader: 'postcss-loader', options: {
+            plugins: [require('autoprefixer')]
          }
        }, {
          loader: 'resolve-url-loader'
        }, {
          loader: 'sass-loader', options: {
            outputStyle: 'expanded',
            sourceMap: true
          }
        }]
      },

Now all compiles great. thanks all.

[michael-ciniawsky]

@heisian That's the intended behaviour, either the setup (plugins && options) is specified in webpack.config.js or otherwise look for postcss.config.js and finally throw none are present, because without any setup, you parse the CSS to an AST for no reason and don't need postcss-loader (perf regression)

[heisian]

that config was in my webpack.config.js - not a fan of having a postcss.config.js file in 20+ folders, so webpack.config.js is preferred..

what is an AST? I apologize but this is about my 6th day of using Webpack in this manner.

Random tweaking has gotten me successful configs for both dev and production, however I could very well stand to learn more about what's actually going on here.

So.. why does adding the autoprefixer plugin get rid of the error? Isn't autoprefixer just a plugin for expanding out all the various permutations of CSS properties across browsers? Does postcss-loader by default require autoprefixer to function?

Validation?

[michael-ciniawsky]

that config was in my webpack.config.js - not a fan of having a postcss.config.js file in 20+ folders, so webpack.config.js is preferred..

You need one postcss.config.js in the root (./), but it's enterily a personal choice, where to specify options :). Multiple postcss.configs.js is only needed if you need different transforms (plugins) for certain files (Config Cascade)

CSS File {String} 
=> CSS Parser (e.g PostCSS) 
=> [Post]CSS AST {Object} (JSON)
=> plugin1(plugin2(pluginN(ast))) 
=> CSS Stringifier (e.g PostCSS)
=> CSS File {String} 

What is an AST?

AST => Abstract Syntax Tree

File (Source)

.class {
   width: 25%;
}

Interface (Syntax)

<Selector> {
  <Declaration>: <Value>;
}

AST (PostCSS)

Root {
  raws: { semicolon: false, after: '\n' },
  type: 'root',
  nodes: 
   [ 
    Rule {
       raws: [Object],
       type: 'rule',
       nodes: [Object],
       parent: [Circular],
       source: [Object],
       selector: '.class',
       lastEach: 2,
       indexes: {} 
    } 
  ],
  source: 
   { 
     input: 
     Input {
        css: '.class {\n  width: 25%;\n}\n',
        file: './src/index.css' 
     },
     start: { line: 1, column: 1 } 
  },
  lastEach: 2,
  indexes: {} 
}

So.. why does adding the autoprefixer plugin get rid of the error?

In theory you could of course parse the CSS and stringify it back without any plugins (transforms), but this computation is unnecessary/useless then 😛

[alexander-akait]

@michael-ciniawsky can we close conversation here? If someone want to write about bug or other stuff, let create new issue.

[michael-ciniawsky]

Yep, you can lock the thread anytime if you want 😛

[alexander-akait]

If someone has problems, please create a new issue. Thanks!