build failed: atRule.before is not a function

[sgimmai]

I am always getting atRule.before is not a function error when building.

here is my package.json

"devDependencies": {
    "autoprefixer": "^9.5.1",
    "babel-loader": "^5.3.2",
    "bootstrap": "4.0.0-alpha.5",
    "bootstrap-touchspin": "^3.1.1",
    "bourbon": "^4.2.6",
    "css-loader": "^0.27.3",
    "expose-loader": "^0.7.3",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.10.1",
    "flexibility": "^1.0.5",
    "jquery": "^2.1.4",
    "material-design-icons": "^2.1.3",
    "node-sass": "^4.12.0",
    "notosans-fontface": "~1.0.1",
    "postcss-flexibility": "^1.0.2",
    "postcss-loader": "^1.3.3",
    "sass-loader": "^6.0.3",
    "style-loader": "^0.14.0",
    "tailwindcss": "^1.0.1",
    "tether": "^1.1.1",
    "velocity-animate": "^1.2.3",
    "webpack": "^2.2.1",
    "webpack-sources": "^0.1.0"
  },
  "dependencies": {
    "fsevents": "^2.0.6",
    "postcss": "^7.0.16"
  }

Here is my webpack.config.js

const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

let config = {
  entry: {
    main: [
      './js/theme.js',
      './css/theme.scss',
      './css/tailwind.css'
    ]
  },
  output: {
    path: path.resolve(__dirname, '../assets/js'),
    filename: 'theme.js'
  },
  module: {
    rules: [
      {
        test: /\.js/,
        loader: 'babel-loader'
      },
      {
        test: /\.scss$/,
        use: 
          ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: [
              {
                loader: 'css-loader',
                options: {
                  minimize: true
                }
              },
              'postcss-loader',
              'sass-loader'
            ]
          }),
      },
      {
        test: /.(png|woff(2)?|eot|ttf|svg|gif)(\?[a-z0-9=\.]+)?$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '../css/[hash].[ext]'
            }
          }
        ]
      },
      {
        test : /\.css$/,
        // use: [
        //   'style-loader', 
        //   { 
        //     loader: 'css-loader', 
        //     options: { 
        //       importLoaders: 1 
        //     } 
        //   }, 
        //   {
        //     loader: 'postcss-loader',
        //     options: {
        //       ident: 'postcss',
        //       plugins: [
        //         require('tailwindcss'),
        //         require('autoprefixer'),
        //       ],
        //     },
        //   }
        // ]
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            { loader: 'css-loader', options: { importLoaders: 1 } },
            'postcss-loader',
          ],
        })
      }
    ]
  },
  externals: {
    prestashop: 'prestashop',
    $: '$',
    jquery: 'jQuery'
  },
  plugins: [
    new ExtractTextPlugin(path.join('..', 'css', 'theme.css')),
    // require('tailwindcss')
  ]
};

if (process.env.NODE_ENV === 'production') {
  config.plugins.push(
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: false,
      compress: {
        sequences: true,
        conditionals: true,
        booleans: true,
        if_return: true,
        join_vars: true,
        drop_console: true
      },
      output: {
        comments: false
      },
      minimize: true
    })
  );
}

module.exports = config;

[adamwathan]

That error usually shows up when you're somehow using an outdated version of PostCSS. I would start by updating to the latest postcss-loader, deleting your node_modules folder and package-lock.json or yarn lockfile and reinstalling your dependencies.

[sgimmai]

@adamwathan installing postcss-loader@latest works fine now, thanks! I was under the impression that postcss is all I need updated to latest version - d'oh.