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

Posted 4 years ago by digitalformula

I have the following in my stylesheet (generated by Gradient.app):

div.home_block_clients {
  background-color: #d9ebf9;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(217, 235, 249)), to(rgb(255, 255, 255)));
  background-image: -webkit-linear-gradient(top, rgb(217, 235, 249), rgb(255, 255, 255));
  background-image: -moz-linear-gradient(top, rgb(217, 235, 249), rgb(255, 255, 255));
  background-image: -o-linear-gradient(top, rgb(217, 235, 249), rgb(255, 255, 255));
  background-image: -ms-linear-gradient(top, rgb(217, 235, 249), rgb(255, 255, 255));
  background-image: linear-gradient(top, rgb(217, 235, 249), rgb(255, 255, 255));
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#d9ebf9', EndColorStr='#ffffff');
}

Obviously, it's covering gradient requirements for different browsers.

However, when I run gulp and it parses this file, the div.home_block_clients comes out like this:

div.home_block_clients {
  background-color: #d9ebf9;
  background-image: linear-gradient(top, #d9ebf9, #ffffff);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#d9ebf9', EndColorStr='#ffffff'); }

As you can see, it's stripped all the browser-specific CSS, e.g. -moz-linear-gradient, etc.

As I test I added this:

div.test {
  background-image: -moz-linear-gradient(top, rgb(217, 235, 249), rgb(255, 255, 255));
}

That comes out as this:

div.test { }

I assume Laravel Elixir is calling gulp with something like gulp-uncss, although I can't see where that is configured.

Any suggestions?

Please sign in or create an account to participate in this conversation.