Laravel-mix: Add PostCSS plugin to Mix

[pedroborges]

• Laravel Mix Version: 0.8.1
• Node Version (node -v): 0.7.0
• NPM Version (npm -v): 4.1.2
• OS: Mac OS X 10.11.6

Description:

I'm trying to use Mix on a project that requires Tachyons CSS which uses a few PostCSS plugins:

• postcss-import
• postcss-css-variables
• postcss-conditionals
• postcss-custom-media
• css-mqpacker
• autoprefixer

It seems that with I have to use either mix.sass or mix.less, is there another option for PostCSS?

I see that Mix already uses autoprefixer, can I extend the option where it's defined from the webpack.mix.js?

[luminarious]

I am also interested in setting more specific autoprefixer options, as the default somehow generates incorrect flexbox options for Safari :(

[JeffreyWay]

This is done in fecd1c9bd555a2829c3819981cefadb8d4d6c323.

mix.sass('resources/assets/sass/app.scss', 'public/css')
   .options({
        postCss: [
            require('postcss-css-variables')()
        ]
   });

[chadidi]

@JeffreyWay Can you do a tutorial on postcss + laravel mix , please .

[pedroborges]

@chadidi I have a boilerplate for the CMS I use that shows how to use both, check it out:

• package.json
• webpack.mix.js

Hope it helps you set it up for your project.

[HashandSalt]

Sorry to dig this up again, but this does seem to work, however a plugin seems to be ignoring options I am passing to it. My mix file looks like this, and i'm using mix with Kirby CMS like @pedroborges is.

const {
  mix
} = require('laravel-mix')

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your site. By default, we are compiling the Sass file
 | as well as bundling up your JS files.
 |
 | To learn more about Mix visit: https://laravel.com/docs/master/mix
 */

mix.js('src/js/site.js', 'public/assets/js')
  .sass('src/sass/site.scss', 'public/assets/css')
  .sass('src/sass/panel.scss', 'public/assets/css')
  .sourceMaps()
  .options({
    postCss: [
      require('postcss-unprefix'),
      require('autoprefixer')({
        browsers: '>0.1%'
      }),
      require('cssnano')({
          preset: ['default', {
              discardComments: {
                  removeAll: true,
              },
          }]
      }),
    ]
  })
  .browserSync({
    proxy: 'mydomain.dev',
    files: [
      "public/assets/js/**/*.js",
      "public/assets/css/**/*.css",
      "public/site/templates/*.php",
      "public/site/snippets/*.php",
      "public/content/**/*.txt"
    ]
  })

Autoprefixer seems to be accepting the option just fine, but csssnano is running in a default out the box state, and ignoring the fact that I want it to remove all comments. Am I missing something?

[HashandSalt]

Figured it out. Seems order is important. The comments are all stripped if cssnano comes first:

  .options({
    postCss: [
      require('cssnano')({
        discardComments: {
            removeAll: true,
        },
      }),
      require('postcss-unprefix'),
      require('autoprefixer')({
        browsers: '>0.1%'
      }),
    ]
  })