Laravel-mix: PostCSS warning that it does nothing, no plugin is set

[gabrielboliveira]

• Laravel Mix Version: 4.0.14 (npm list --depth=0)
• Node Version (node -v): v11.1.0
• NPM Version (npm -v): 6.4.1
• Yarn Version (yarn -v): 1.12.3
• OS: macOS Mojave 10.14.2

Description:

I have a pure Vue project with laravel-mix as bundler. Its a very simple repository, almost equal to fireworkweb/vue-laravel-mix. All css/scss are wrapped into .vue template files, so no call to mix.sass or any other css.

After upgrading to v4, I keep getting this warning on every build (hot reload, dev and watch), but not when bundling for prod:

You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.

You can check the webpack.mix.js with how we use it.

Steps To Reproduce:

Clone above repository and run yarn dev, yarn hot or even yarn watch.

[luffyzhao]

have you solved it? i also met.

[amcsi]

Have you tried doing this?

mix
  .options({
    postCss: [
      require('autoprefixer'),
    ],
  })

[luffyzhao]

Have you tried doing this?

mix
  .options({
    postCss: [
      require('autoprefixer'),
    ],
  })

is ok!
thank you!

[gabrielboliveira]

Thanks @amcsi, it does fixes the problem. Shouldn't mix add this by default?

[amcsi]

I think so too...
@JeffreyWay ?

[sebastiaanluca]

Having the same issue, seems like the PostCSS config array is not passed to Mix/Webpack.

mix.options({
    autoprefixer: false,
    processCssUrls: false,

    postCss: [
        require('autoprefixer'),
        require('postcss-easy-import')(),
        require('tailwindcss'),
        require('postcss-nested')(),
        require('postcss-preset-env')(),
        require('postcss-css-variables')()
    ],
})

Not a single PostCSS plugin works (getting lots of errors) and the output spams the infamous You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. line on each build progress.

---

Update

I can get this working (somewhat) fine by moving the global Post CSS config/array to the individual build lines:

mix.postCss('resources/styles/main.css', 'public/styles/main.css', [
    require('postcss-nested')(),
    require('postcss-preset-env')(),
    require('postcss-css-variables')(),
    require('tailwindcss')
])

No more warnings! Had about a few hundred, especially on (third-party) CSS and JS files.

[slavarazum]

Have the same issue using laravel-mix-tailwind

[OliverGrimsley]

Had same issue - tons of PostCSS errors (_You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing_) after updating all my npm dev dependencies to their current versions as of 7/20/19 (also using a mixture of my own, tailwind and semantic ui scss), solution by @amcsi also fixed all those PostCSS errors.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[anthonyattard]

Thank you @amcsi ! Works well.

[joshiprashanthd]

I am trying to configure postcss for tailwindcss and autoprefixer in React app. I used create-react-app with typescript template. Since create-react-app is configured with ES2015, I can't use require in config file. So I configured the postcss.plugin.ts like this

export default {
  plugins: {
    "tailwindcss": {},
    "autoprefixer": {},
  },
};

But it's showing You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing..

The original code was

module.exports = {
  plugins: [
    require("tailwindcss")("./src/tailwind.config.js"),
    require("autoprefixer"),
  ],
}

[sebastiaanluca]

Just an update, but for Laravel Mix 6 (and maybe PostCSS 8 too) I had to move the PostCSS config back to the global options. Specifying it per mix.css() call prevented webpack from compiling PostCSS stuff in Vue components (in the style tag). So the output contained raw @apply statements instead of parsed code.

What now works:

mix.options({
    postCss: [
        require('postcss-easy-import')(),
        require('postcss-css-variables')(),
        require('postcss-preset-env')(),
        require('tailwindcss'),
    ],
})

[Tofandel]

I have the issue since I upgraded from v5 to v6

This is what my mix config looks like, and none of the plugins is applied (no prefixer and no tailwind), any idea?

I tried putting the plugins in postcss.config.js but same issue

const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
require('dotenv').config();

mix.js('resources/js/main.js', 'public/js').vue({ version: 2 })
  .sass('resources/sass/app.scss', 'public/css')
  .options({
    postCss: [
      require('autoprefixer'),
    ],
  })
  .postCss('resources/assets/css/main.css', 'public/css', [
    tailwindcss('tailwind.js'),
  ]).version();

mix.webpackConfig(require('./webpack.config'));

[thecrypticace]

What's in your webpack.config.js file?

[Tofandel]

This is the webpack.config.js but I also tried without and same result so I don't think it's the issue

const path = require('path');
const mix = require('laravel-mix');

const compiler = { ...require('vue-template-compiler') };
const parse = compiler.parseComponent;
compiler.parseComponent = (file, options) => {
  return parse('<template functional>' + file.replace('<svg', '<svg v-bind="data.attrs" :class="data.staticClass" :style="data.staticStyle"') + '</template>', options);
};

module.exports = {
  resolve: {
    alias: {
      '@env': path.resolve(__dirname, '.env'),
      '@': path.resolve(__dirname, 'resources/js'),
      '@assets': path.resolve(__dirname, 'resources/assets'),
      '@sass': path.resolve(__dirname, 'resources/sass'),
    },
  },
  output: {
    chunkFilename: mix.inProduction() ? 'js/chunks/[name].[chunkhash:8].js' : 'js/chunks/[name].js',
  },
  module: {
    rules: [
      /* config.module.rule('svg') */
      {
        test: /\.(svg)(\?.*)?$/,
        oneOf: [
          /* config.module.rule('svg').rule('inline') */
          {
            resourceQuery: /inline/,
            use: [
              {
                loader: 'file-loader',
              },
            ],
          },
          /* config.module.rule('svg').rule('default') */
          {
            use: [
              {
                loader: 'vue-loader',
                options: {
                  compiler,
                },
              },
            ],
          },
        ],
      },

    ],
  },
};

[thecrypticace]

Would you please open a separate issue with a minimal (if possible) reproduction?

[Tofandel]

I solved it, postcss-loader was using a very old version v3 (For some reason I'm still trying to figure out, but likely a package conflict with @vue/cli-service)

So adding "postcss-loader": "^5.0.0", to my dependencies solved it

[manhthang2504]

I solved it, postcss-loader was using a very old version v3 (For some reason I'm still trying to figure out, but likely a package conflict with @vue/cli-service)

So adding "postcss-loader": "^5.0.0", to my dependencies solved it

Thanks, it works for me. I upgrade Mix 6 and PostCSS 8, and it won't load plugin until finding your guide :)

[bennettblack]

I solved it, postcss-loader was using a very old version v3 (For some reason I'm still trying to figure out, but likely a package conflict with @vue/cli-service)

So adding "postcss-loader": "^5.0.0", to my dependencies solved it

Days. I spend days fighting this. Eventually ran into your solution here - this worked perfectly. Thank you so much.