title: Error: PostCSS plugin postcss-mixins requires PostCSS 8
body: <p>I have following webpack.mix.js in my laravel project. Just</p>
  <pre><code>const mix = require('laravel-mix');
  mix.js('resources/js/app.js', 'public/js')
     .scripts([
            'public/js/app.js',
            'resources/js/includes/script.js'
        ],  'public/js/app.js')
     .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
        require('postcss-mixins'),
        require('postcss-simple-vars'),
        require('postcss-nested'),
        require('autoprefixer'),
      ]);
  </code></pre>
  <p>If delete <code>postcss-mixins</code> and <code>postcss-simple-vars</code> everything works well. But these 2 plugins gives me same error</p>
  <p>Error: PostCSS plugin postcss-mixins requires PostCSS 8.
  Error: PostCSS plugin postcss-simple-vars requires PostCSS 8.</p>
  <p>Like that</p>
  <pre><code>npm run dev
  
  &gt; dev
  &gt; npm run development
  
  
  &gt; development
  &gt; cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js
  
  98% after emitting SizeLimitsPlugin
  
   ERROR  Failed to compile with 2 errors                                      8:50:47 PM
  
   error  in ./resources/css/app.css
  
  Module build failed (from ./node_modules/css-loader/index.js):
  ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
  Error: PostCSS plugin postcss-simple-vars requires PostCSS 8.
  Migration guide for end-users:
  https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
      at Processor.normalize (/home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/processor.js:153:15)
      at new Processor (/home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/processor.js:56:25)
      at postcss (/home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/postcss.js:55:10)
      at /home/http/app/node_modules/postcss-loader/src/index.js:140:12
      at processTicksAndRejections (node:internal/process/task_queues:93:5)
      at /home/http/app/node_modules/webpack/lib/NormalModule.js:316:20
      at /home/http/app/node_modules/loader-runner/lib/LoaderRunner.js:367:11
      at /home/http/app/node_modules/loader-runner/lib/LoaderRunner.js:233:18
      at context.callback (/home/http/app/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
      at /home/http/app/node_modules/postcss-loader/src/index.js:208:9
      at processTicksAndRejections (node:internal/process/task_queues:93:5)
  
   error  in ./resources/css/app.css
  
  Module build failed (from ./node_modules/postcss-loader/src/index.js):
  Error: PostCSS plugin postcss-simple-vars requires PostCSS 8.
  Migration guide for end-users:
  https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
      at Processor.normalize (/home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/processor.js:153:15)
      at new Processor (/home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/processor.js:56:25)
      at postcss (/home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/postcss.js:55:10)
      at /home/http/app/node_modules/postcss-loader/src/index.js:140:12
  
   @ ./resources/css/app.css 2:14-142
  
       Asset     Size   Chunks             Chunk Names
  /js/app.js  729 KiB  /js/app  [emitted]  /js/app
  
  ERROR in ./resources/css/app.css
  Module build failed (from ./node_modules/css-loader/index.js):
  ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
  Error: PostCSS plugin postcss-simple-vars requires PostCSS 8.
  Migration guide for end-users:
  https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
      at Processor.normalize (/home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/processor.js:153:15)
      at new Processor (/home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/processor.js:56:25)
      at postcss (/home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/postcss.js:55:10)
      at /home/http/app/node_modules/postcss-loader/src/index.js:140:12
      at processTicksAndRejections (node:internal/process/task_queues:93:5)
      at /home/http/app/node_modules/webpack/lib/NormalModule.js:316:20
      at /home/http/app/node_modules/loader-runner/lib/LoaderRunner.js:367:11
      at /home/http/app/node_modules/loader-runner/lib/LoaderRunner.js:233:18
      at context.callback (/home/http/app/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
      at /home/http/app/node_modules/postcss-loader/src/index.js:208:9
      at processTicksAndRejections (node:internal/process/task_queues:93:5)
   @ ./resources/css/app.css
  
  ERROR in ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css)
  Module build failed (from ./node_modules/postcss-loader/src/index.js):
  Error: PostCSS plugin postcss-simple-vars requires PostCSS 8.
  Migration guide for end-users:
  https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
      at Processor.normalize (/home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/processor.js:153:15)
      at new Processor (/home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/processor.js:56:25)
      at postcss (/home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/postcss.js:55:10)
      at /home/http/app/node_modules/postcss-loader/src/index.js:140:12
   @ ./resources/css/app.css 2:14-142
  </code></pre>
  <p>but in package.json I have postcss version 8, so I cannot understand reason of this problem</p>
  <pre><code>    &quot;devDependencies&quot;: {
          &quot;postcss&quot;: &quot;^8.2.6&quot;,
          &quot;postcss-import&quot;: &quot;^12.0.1&quot;,
          &quot;postcss-simple-vars&quot;: &quot;^6.0.3&quot;,
      },
  </code></pre>