Can't generate MS prefixes

[kilinkis]

Versions:

laravel-mix: 4.1.4 node: v10.12.0 npm: 6.11.3 OS: macOS 10.14.5

Description

I'm trying to generate the prefixes for this plugin: https://www.npmjs.com/package/tailwindcss-grid but even if I add a css rule with display: grid; in my styles.scss, it doesn't get the prefixes.

Here is similar issue: https://github.com/JeffreyWay/laravel-mix/issues/1606 but tried what they said there but had no luck

here's my webpack.mix.js

const mix = require('laravel-mix');
const autoprefixer = require('autoprefixer');
require('mix-tailwindcss');

mix
  .sourceMaps()
  .webpackConfig({ devtool: 'inline-source-map' })
  .sass('./style.scss', './style.css', { implementation: require('node-sass') })
  .options({
    processCssUrls: false,
    autoprefixer: {
      options: {
        grid: 'autoplace', // also tried: true
        browsers: ['last 2 versions', 'ie 10-11']
      }
    }
  })
  .tailwind('./tailwind.config.js');

any idea what may I be doing wrong? thanks in advance

[gchtr]

Does it work if you require autoprefixer in the postCss option and also move your autoprefixer options there?

mix.options({
  postCss: [
    require('autoprefixer')({
      grid: 'autoplace',
      browsers: ['last 2 versions', 'ie 10-11']
    })
  ]
});

[kilinkis]

hi @gchtr, thanks for your answer. It did work but got this warning

  Replace Autoprefixer browsers option to Browserslist config.
  Use browserslist key in package.json or .browserslistrc file.

  Using browsers option cause some error. Browserslist config 
  can be used for Babel, Autoprefixer, postcss-normalize and other tools.

  If you really need to use option, rename it to overrideBrowserslist.

  Learn more at:
  https://github.com/browserslist/browserslist#readme
  https://twitter.com/browserslist

but I can live with it, since I guess that's just out of the scope of this question.

thank you again!

[Zeitwaechter]

Hey @kilinkis, did you try adding it to your package.json?

Like so:

 "browserslist": {
    "development": "last 1 version",
    "production": ">2%, Firefox ESR"
 },

Or does it simply not work together with mix?

Greetings :)

[kilinkis]

hi @Zeitwaechter, I hadn't tried that, but now I did after seeing your comment, and still the same. It works, but throws that warning before compiling.

[kilinkis]

in the end what worked for me is:

mix.sass('./style.scss', './style.css').options({
  postCss: [
    require('autoprefixer')({
      grid: true,
    }),
  ],
});

or if you want to do it in mix.options, like this:

mix.options({
  postCss: [
    require('autoprefixer')({
      grid: 'no-autoplace',
      // browsers: ['>1%'],
    }),
  ],
});

the value of "grid" is up to your needs