Major prefixing problems

[OnkelTem]

Original issue:

Basically this doesn't work:

 @include background(url('image.png'), linear-gradient(left, red, white));

as it doesn't prefix linear-gradients.

UPDATE

Actually even this simple code works incorrectly:

@include background(url('image.png') no-repeat center center, red);

as it results to CSS code:

background: -webkit-url("/build/images/i-plus.png") no-repeat center center, red

where url is prefixed. This happens becuase of the prefixed() function:

@function prefixed($prefix, $property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
  $properties: $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9;
  $prefixed: false;
  @each $item in $properties {
    @if type-of($item) == 'string' {
      $prefixed: $prefixed or str-index($item, 'url') != 1 and str-index($item, 'rgb') != 1 and str-index($item, '#') != 1;
    } @elseif type-of($item) == 'color' {
    } @elseif $item != null {
      $prefixed: true;
    }
  }
  @return $prefixed;
}

Which erroneously supposes that any list should be prefixed:

    } @elseif $item != null {
      $prefixed: true;
    }

[OnkelTem]

While this issue has no evident solutions, as the whole vendor prefixing stuff is missed in compass-mixins, I want to provide one workaround.

Suppose we have a code like this:

@include background(url('/build/images/i-plus.png') no-repeat center center, red);

And currently it generates this crap:

background: -owg-url("/build/images/i-plus.png") no-repeat center center, red;
background: -webkit-url("/build/images/i-plus.png") no-repeat center center, red;
background: -moz-url("/build/images/i-plus.png") no-repeat center center, red;
background: -o-url("/build/images/i-plus.png") no-repeat center center, red;
-pie-background: -pie-url("/build/images/i-plus.png") no-repeat center center, red;
background: url("/build/images/i-plus.png") no-repeat center center, red;

To get it produce something sensible, we need to remove all space-separated lists and provide removed properties later, for example:

@include background(url('image.png'), red);
background-repeat: no-repeat;
background-position: center center;

Now we get:

background: url("/build/images/i-plus.png"), red;
background: url("/build/images/i-plus.png"), red;
background: url("/build/images/i-plus.png"), red;
background: url("/build/images/i-plus.png"), red;
-pie-background: url("/build/images/i-plus.png"), red;
background: url("/build/images/i-plus.png"), red;
background-repeat: no-repeat;
background-position: center center;

which is of course weird (as it repeats the same stuff many times and has -pie- garbage) but at least it works.

[OnkelTem]

Ok, forget about it. If you really want prefixes to start working - don't use background and similar mixins just to get browser support. Instead use regular CSS stuff but pipe it through the beautiful https://github.com/postcss/autoprefixer