Too much vendor prefixes

[KittyGiraudel]

While I think it's a good idea to have a mixin to prefix properties that need to be prefixed, it should be customizable.

The only place it's being used as of today is for translate transforms in align() mixin. But, it outputs -moz- and -o- lines which are not used anymore (see CanIUse).

Either you decide to prefix things manually to make sure only the required prefixes are being dumped, or you update the prefixer mixin to allow it to dump only what's needed:

@mixin jeet-prefixer($property, $value, $prefixes: webkit moz ms o) {
  @each $prefix in $prefixes {
    #{'-' + $prefix + '-' + $property}: $value;
  }

  #{$property}: $value;
}

And you use it like this:

@include jeet-prefixer(transform, translateX(-50%), webkit ms);

Since you only use it for CSS transforms, you could even make the $prefixes parameter default to webkit ms, to save you from passing this argument every time.

[corysimmons]

👍

[jescalan]

Alternately, remove the prefixes and let other libraries like autoprefixer take care of it...........

[KittyGiraudel]

This would make Jeet dependent on Autoprefixer which is a rather bad idea in my opinion.

What you could do is make prefixes optional with a global configuration variable.

$jeet-prefixes: true !default;

@mixin prefixer($property, $value, $vendors: webkit moz ms o) {
  @if $vendors and $jeet-prefixes {
    @each $vendor in $vendors {
      #{'-' + $vendor + '-' + $property}: $value;
    }
  }

  #{$property}: $value;
}

[kylemac]

What you describe as being dependent could also be described as being modular. Autoprefixer's job is to auto-prefix things and Jeet's job (in my opinion) is to be an outstanding grid. Scope of a project is certainly a gray area, that's just my two cents.

[KittyGiraudel]

The problem with not including prefixes is you force people that do not use Autoprefixer to add them manually. Basically, they'll have to do this kind of stuff in their own stylesheet:

.element {
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  @include align("horizontal");
}

Needless to say this is not a solution.

[corysimmons]

@kylemac I completely agree and I'm the biggest fanatic of Autoprefixer, but as @hugogiraudel said, forcing people to use other tools isn't the best solution.

I completely get your side of things and trying to keep Jeet as grid specific as possible, and perhaps helpers like align and such should be put into Axis instead, but these are style-specific things, it's not like the days of old where we had typography, an html boilerplate, and a bunch of other stuff - and I don't intend on letting it get back that way.

Maybe we can plan to port this particular function out but I really do think we should prefix things that need it and are part of the grid itself (although nothing else really needs it).

Another point, Autoprefixer won't double up on these. If you use it as well, it will simply do it's typical Autoprefixer thing and erase the ones needed and keep/add necessary ones.

[KittyGiraudel]

Another point, Autoprefixer won't double up on these. If you use it as well, it will simply do it's typical Autoprefixer thing and erase the ones needed and keep/add necessary ones.

So let's prefix no matter what? Or a conf variable to enable/disabled prefixes? What do you prefer?

[corysimmons]

Prefix no matter what. If they're using anything else like Autoprefixer, it won't double up on it, it will simply see the prefixes are there and ignore them, or if the prefixes are wrong, it will replace them with the correct ones. There's literally no downside to prefixing things that need prefixed.

[KittyGiraudel]

Agreed. Fixed in #229.

[jescalan]

The problem with not including prefixes is you force people that do not use Autoprefixer to add them manually

False. You force people that are building for older browsers to add them manually (or find a way to add them through a build pipeline, a lot more common of an option). And building for older browsers / handling prefixes is not Jeet's purpose. Jeet's purpose is to be a grid. If you are seeking a grid and a way to handle prefixes, you should combine two tools, one that handles the grid and another that handles prefixes - not shove a halfhearted implementation of one into the other and call it a day. I'll say no more here, but you can see my thoughts in an earlier discussion.

[KittyGiraudel]

And building for older browsers

I suppose you're lucky to work in a world where Chrome 35, Safari 7 and Opera 22 are older browsers. :)

[VinSpee]

I'm with @Jenius here. Leave to prefixes to tools that do it perfectly.

[lionel-m]

I'm with @Jenius here. Leave to prefixes to tools that do it perfectly.

👍

[ain]

As I again brought it up in #246:

I'm with @Jenius here. Leave to prefixes to tools that do it perfectly.

👍

[samccone]

closing, this is not a responsibility of jeet.

[corysimmons]

👍