ai / autoprefixer-core Goto Github PK

My config:

browsers: "> 1%, last 2 versions, Firefox ESR, Opera 12.1, IE 9, Android >= 4"

The problem is, that old Android versions support old syntax for flexbox:

display: -webkit-box

so this piece of code is not produced by autoprefixer. Moreover, if I try to add this line manualy, autoprefixer removes it.

it's not a critical bug, but without unnecessary properties had better:

Input:

@keyframes animation  {
    0% {
        transform: translateY(0); 
    }
    100% {
        transform: translateY(50px);
    }
}

Output:

@-webkit-keyframes animation {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0); /* not need */
    }
    100% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px); /* not need */
    }
}
@keyframes animation {
    0% {
        -webkit-transform: translateY(0); /* not need */
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(50px); /* not need */
        transform: translateY(50px);
    }
}

I've read at http://jonibologna.com/word-wrapping-woes/ that the CSS property word-wrap has been renamed to overflow-wrap in the spec (http://www.w3.org/TR/css3-text/#overflow-wrap). The new name has relatively poor browser support: http://caniuse.com/#search=overflow-wrap

I I know that this issue is not technically about prefixing but very similar in spirit. Could Autoprefixer complement overflow-wrap properties with the equivalent word-wrap property?

Note that the spec says:

For legacy reasons, UAs must treat ‘word-wrap’ as an alternate name for the ‘overflow-wrap’ property, as if it were a shorthand of ‘overflow-wrap’.

So in theory it would be fine to just use word-wrap forever and just ignore its new name. But that does not seem right to me. ;-)

Sourcemaps seem to go out of sync when ran through autoprefixer-core.

I've set up a testcase at: https://github.com/darylldoyle/autoprefixer-test

Would it be possible to build the standalone version of autoprefixer on every release, and add a bower.json manifest, so that autoprefixer can be consumed as a bower dependency?

Thank you in advance.

What do the maintainers here think about emitting warnings (or maybe even injecting them as comments in the processed CSS?) when the input uses a CSS feature that's simply not supported by the one or more of the selected browsers?

I'm guessing this is beyond the scope of the problem autoprefixer wants to solve, but given how well suited this (excellent) codebase is to doing this, I just thought I'd ask. I'm gonna fork and work on this either way.

When building with the latest release v5.1.6, I got the error below:
No compatible version found: caniuse-db@'>=1.0.30000077 <2.0.0'

i have t.less:

p {
transform: scaleX(0.5);
}

Then i run lessc less/t.less t.css --source-map --source-map-map-inline --source-map-less-inline

Now my t.css contains the following content:

p {
  transform: scaleX(0.5);
}
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxlc3MvdC5sZXNzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0EsV0FBVyxXQUFYIiwiZmlsZSI6InQuY3NzIiwic291cmNlc0NvbnRlbnQiOlsicCB7XG50cmFuc2Zvcm06IHNjYWxlWCgwLjUpO1xufVxuIl19 */

the base encode string correspondence with:

{"version":3,"sources":["less/t.less"],"names":[],"mappings":"AAAA;EACA,WAAW,WAAX","file":"t.css","sourcesContent":["p {\ntransform: scaleX(0.5);\n}\n"]}

Then i run:

fs = require('fs')
fs.readFile('t.css', 'utf8', function (err,css) {
  if (err) {
    return console.log(err);
  }

var autoprefixer = require('autoprefixer-core');
var prefixed = autoprefixer.process(css,{map:{inline:true}}).css;

console.log(prefixed);
});

The above script outputs:

