Laravel-mix: Autoprefixer, set for IE10/11, doesn't seem to generate CSS Grid specific prefixes

[marcamos]

• Laravel Mix Version: 2.1.11
• Node Version: 6.11.0
• NPM Version: 3.10.10
• OS: macOS 10.14.4

Description:

I can't seem to get autoprefixer to write prefixed css grid selectors for IE10/11.

Using the below webpack.mix.js / html / scss, when I run npm run watch or npm run production and look at the compiled css in the inspector, there are no prefixed selectors and, as a result, IE11 isn't laying out the elements on the grid.

I can't tell if this is:

• Something that autoprefixer _doesn't_ cover, or
• configured incorrectly, or
• a bug.

Steps To Reproduce:

Here's my webpack.mix.js configuration:

let mix = require('laravel-mix')
require('laravel-mix-purgecss')

const config = {
  localUrl: 'starter.test',
  templates: [
    // ========================================================================
    // You probably need only one of the below lines, depending on which
    // platform this project is being built upon.
    // ========================================================================
    'public/**/*.+(html|php)',          // Generic .html and/or .php files [no specific platform]
    'laravel/resources/views/**/*.php', // Laravel-specific view files
    'craft/templates/**/*.+(html|twig)' // Craft-specific templates, as html and/or twig
  ]
}

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for your application, as well as bundling up your JS files.
 |
 */

mix
  .autoload({
    jquery: ['$', 'window.jQuery', 'jQuery'],
    'ally.js/ally.js': ['ally']
  })
  .js('_js/app.js', 'public/lib/js')
  .standaloneSass('_scss/app.scss', 'public/lib/css')
  .standaloneSass('_scss/print.scss', 'public/lib/css')
  .sourceMaps()
  .purgeCss({
    globs: config.templates
  })
  .options({
    processCssUrls: false,
    autoprefixer: {
      options: {
        browsers: [
          'last 20 versions', // Set really far back in hopes of generating old prefixes
          'ie 10-11'          // Getting specific
        ]
      }
    }
  })
  .browserSync({
    proxy: config.localUrl,
    files: config.templates.concat([
      'public/lib/css/app.css',   // Generated app.css file
      'public/lib/css/print.css', // Generated print.css file
      'public/lib/js/app.js',     // Generated .js file
    ])
  })

Here's the HTML:

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
</div>

Here's the Scss:

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 100px 100px 100px;
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.a {
  grid-column: 1 / 3;
  grid-row: 1;
}

.b {
  grid-column: 3;
  grid-row: 1 / 3;
}

.c {
  grid-column: 1;
  grid-row: 2;
}

.d {
  grid-column: 2;
  grid-row: 2;
}

[lineape]

autoprefixer does not add grid prefixes by default, you need to set grid: true in the autoprefixer options.

https://github.com/JeffreyWay/laravel-mix/blob/master/docs/css-preprocessors.md#postcss-plugins

Something like this should work (or at least get you going in the right direction):

mix.sass('resources/assets/sass/app.scss', 'public/css')
   .options({
        autoprefixer: {
            options: {
                grid: true,
            }
        }
   });

[marcamos]

Thanks for the assistance, @lineape! Unfortunately, it doesn't seem to work … unless it's truly something autoprefixer _won't_ do.

[lineape]

Hrm, well that _should_ work. Is the css with the display: grid being loaded with webpack in the _js/app.js, or with standaloneSass?

If it's the latter, that is the issue. If memory serves, standaloneSass doesn't get run through postcss/autoprefixer. You may need to use mix.sass which will use webpack, or use a different tool for compiling your sass.

I personally do all of my scss compilation using npm scripts and node-sass-chokidar because I couldn't get mix.standaloneSass to work with autoprefixer, and mix.sass was too slow.

[marcamos]

Ah! Brilliant, I'll switch that, see how it goes, and report back…

[marcamos]

@lineape THANK YOU. This worked!

[gchtr]

Passing an autoprefixer option in options() stopped working for me (using the latest version of Laravel Mix, 5.0.0).

mix.sass('resources/assets/sass/app.scss', 'public/css')
   .options({
        autoprefixer: {
            options: {
                grid: true,
            }
        }
   });

Somehow the Autoprefixer plugin wasn’t applied anymore. I got it working again by requiring autoprefixer in the postCss option (as described in https://github.com/JeffreyWay/laravel-mix/issues/1979#issuecomment-473195321) and passing the options for Autoprefixer there:

mix.options({
  postCss: [
    require('autoprefixer')({
      /**
       * Grid support for Autoprefixer.
       *
       * - autoplace: Enable grid translations with autoplacement support.
       * - no-autoplace: Enable grid translations with autoplacement support disabled.
       * - off: Disable all grid translations.
       *
       * @link https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer/
       * @link https://github.com/postcss/autoprefixer#grid-autoplacement-support-in-ie
       */
      grid: 'no-autoplace'
    })
  ]
});

[IOIIOOIO]

Hi I'm having a similar issue where AutoPrefixer isn't working at all, I'm not sure how I'm supposed to structure it if I'm using SASS?

Laravel Mix:

mix.js("resources/js/app.js", "public/js")
    .options({
        postCss: [
            require('autoprefixer'),
        ],
    })
    .sass("resources/sass/app.scss", "public/css/app.css")
    .mergeManifest();

Laravel Mix Version: 4.1.4
Node Version: 12.12.0
NPM Version: 6.13.0
OS: macOS 10.15.1

EDIT:

I ran npm install laravel-mix and if I look at the package-lock it seems to have updated some of the other dependencies it was dependant on. Everything working fine now.

[elgandoz]

Passing an autoprefixer option in options() stopped working for me (using the latest version of Laravel Mix, 5.0.0).

This should be fixed in the documentation, since it still displays the "old" way.

[kilinkis]

@IOIIOOIO try this:

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