Vendor Prefixing for both Property and Value in Stylus

Question

Using Stylus CSS preprocessor, I'm trying to write a mixin that will handle vendor-prefixing of the transition property and its transform value, and be able to accept multiple values.

Here's an example of the output I'm looking for:

-webkit-transition:  opacity .2s linear .2s, -webkit-transform .2s linear .2s, left 0s linear .45s;
-moz-transition:     opacity .2s linear .2s, -moz-transform    .2s linear .2s, left 0s linear .45s;
-ms-transition:      opacity .2s linear .2s, -ms-transform     .2s linear .2s, left 0s linear .45s;
-o-transition:       opacity .2s linear .2s, -o-transform      .2s linear .2s, left 0s linear .45s;
transition:          opacity .2s linear .2s, transform         .2s linear .2s, left 0s linear .45s;

Note the vendor prefixes on both transition and transform.

Answer 1

While you can achieve this in stylus like this:

transition()
  fix_transform($values, $vendor)
    $new_values = ()
    if match(',', '%s' % $values)
      for $val in $values
        if length($new_values) > 0
          $new_values = $new_values, fix_transform($val, $vendor)
        else
          $new_values = fix_transform($val, $vendor)
    else
      for $val in $values
        $new_val = $val
        if $val == transform
          $new_val = unquote($vendor + $new_val)
        push($new_values, $new_val)

    return $new_values

  for $vendor in ('-webkit-' '-moz-' '-ms-' '-o-' '')
    {$vendor}transiton: fix_transform(arguments, $vendor)

I'd recommend you not to use Stylus itself to add prefixes, but to use a specialized tool like autoprefixer for this.

There is actually a Stylus autoprefixer plugin — that would be the best to use with Stylus.