/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxlc3MvdC5sZXNzIiwidC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDQSxnQ0FBQTtNQUFBLDRCQUFBO1VBQUEsd0JBQUE7RUNDQyIsImZpbGUiOiJ0by5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJwIHtcbnRyYW5zZm9ybTogc2NhbGVYKDAuNSk7XG59XG4iLCJwIHtcbiAgdHJhbnNmb3JtOiBzY2FsZVgoMC41KTtcbn1cbi8qIyBzb3VyY2VNYXBwaW5nVVJMPWRhdGE6YXBwbGljYXRpb24vanNvbjtiYXNlNjQsZXlKMlpYSnphVzl1SWpvekxDSnpiM1Z5WTJWeklqcGJJbXhsYzNNdmRDNXNaWE56SWwwc0ltNWhiV1Z6SWpwYlhTd2liV0Z3Y0dsdVozTWlPaUpCUVVGQk8wVkJRMEVzVjBGQlZ5eFhRVUZZSWl3aVptbHNaU0k2SW5RdVkzTnpJaXdpYzI5MWNtTmxjME52Ym5SbGJuUWlPbHNpY0NCN1hHNTBjbUZ1YzJadmNtMDZJSE5qWVd4bFdDZ3dMalVwTzF4dWZWeHVJbDE5ICovIl19 */

The base64 encoded part now seems to contain two sourcemaps:

{"version":3,"sources":["less/t.less","t.css"],"names":[],"mappings":"AAAA;EACA,gCAAA;MAAA,4BAAA;UAAA,wBAAA;ECCC","file":"to.css","sourcesContent":["p {\ntransform: scaleX(0.5);\n}\n","p {\n  transform: scaleX(0.5);\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxlc3MvdC5sZXNzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0EsV0FBVyxXQUFYIiwiZmlsZSI6InQuY3NzIiwic291cmNlc0NvbnRlbnQiOlsicCB7XG50cmFuc2Zvcm06IHNjYWxlWCgwLjUpO1xufVxuIl19 */"]}

Related issues:

• gulp-community/gulp-less#126
• http://stackoverflow.com/a/27830905/1596547 (comments on the answer)

If I use a site like:

http://the-echoplex.net/flexyboxes/

When I add

display: flex

It adds the following prefixes:

display: -ms-flexbox;
display: -webkit-flex;
display: flex;

It does not include display: -webkit-box which breaks my container layout.

Instead of my boxes fitting inside my container, when -webkit-box is added, the boxes attempt to stretch out my container...only in Safari (using 8.0.5).

Is there a way to change this with Autoprefixer?

any chance of another refactor that only exposes an autoprefixer plugin?

I'm trying to get autoprefixer to play nice with my current gulp task for compiling sass. It seems to work find if I pass it an uncompressed file. But if I pass it the minified output from gulp-ruby-sass, nothing happens. Here's the task:

gulp.task('sass', function() {
        gulp.src('app/webroot/scss/**/*.scss')
        .pipe(sass({style: 'compressed'}))
        .pipe(gulp.dest("app/webroot/css"));

        //autoprifixer
        gulp.src('app/webroot/css/style.css')
        .pipe(autoprefixer({
          browsers: ['last 3 versions'],
          cascade: false
        }))
        .pipe(gulp.dest('app/webroot/css'));
});

What am I doing wrong?

Feature Request

It would be great if there was a way to add you're own prefixes in case they are not yet in the caniuse database.

For instance :autofill is not currently in the caniuse database, so I have to add the prefix manually(:-webkit-autofill).

It could something as simple as an object in the options object:

autoprefixer({
  customPrefixes: {
    'autofill': [ '-webkit-autofill', '-otherprefix-autofill' ]
  }
});

This is not a real bug, but more a totally unexpected generated code style.

Input

* {
  transition: transform 1s;
}

@keyframes spin {
  0% { transform: rotate(0deg) }
  100% { transform: rotate(360deg) }
}

Expected output (output for v4.x)

* {
  -webkit-transition: -webkit-transform 1s;
          transition: transform 1s;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg) }
}

@keyframes spin {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg) }
}

Actual output

* {
  -webkit-transition: -webkit-transform 1s;
          transition: transform 1s;
}

@-webkit-keyframes spin {

  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spin {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg) }
}

