Why does Laravel Elixir with gulp remove some of my CSS?

@digitalformula You're hitting the same elixir feature-issue that I did. It runs autoprefixer on all stylesheets. Not configurable, no way to disable it. I have to comment it out everytime I update elixir. It's quite annoying.

It's in node_modules/laravel-elixir/ingredients/commands/CompileCSS.js line .pipe(plugins.autoprefixer()).

It's stripped out as a convenience. You don't need those vendor prefixes for gradients. Just use the official syntax.

@JeffreyWay I understand that elixir is a collection of opinionated defaults rather than a generic build tool, but then even with autoprefixer one could change which browsers to target if there was a way to pass some options to it. We all work on different projects but the list of supported browsers is usually one of the requirements.

We can make the browser prefixing option configurable if it would help.

But, really, Firefox and Chrome have supported the non-prefixed version for quite a long time now.

So, a few things.

1. I was specifying linear-gradient incorrectly, hence why autoprefixer removed it.
2. The above is true because I was relying on the output from Gradient.app.
3. Boohoo for not keeping up with browser support ... no excuse other than not doing this often enough.

Thanks to both @constb & @JeffreyWay for the replies - problem is solved, now. :)

@JeffreyWay Well, some of us still have to support IE8 and antique versions of Safari, you know. In my case I use lesshat library to generate prefixes. Unfortunately it creates styles for @keyframes in a way that breaks autoprefixer.

Maybe add autoprefixer key to less compiler options with either a string value that defines list of supported browsers in autoprefixer's format and optional 'off' keyword to turn it off completely?

I'm having issues with autoprefixer too :

I use @keyframes in order to animate a background-color, but autoprefixer drops the -moz and -o prefixes (which are still mandatory).

I tried to find a way to pass gulp-autoprefixer some options, but failed.

The workaround I found is to store all my keyframes animations in a standalone css file which is not processed by less (and autoprefixer), but that's not really productive.

So because you offered, @JeffreyWay, I would be glad if prefixing options were configurable. My workflow would be simplier and my animations and css properties would really be happy to get together again ;)

But, really, Firefox and Chrome have supported the non-prefixed version for quite a long time now. @JeffreyWay

Phew. When did the world move to just Firefox and Chrome? :)

As someone building applications for a African and Asian markets, Opera Mini is our most used browser. With our European clients, it's IE 8. My concern is... isn't the point of prefixing to ensure that we don't hit this issue?

@kevinjohn - Well IE8 never supported prefixes... Notice that autoprefixer doesn't strip out filters.

Did Opera Mini ever support CSS gradients?

I suppose my concern, probably phrase very poorly, is not in the specific but the abstract.

Removing code to make as fully compatible as possible, and not making a config to disable, simply because [Browser X] doesn't need it is a hark back to the web's dark old days :) - @JeffreyWay

There have been two things I've loved about Laravel so far:

1. Where decisions have been made, there has been the option to over write them
2. This is the first laravel thread I've ever seen mentioning a browser name ;-)

Just my two cents, from a guy who's hasn't had Chrome or Firefox as the most used browser on any given month on any work site in the last 5 years.

@kevinjohn - I'm not saying that we should exclude browsers that aren't Firefox or Chrome. I'm saying that prefixing is irrelevant, when it comes to, say, Internet Explorer.

@JeffreyWay IE has always been using -ms- prefix, at least 9 and 10 do. Autoprefixer decides which to put into action according to its 'browsers' settings. Default is I think '> 1%, last 2 versions, Firefox ESR, Opera 12.1' which is okay for most applications, but not for everyone.

I have the same issue.

In my bootstrap theme, when compiling through Laravel Exlixir, it converts:

background-image: -moz-linear-gradient(0deg, #3e69fe 0%, #4cd4e3 100%);
background-image: -webkit-linear-gradient(0deg, #3e69fe 0%, #4cd4e3 100%);
background-image: -ms-linear-gradient(0deg, #3e69fe 0%, #4cd4e3 100%);

To:

background-image: -ms-linear-gradient(0deg, #3e69fe 0%, #4cd4e3 100%);

And that does for some reason not work in latest version of Google Chrome.

@JeffreyWay what do?