Let my comment the unexpected change due to 5.0 upgrade

@-webkit-keyframes spin {
/* new \n. Why ?*/
  0% {
    -webkit-transform: rotate(0deg); /*why don't you just do like it was before? You should not add some \n and weird whitespace transformation when it's not asked. */
            transform: rotate(0deg);
  } 
/* another new \n. Same question ?*/
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

/* also after that you edit the normal keyframes correctly. Even more weird :) */

I'm not sure if it's intentional or not, but it's pretty weird to bring this kind of unexpected output.

My use case:

At my work we only need to support ['last 2 versions', 'Android 4.3'].

This works well except for one property: opacity.

According to caniuse data on opacity support, it should not be getting prefixed according to the above rules.

And yet, every opacity rule gets the -ms-filter prefix
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=#)

Other rules i've tried also output the same thing, it seems that no matter what you tell autoprefixer you get the -ms-filter added.

Sorry for the confusing title but here is an example:

div {
    transition-property: filter;
}

This will output:

div {
    -webkit-transition-property: -webkit-filter, filter;
            transition-property: filter;
}

The result is that browsers that support transition-property and -webkit-filter will use the second declaration, thus not getting -webkit-filter.

The output should probably be:

div {
    -webkit-transition-property: -webkit-filter, filter;
            transition-property: -webkit-filter, filter;
}

since there is no guarantee that the same prefix is needed for both sides of the declaration.

All the browsers that support image-set() only support its prefixed version. Can this be added to autoprefixer?

Support: http://caniuse.com/#feat=css-image-set
Test page: http://cloudfour.com/examples/image-set/
Fallback: https://github.com/alex499/postcss-image-set (which at the moment doesn't seem to make much sense since there's no autoprefixer)

I am observing what seems to be a bug from an older vesrion of autoprefixer-core in the current version of gulp-autoprefixer. Everything else is working a-OK.

Source
background: linear-gradient(45deg, #517EA3, #326B9C);

Output
background: linear, 45deg, #517EA3, #326B9C;

Versions

  "name": "gulp-autoprefixer",
  "version": "2.0.0",

  "name": "autoprefixer-core",
  "version": "4.0.2",

In the 0.2.0 version of browserslist there's a leaked global, normalizeVersion. It was fixed in 0.3.1but dependency in autoprefixer-core is locked to ~0.2.0.

Here's my gruntfile.js:

module.exports = function(grunt) {

// Load Grunt tasks declared in the package.json file
require('load-grunt-tasks')(grunt);

grunt.initConfig({
    sass: {
    options: {
        sourceMap: true
    },
        dist: {
            files: {
                'user/themes/br/css-compiled/bobmess.css': 'user/themes/br/scss/bobmess.scss'
            }
        }
    },

    autoprefixer: {
        dist: {
            src: 'user/themes/br/css-compiled/bobmess.css'
        }
    },

    watch: {
        scss: {
            files: ['user/themes/br/scss/*.scss'],
            tasks: ['sass', 'autoprefixer'],
        },

        livereload: {
            files: ['user/**/*.{css,md,twig,js,yaml}'],
            options: {
                livereload: true
            }
        }
    }
});

grunt.registerTask('default', ['watch']);
};

Running it creates a css file and a source map with LibSass via grunt-sass. But Chrome does not recognize the source map. If I comment out the autoprefixer task, the source map is recognized by Chrome. I've tried it with grunt-contrib-sass (which uses Ruby Sass) and I find the same behavior.

It seems as if autoprefixer is messing up the source map, or the reference to it, somehow.

https://github.com/rofrol/moz-flex-direction-autoprefixer-test

Using gulp-autoprefixer, I am not getting display: -webkit-flex; or any of the other flexbox related prefixes.

The prefixing doesnt work at all

On the latest npm release of autoprefixer, using filter as a transition property doesn't seem to be generating a prefixed variant:

Input:

transition: filter 0.3s ease-in-out;

Output:

transition: filter 0.3s ease-in-out;
/* prefixed transition variants */

Expected Output:

transition: filter 0.3s ease-in-out, -webkit-filter 0.3s ease-in-out, -moz-filter 0.3s ease-in-out;
/* prefixed transition variants */

https://www.polymer-project.org/0.9/docs/devguide/styling.html#custom-css-mixins
--my-toolbar-theme: {
background-color: green;
border-radius: 4px;
border: 1px solid gray;
}

[13:59:53] gulp-ruby-sass: write main.css
[13:59:53] gulp-ruby-sass: write main.css.map

events.js:85
throw er; // Unhandled 'error' event
^
Error: Can't parse CSS: Unexpected { at line 65:23
at Transform.stream._transform (/Users/administrador/projects/net-09/node_modules/gulp-autoprefixer/index.js:67:30)
at Transform._read (_stream_transform.js:179:10)
at Transform._write (_stream_transform.js:167:12)
at doWrite (_stream_writable.js:301:12)
at writeOrBuffer (_stream_writable.js:288:5)
at Transform.Writable.write (_stream_writable.js:217:11)
at Transform.ondata (_stream_readable.js:540:20)
at Transform.emit (events.js:107:17)
at readableAddChunk (_stream_readable.js:163:16)
at Transform.Readable.push (_stream_readable.js:126:10)

if you'll create style:

select {
    appearence: none;
}

it doesn't add any styles with prefixes, but according to http://caniuse.com/#search=appearance it should

Hello,

Stylus:
translate scale(1) translate(-10px,0px) opacity(1)

it renders: (my settings are: .pipe(autoprefixer('Last 2 versions', 'ie 9')))

-webkit-transform: scale(0) translate(-10px, 0px) filter: alpha(opacity=100);
-ms-transform: scale(0) translate(-10px, 0px) filter: alpha(opacity=100);
transform: scale(0) translate(-10px, 0px) filter: alpha(opacity=100);

opacity here should not be transformed into filter: alpha ...

Is this even possible to solve ..

Thank you in advance ...

Greetings

If I execute this (as mentioned in README):

info = autoprefixer({ browsers: ['last 1 version'] }).info();
console.log(info);

I always got browsers and prefixes for default option. Is it intended?

I use gulp-postcss, postcss-import and autoprefixer-core.
My CSS is one line: @import "suitcss-base"; (from node_modules)
I was super happy to see postcss-import working again, but know autoprefixer-core broke apparently.

Anyway, here's the stack trace:

events.js:72
        throw er; // Unhandled 'error' event
              ^
TypeError: Cannot call method 'indexOf' of undefined
    at /path-to/node_modules/autoprefixer-core/lib/processor.js:112:31
    at /path-to/node_modules/gulp-postcss/node_modules/postcss/lib/container.js:190:28
    at /path-to/node_modules/postcss-import/node_modules/postcss/lib/container.js:155:24
    at Rule.each (/path-to/node_modules/postcss-import/node_modules/postcss/lib/container.js:128:20)
    at Rule.eachInside (/path-to/node_modules/postcss-import/node_modules/postcss/lib/container.js:154:21)
    at /path-to/node_modules/gulp-postcss/node_modules/postcss/lib/container.js:158:28
    at Root.each (/path-to/node_modules/gulp-postcss/node_modules/postcss/lib/container.js:128:20)
    at Root.eachInside (/path-to/node_modules/gulp-postcss/node_modules/postcss/lib/container.js:154:21)
    at Root.eachDecl (/path-to/node_modules/gulp-postcss/node_modules/postcss/lib/container.js:188:23)
    at Processor.remove (/path-to/node_modules/autoprefixer-core/lib/processor.js:99:18)

(Maybe it's time to let the code mature a little bit. Just saying.)

I've just setup the following Gulp task for SASS, using gulp-autoprefixer which causing a problem handling font-awesome icon "content".

The way it works (without gulp-autoprefixer)

gulp.task('sass', function() {

  gulp.src(['./src/vendor/style.scss',
        './src/app/style.scss'])
      .pipe(sourcemaps.init())
      .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
      .pipe(concat('style.css'))
      .pipe(sourcemaps.write('./'))
      .pipe(gulp.dest('./public/css'));

});

That works fine and it outputs the result I expect.

An example of the user-icon (without gulp-autoprefixer):

.fa-user:before {
    content: "";
}

The way it breaks (with gulp-autoprefixer)

If I now add autoprefixer to this task - like:

gulp.task('sass', function() {

  gulp.src(['./src/vendor/style.scss',
        './src/app/style.scss'])
      .pipe(sourcemaps.init())
      .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
      .pipe(concat('style.css'))
      .pipe(prefix({
        browsers: ['> 1%', 'last 2 versions', 'Firefox ESR', 'Opera 12.1'],
        cascade: false
      }))
      .pipe(sourcemaps.write('./'))
      .pipe(gulp.dest('./public/css'));

});

The output breaks now. This is what I get for fa-user (with gulp-autoprefixer):

.fa-user:before {
    content: "";
}

It seems like there is a problem with the charset (UTF-8 / UTF-16).

Is there any possibility to avoid that behaviour with gulp-autoprefixer?

Linear gradients are coming out like this: background: linear, 45deg, #235aae, #6db8d7;

Is imposible to use -webkit-line-clamp property because the autoprefixer removes 'display: -webkit-box'.

.foo {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}

This kind of opinionated formatting shouldn't be the default. Always nicer when a tool's API has false defaults so we're not left having to disable features each time.

I'm waiting for autoprefixer 4.0 release to push cssnext with postcss 3 (to avoid warning everywhere). Any idea when you will release it ? Need some help ?

I don't really know much of these tools, but there's this package that i use. And it uses gulp-autoprefixer. It uses v0.0.10 from the old repository. A friend uses the same version as me, same code, and doesn't get the error. Difference: me=windows, he=osx

Code causing the bug:

        @-moz-document url-prefix() {
            .table-block {
                line-height: 1.245;
            }
        }

error:

events.js:72
        throw er; // Unhandled 'error' event
              ^
Error in plugin 'gulp-autoprefixer'
Can't parse CSS: Unexpected { in decls at line 3030:31
    at Transform.stream._transform (C:\Users\CTX\AppData\Roaming\npm\node_modules\headstart\node_modules\gulp-autoprefixer\index.js:66:30)
    at Transform._read (_stream_transform.js:179:10)
    at Transform._write (_stream_transform.js:167:12)
    at doWrite (_stream_writable.js:221:10)
    at writeOrBuffer (_stream_writable.js:211:5)
    at Transform.Writable.write (_stream_writable.js:180:11)
    at write (C:\Users\CTX\AppData\Roaming\npm\node_modules\headstart\node_modules\gulp-if\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:623:24)
    at flow (C:\Users\CTX\AppData\Roaming\npm\node_modules\headstart\node_modules\gulp-if\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:632:7)
    at Transform.pipeOnReadable (C:\Users\CTX\AppData\Roaming\npm\node_modules\headstart\node_modules\gulp-if\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:664:5)
    at Transform.EventEmitter.emit (events.js:92:17)

I'm running into an issue when trying to utilize gulp-sourcemaps, gulp-autoprefixer and gulp-minify-css together. Here's my gulp task:

var gulp = require('gulp'),
$ = require('gulp-load-plugins')();

gulp.task('test', function()
{
return gulp.src('app/assets/scss/main.scss')
.pipe($.sourcemaps.init())
.pipe($.sass({
includePaths: ['node_modules/bootstrap-sass/assets/stylesheets/'],
outputStyle: 'expanded'
}))
.pipe($.autoprefixer({
browsers: ['last 2 versions', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4']
}))
.pipe($.minifyCss())
.pipe($.sourcemaps.write('./maps', {
includeContent: false,
sourceRoot: '.'
}))
.pipe(gulp.dest('dist/assets/css'));
});

This is the error I get:

TypeError: Cannot read property '0' of null
at findNameRoot (/var/www/node_modules/gulp-minify-css/node_modules/clean-css/lib/properties/extractor.js:47:56)
at extract (/var/www/node_modules/gulp-minify-css/node_modules/clean-css/lib/properties/extractor.js:17:22)
at AdvancedOptimizer.restructure (/var/www/node_modules/gulp-minify-css/node_modules/clean-css/lib/selectors/optimizers/advanced.js:598:22)
at _optimize (/var/www/node_modules/gulp-minify-css/node_modules/clean-css/lib/selectors/optimizers/advanced.js:722:12)
at AdvancedOptimizer.optimize (/var/www/node_modules/gulp-minify-css/node_modules/clean-css/lib/selectors/optimizers/advanced.js:734:3)
at SelectorsOptimizer.process (/var/www/node_modules/gulp-minify-css/node_modules/clean-css/lib/selectors/optimizer.js:15:55)
at /var/www/node_modules/gulp-minify-css/node_modules/clean-css/lib/clean.js:174:31
at run (/var/www/node_modules/gulp-minify-css/node_modules/clean-css/lib/clean.js:153:7)
at minify (/var/www/node_modules/gulp-minify-css/node_modules/clean-css/lib/clean.js:165:3)
at whenSourceMapReady (/var/www/node_modules/gulp-minify-css/node_modules/clean-css/lib/clean.js:90:7)

If I change "safari 5" to "safari 6" in the gulp-autoprefixer browsers array, the task runs fine. Any ideas?

I use it to get the default browsers.

console.log(require('autoprefixer-core').default);
//=> undefined

Hey,

4 minutes ago I installed gulp-autoprefixer and get the deps of gulp-autoprefixer I get the latest (5.1.8) version of autoprefixer-core.

Unfortunately my gulp stop working:

module.js:338
    throw err;
    ^
Error: Cannot find module 'browserslist'
    at Function.Module._resolveFilename (module.js:336:15)
    at Function.Module._load (module.js:278:25)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/myproject/node_modules/gulp-autoprefixer/node_modules/autoprefixer-core/lib/autoprefixer.js:6:18)
    at Object.<anonymous> (/myproject//node_modules/gulp-autoprefixer/node_modules/autoprefixer-core/lib/autoprefixer.js:109:4)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)

After I install v5.1.7 manually It works again.
I did this with:

> cd node_modules/gulp-autoprefixer
> npm install [email protected]

Using Autoprefixer with Node.js is documented to work like this:

var autoprefixer = require('autoprefixer-core');
var postcss      = require('postcss');

postcss([ autoprefixer ]).process(css).then(function (result) {
    result.warnings().forEach(function (warn) {
        console.warn(warn.toString());
    });
    console.log(result.css);
});

but I wasn't able to figure out what the object required by process(), css actually is. I tried using the results of fs.readFile() on a CSS file, but that didn't seem to work. I asked the question on Stack Overflow, and after two days it has an upvote but no answer, so it seems others are also unsure how to use this.

test.css:

.test {
    background-image: linear-gradient(black 0px, white 100px);
}

test.prefixed.css

.test {
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0px, black), color-stop(100px, white));
    background-image: -webkit-linear-gradient(black 0px, white 100px);
    background-image: linear-gradient(black 0px, white 100px);
}

-webkit-gradient's color-stop function does not accept pixels.

From Safari CSS Reference:

color-stop(stop, color)
...
stop

The point in the gradient that should have the specified color value. Represented as a percentage or a decimal value between 0 and 1.

I am using the gulp-autoprefixer package, which is using autoprefixer-core. I originally reported this issue to the devs of gulp-autoprefixer, but was told to report it here.

Based on information on caniuse.com for the linear-gradient CSS property, it should be prefixed for Safari 4 through 6.1 (Safari versions 4-5 have partial support for this property).

The following autoprefixer setup:

.pipe($.autoprefixer({browsers: ['Explorer > 10','Firefox > 25', 'Safari > 6']}))

applied to the following CSS:

.navBar {
    background: linear-gradient(to right, #ba0c2f 0, #410706 100%);
};

generates the following CSS, which should include a webkit prefix, but it does not.

.navBar {
  background: linear-gradient(to right, #ba0c2f 0, #410706 100%);
}

If I alter the autoprefixer setup to be:

.pipe($.autoprefixer({browsers: ['Explorer > 10','Firefox > 25', 'Safari > 5']}))

the css appears to be prefixed as it should be:

.navBar {
  background: -webkit-linear-gradient(left, #ba0c2f 0, #410706 100%);
  background: linear-gradient(to right, #ba0c2f 0, #410706 100%);
}

Is this a problem with autoprefixer, or is the information about prefixing for Safari 6 for the linear-gradient property inaccurate on caniuse.com?

Looks the module still works, but as it's installed alongside PostCSS there's nothing stopping the 5.0.0 bump, which results in these warnings for me:

Container#eachAtRule is deprecated. Use Container#walkAtRules instead.
Container#eachRule is deprecated. Use Container#walkRules instead.
Container#eachDecl is deprecated. Use Container#walkDecls instead.
Node#style() is deprecated. Use Node#raw()
Node#before is deprecated. Use Node#raws.before
Node#_value was deprecated. Use Node#raws.value

https://github.com/postcss/postcss/blob/master/Runner%20Guidelines.md

Testing code:

.test {
  background-image: -webkit-linear-gradient(rgb(78,159,234) 0%,rgb(65,126,210) 100%);
  background-image: linear-gradient(rgb(78,159,234) 0%,rgb(65,126,210) 100%);
}

.test2 {
  background-image: -webkit-linear-gradient(top,  rgb(78,159,234) 0%, rgb(69,132,221) 100%);
  background-image:linear-gradient(rgb(78,159,234) 0%,rgb(69,132,221) 100%);
}

Incorrect result:

.test {
  background-image: -webkit-linear-gradient(rgb(78,159,234) 0%,rgb(65,126,210) 100%);
  background-image: -webkit-linear-gradient(rgb(78,159,234) 0%, rgb(65,126,210) 100%);
  background-image: linear-gradient(rgb(78,159,234) 0%,rgb(65,126,210) 100%);
}

.test2 {
  background-image: -webkit-linear-gradient(top,  rgb(78,159,234) 0%, rgb(69,132,221) 100%);
  background-image:-webkit-linear-gradient(rgb(78,159,234) 0%, rgb(69,132,221) 100%);
  background-image:linear-gradient(rgb(78,159,234) 0%,rgb(69,132,221) 100%);
}

Duplicated CSS rule

According to https://developer.mozilla.org/en-US/docs/Web/CSS/border-image you combine the parameters slice, width and outset with "/"

.box { border-image: url(/images/border.png) 18 / 18px / 5px repeat; }

autoprefixer converts this data to

.box { border-image: url(/images/border.png) 0.2px repeat; }

This is the result doing the math on these 3 numbers. I don't want to calculate anything, but define width and outset additionally to slice. Right now I am working around this thing by specifying explicitly the width and outset.

If there are unicode symbols anywhere in the Sass (eg: pseudo element content property), it will cause the sourcemap to not appear in Chrome when using gulp-sourcemaps with gulp-sass + autoprefixer.

It seems to be just the symbols, if you replace them with hex representations then sourcemaps work.
It also appears to be autoprefixer related as compiling with symbols but without autoprefixer does show the sourcemap correctly.

I made a reduced test case which demonstrates the issue and has more detail here MethodGrab/gulp-sourcemaps-test-case.