sindresorhus / gulp-autoprefixer Goto Github PK

View Code? Open in Web Editor NEW

689.0 25.0 50.0 40 KB

Prefix CSS

License: MIT License

JavaScript 100.00%

autoprefixer javascript postcss prefix-css nodejs gulp-plugin css

gulp-autoprefixer's People

Stargazers

Watchers

gulp-autoprefixer's Issues

linear-gradient not compiling correctly

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

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

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

Bug with Autoprefixer : Error! no writecb in Transform class

Hello,

I am writing to report a bug :

Error! no writecb in Transform class

Possibly related with Stylus for Gulp ?

I compile errors with the new version of Autoprefixer (3.1.0). I downgraded to a previous version and it works again (2.3.1).

The package.json (stable):

"dependencies": {
    "gulp": "^3.9.0"
  },
"devDependencies": {
  "gulp-autoprefixer": "^2.3.1",
  "gulp-concat": "^2.6.0",
  "gulp-connect": "^2.2.0",
  "gulp-header": "^1.7.1",
  "gulp-iconfont": "^5.0.0",
  "gulp-imagemin": "^2.4.0",
  "gulp-jade": "^1.1.0",
  "gulp-jshint": "^1.11.2",
  "gulp-markdown": "^1.2.0",
  "gulp-plumber": "^1.0.1",
  "gulp-rename": "^1.2.2",
  "gulp-replace": "^0.5.4",
  "gulp-ruby-sass": "^1.1.0",
  "gulp-sass": "^2.0.4",
  "gulp-smushit": "0.0.4",
  "gulp-sourcemaps": "^1.6.0",
  "gulp-stylus": "^2.1.0",
  "gulp-sync": "^0.1.4",
  "gulp-uglify": "^1.5.1",
  "gulp-util": "^3.0.7",
  "vinyl-ftp": "^0.4.5"
}

The Sass and Libsass plugins are loaded, but I use Stylus for compiling linked to Autoprefixer.

The Gulpfile.js (Entire file) :

var autoprefixerOptions = { browsers: ['last 2 versions', '> 5%'] };

gulp.task('styles', function() {
  return gulp
    .src(inputStyles)
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(stylus({
        compress: true,
        linenos: false
    }))
    .on('error', function(err) {
        console.error('Error!', err.message);
    })
    .pipe(autoprefixer(autoprefixerOptions))
    .pipe(sourcemaps.write('../Styles/Maps', {addComment: true}))
    .pipe(gulp.dest(source + '/Public/Styles'));
});

Firefox ESR Queries cause an unhandled error

Background:

I have the following autoprefixer setup in a gulp task:

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

Issue:

After autoprefixer executes, the following error is being generated

Error in plugin 'gulp-autoprefixer'
Error
    at c:\path\to\project\node_modules\gulp-autoprefixer\index.js:51:7
    at runMicrotasksCallback (node.js:337:7)
    at process._tickCallback (node.js:355:11)
[gulp] Site\src\less\styles.less
[09:08:55] Plumber found unhandled error:
 Error in plugin 'gulp-autoprefixer'
Error
    at c:\path\to\project\node_modules\gulp-autoprefixer\index.js:51:7
    at runMicrotasksCallback (node.js:337:7)
    at process._tickCallback (node.js:355:11)

Now if I change the Firefox query to be either of the following, the call is successful:

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

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

System Setup:

node: 0.12.3
npm: 2.9.1
gulp-autoprefixer: 2.3.0

Promise is not defined error after running autoprefix task on CentOS 7

I have a CentOS 7 box and I have just installed the autoprefixer Gulp task. I am using NPM v3.5.3 and NodeJS v0.10.30 and when I run gulp at the CLI I get the following error:

[vagrant@crmpicco /var/www/crmpicco]# gulp
[17:49:01] Using gulpfile /var/www/rels/20150805093500/gulpfile.js
[17:49:01] Starting 'default'...
[17:49:01] Starting 'styles'...
[17:49:01] Finished 'default' after 24 ms
[17:49:05] Finished 'styles' after 3.87 s
[17:49:05] Starting 'autoprefix'...

/var/www/rels/20150805093500/node_modules/gulp-autoprefixer/node_modules/postcss/lib/lazy-result.js:157
        this.processing = new Promise(function (resolve, reject) {
                              ^
ReferenceError: Promise is not defined

autoprefixer.coffee:

config = require('../config')
gulp = require('gulp')
autoprefixer = require('gulp-autoprefixer')

gulp.task 'autoprefix', ->
  gulp.src(config.basePath.src + config.files.maincss)
    .pipe(autoprefixer({
      browsers: ['last 2 versions']
    }))
    .pipe(gulp.dest(config.basePath.src + config.filePath.css))

default.coffee:

gulp = require('gulp')
runSequence = require('run-sequence')

### Gulp task ###
gulp.task 'default', ->
  runSequence('styles', 'autoprefix', 'coffee', 'fonts', 'watch')

Do I need to upgrade NodeJS (or NPM)? The answer given here - http://stackoverflow.com/a/32940141/691505 - to require es6-promise does not work for me.

Using unquote throws error

For my Shopify themes I need to add liquid tags for files, I use unquote to make sure that piece of the sass code is ignored, but autoprefixer gives an error when I do this:

background: unquote(" url( {{ 'header-logo.png' | asset_url }} no-repeat 50% ");

Does anyone know how to fix this?

SASS solid strings causing 'unknown word' error

See this http://stackoverflow.com/questions/27314697/sass-compiler-custom-rules-exceptions/27315081#27315081 question of what I'm trying to do.

This works great in SASS but autoprefixer gives me the following errror:

Autoprefixer failed to process the CSS file. It returned this error message: autoprefixer:/Users/xx/custom.css:119:16: Unknown word
right: 0;
background: {theme="header"};
^
width: 100%;

.css file listed in source maps when using LESS

If I run something along the lines of:

gulp.src('src/less/*.less')
  .pipe(sourcemaps.init())
  .pipe(less())
  .pipe(autoprefixer())
  .pipe(sourcemaps.write())
  .pipe('dist');

With a file src/less/index.less, in the source maps it shows an index.less file as expected, but also in the same place a index.css file also appears and in DevTools it says it does not exist. If I don't use Autoprefixer the extra index.css file does not appear in source maps.

Update to use autoprefixer-core 5.x

Seems like the autoprefixer-core is in the 5.x release range: https://github.com/postcss/autoprefixer-core/releases

My understanding is that gulp-autoprefixer is using the 4.x core so it would be nice to see an update.

Running the test

Hello, I have a repo about a gulp-project-automation. But I'm having trouble to run a test on this gulp file. How were you able to test this gulp file? I'm using karma/jasmine runs the test in the browser. In addition, I used browserify to access and require modules from within the browser like (gulp, should, assert). But when I run the test, it throws undefined error and the instruction where I'm using module name says name is not a function..

Using // comments breaks autoprefixer

Foundation use @import and @include and it would seem that using // before @include breaks gulp-autoprefixer as shown below:

CssSyntaxError in plugin 'gulp-autoprefixer' Message: /Users/Jwldnr/Sites/ex/sass/app.scss:10:1: Unknown word

@include foundation-typography;
// @include foundation-button;
^
@include foundation-forms;

.scss markup:

@charset 'utf-8';

@import 'settings';
@import 'foundation';
@import 'motion-ui';

@include foundation-global-styles;
@include foundation-grid;
@include foundation-typography;
// @include foundation-button;

It should also be noted that using /* comments */ DOES WORK.

example:

@charset 'utf-8';

@import 'settings';
@import 'foundation';
@import 'motion-ui';

@include foundation-global-styles;
@include foundation-grid;
@include foundation-typography;
/* @include foundation-button; */

Missing Error Message

/var/www/html/mint/20151202151933/node_modules/gulp-util/lib/PluginError.js:73
if (!this.message) throw new Error('Missing error message');
^
Error: Missing error message
at new PluginError (/var/www/html/mint/20151202151933/node_modules/gulp-util/lib/PluginError.js:73:28)
at DestroyableTransform.logError (/var/www/html/mint/20151202151933/node_modules/gulp-sass/index.js:168:17)
at DestroyableTransform.emit (events.js:117:20)
at afterTransform (/var/www/html/mint/20151202151933/node_modules/gulp-sass/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:75:19)
at TransformState.afterTransform (/var/www/html/mint/20151202151933/node_modules/gulp-sass/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:59:12)
at errorM (/var/www/html/mint/20151202151933/node_modules/gulp-sass/index.js:123:14)
at DestroyableTransform._transform (/var/www/html/mint/20151202151933/node_modules/gulp-sass/index.js:151:16)
at DestroyableTransform.Transform._read (/var/www/html/mint/20151202151933/node_modules/gulp-sass/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:172:10)
at DestroyableTransform.Transform._write (/var/www/html/mint/20151202151933/node_modules/gulp-sass/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:160:12)
at doWrite (/var/www/html/mint/20151202151933/node_modules/gulp-sass/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:333:12)

Any Ideas?

Perspective Bug (with firefox)

Hi, I've a problem with the autoprefixer in the Transform property.

With this auto-prefixer configuration:
.pipe(autoprefixer('last 2 version', 'safari 5', 'Firefox ESR', 'opera 12.1'))

If I write :

  transform: perspective(300px) rotateX(-90deg);

The result is:

transform:perspective(300) rotateY(-90deg);

I don't understand why it removes the "px" units, with firefox it doesn't read the property.

Maybe there is a work around?

Thanks

Paolo

How to use in combination with gulp-sass

Hi,

Im trying to use gulp-autoprefixer in combination with gulp-sass and gulp-sourcemaps.
My gulpfile task looks like this:

gulp.task('sass', function () {
  gulp.src( config.SASS.src )
    .pipe( plugins.sourcemaps.init() )
    .pipe( plugins.sass() )
    .pipe( plugins.autoprefixer (
      "last 1 versions", "> 10%", "ie 9"
      ))
    .pipe( plugins.sourcemaps.write('./') )
    .pipe( gulp.dest( config.SASS.build ) )
    .pipe( browserSync.reload({ stream: true }) );
});

The plugins. prefix is related to gulp-load-plugins

Without gulp-sass the task runs fine, but with it it throws the following error:

[08:26:51] Finished 'sass' after 3.32 ms
gulp-sourcemap-write: source file not found:/Users/luismartins/Sites/00_LAB/wp-multisite/wp-content/themes/wip053/src/sass/main.css

Should I be running autoprefixer as a separate task after CSS compilation?

Thanks.

Update autoprefixer core

Current version of the core in gulp-autoprefixer: 3.0.2
Current release of the core: 3.1.2

Sourcemaps with gulp-sass on windows

When trying to get sourcemaps for sass + autoprefixer on Windows, the resulting sourcemap's contentSource is the compiled CSS, not the original sass.

var autoprefixer = require('gulp-autoprefixer');
var gulp = require('gulp');
var rename = require('gulp-rename');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('css', function () {
    gulp.src('resources/assets/sass/app.scss')
        .pipe(sourcemaps.init())
        .pipe(sass({ outputStyle: 'compressed' }))
        .pipe(autoprefixer())
        .pipe(rename('css/app.css'))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('public'));
});

Removing autoprefixer from the stream results in proper sourcemaps.

For more context, see here: http://stackoverflow.com/questions/30805146

To test this on a Windows machine, download this: gulp-sass-autoprefixer-sourcemaps.zip.

Unzip, and run: npm install && gulp css.

Delete the attribute that should not be deleted.

when I set attribute remove:true
before
.input_date_group{
width: -webkit-calc(100% - 135px);
width: -moz-calc(100% - 135px);
width: calc(100% - 135px);
}
after
.input_date_group{
width: calc(100% - 135px);
}

Consider adding .npmignore file

Hey,

I am a happy user of your library, but as my project grows we have a lot of dependencies.
We could save a lot of space if you added .npmignore file to your project.

I even found tool that can help you with it: https://github.com/inikulin/dmn

Thanks!

2.0.0 throws error

Hey,
I'm using gulp-ruby-sass and if I add gulp-autoprefixer, I get the following error

write style.css.map

events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: /Users/myfolderstructure/style.css.map:3:1: Unknown word

With sourcemaps and without sourcemaps.

All versions under 2.0.0 are working fine.

nodejs 4.0.0 support

events.js:141
throw er; // Unhandled 'error' event
^

Error: no writecb in Transform class
at afterTransform (/projectfolder/node_modules/gulp-autoprefixer/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:95:33)
at Immediate.TransformState.afterTransform (/projectfolder/node_modules/gulp-autoprefixer/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:79:12)
at Immediate.immediate._onImmediate (timers.js:423:18)
at processImmediate as _immediateCallback

Autoprefixer with Foundation Framework issue

I'm attempting to get autoprefixer working with my setup. Here is the relevant gulpfile section:

// Compile Sass file to CSS, and updates browsers.
gulp.task('sass', function() {
    return gulp.src(sassSource)
        .pipe(plumber())
        .pipe(sourcemaps.init())  // Process the original sources
            .pipe(autoprefixer, {
                browsers: [
                    'last 2 versions',
                    'ie 8',
                    'ie 9',
                    'android 2.3',
                    'android 4',
                    'opera 12'
                ]
            })
            .pipe(sass({outputStyle: 'compressed'}))
        .pipe(sourcemaps.write('./')) // Add the map to modified source.
        .pipe(gulp.dest(sassDestination))
        .pipe(reload({stream:true}));
});

Here is the error message:

TypeError: Object function (opts) {
    return through.obj(function (file, enc, cb) {
        if (file.isNull()) {
            cb(null, file);
            return;
        }

        if (file.isStream()) {
            cb(new gutil.PluginError('gulp-autoprefixer', 'Streaming not supported'));
            return;
        }

        var fileOpts = objectAssign({}, opts);
        var processor = postcss()
            .use(autoprefixer(fileOpts))
            .process(file.contents.toString(), {
                map: file.sourceMap ? {annotation: false} : false,
                from: file.path,
                to: file.path
            });

        processor.then(function (res) {
            file.contents = new Buffer(res.css);

            if (res.map && file.sourceMap) {
                applySourceMap(file, res.map.toString());
            }

            var warnings = res.warnings();

            if (warnings.length > 0) {
                gutil.log('gulp-autoprefixer:', '\n  ' + warnings.join('\n  '));
            }

            cb(null, file);
        }).catch(function (err) {
            var cssError = err.name === 'CssSyntaxError';

            if (cssError) {
                err.message = err.message + err.showSourceCode();
            }

            // prevent stream unhandled exception from being suppressed by Promise
            setImmediate(cb, new gutil.PluginError('gulp-autoprefixer', err, {
                fileName: file.path,
                showStack: !cssError
            }));
        });
    });
} has no method 'on'
    at DestroyableTransform.Readable.pipe [as _pipe] (/Applications/AMPPS/www/jump_start/wp-content/themes/jumpstart/node_modules/gulp-sourcemaps/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:516:8)
    at DestroyableTransform.pipe2 (/Applications/AMPPS/www/jump_start/wp-content/themes/jumpstart/node_modules/gulp-plumber/index.js:70:20)
    at Gulp.gulp.task.gulp.src.pipe.pipe.pipe.reload.stream (/Applications/AMPPS/www/jump_start/wp-content/themes/jumpstart/gulpfile.js:46:14)
    at module.exports (/Applications/AMPPS/www/jump_start/wp-content/themes/jumpstart/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:34:7)
    at Gulp.Orchestrator._runTask (/Applications/AMPPS/www/jump_start/wp-content/themes/jumpstart/node_modules/gulp/node_modules/orchestrator/index.js:273:3)
    at Gulp.Orchestrator._runStep (/Applications/AMPPS/www/jump_start/wp-content/themes/jumpstart/node_modules/gulp/node_modules/orchestrator/index.js:214:10)
    at Gulp.Orchestrator.start (/Applications/AMPPS/www/jump_start/wp-content/themes/jumpstart/node_modules/gulp/node_modules/orchestrator/index.js:134:8)
    at /usr/local/lib/node_modules/gulp/bin/gulp.js:129:20
    at process._tickCallback (node.js:419:13)

I don't really know what this error means. However, I have narrowed things down. It works If I comment out the following in my style.scss:

//@import "../bower_components/foundation/scss/foundation";

Stripping out inline source maps

I though it was an issue with gulp-sass, but it turns out that gulp-autoprefixer was the culprit.

Problematic Task

gulp.task('css:dev', function () {
    return gulp.src('public/css/core.scss')
        .pipe(sass({sourceComments: 'map', errLogToConsole: true}))
        .pipe(autoprefix())
        .pipe(gulp.dest('public/css/'));
});

Issue

After the scss is compiled into css, it has inline source maps that look like the following

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

Once that file is run through autoprefixer, the source maps don't exist. I wasn't able to find any documenation

Cannot read property 'value' of undifined

i got this error when i start gulp, i tried to reinstall all the packages, update node version but nothing seems to work..

node -v
v5.3.0

npm -v
3.3.12

events.js:141
throw er; // Unhandled 'error' event
^
TypeError: Cannot read property 'value' of undefined
at /Users/Yashi/Data/Code/HTMLCSS/HCM/node_modules/autoprefixer/lib/transition.js:109:57
at Array.filter (native)
at Transition.remove (/Users/Yashi/Data/Code/HTMLCSS/HCM/node_modules/autoprefixer/lib/transition.js:106:23)
at /Users/Yashi/Data/Code/HTMLCSS/HCM/node_modules/autoprefixer/lib/processor.js:153:39
at /Users/Yashi/Data/Code/HTMLCSS/HCM/node_modules/postcss/lib/container.js:88:34
at /Users/Yashi/Data/Code/HTMLCSS/HCM/node_modules/postcss/lib/container.js:73:26
at Rule.each (/Users/Yashi/Data/Code/HTMLCSS/HCM/node_modules/postcss/lib/container.js:60:22)
at Rule.walk (/Users/Yashi/Data/Code/HTMLCSS/HCM/node_modules/postcss/lib/container.js:72:21)
at /Users/Yashi/Data/Code/HTMLCSS/HCM/node_modules/postcss/lib/container.js:76:32
at Root.each (/Users/Yashi/Data/Code/HTMLCSS/HCM/node_modules/postcss/lib/container.js:60:22)

Autoprefixer's process() method is deprecated and will removed in next major release. Use postcss([autoprefixer]).process() instead

Should autoprefixer-core be bumped to 5.2?

@-moz-document url-prefix() breaks autoprefixer

any css file with @-moz-document url-prefix() in it will break the gulp-autoprefixer.

try to process this piece of css:

@-moz-document url-prefix() {
    .test {
        background: url('/inc/img/ui/caret.png') right 5px center no-repeat);
        background-size: 12px 12px;
    }
}

And my gulp task looks like:

gulp.task('testcss', function() {
  return gulp.src([
    'inc/css/test.css'])
  .pipe(autoprefixer('> 1%','last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1'))
  .pipe(concat('test.min.css'))
    .pipe(minifycss({keepBreaks:false}))
    .pipe(gulp.dest(DEST+'css'))
    .pipe(notify({message: 'CSS stylesheets task complete'}));
});

Any idea what this might be? looking at autoprefixer-core, this issue is resolved. So maybe gulp-autoprefixer is using old core code?

source maps are incorrect when compiling from SCSS

Sorry--this is actually the same as issue 54 but I'm not sure how to reopen it. As mentioned there, the problem does not lie with the other plugins in the compile chain. The issue is with this plugin because it relies on gulp-postcss, which is the ultimate culprit. The issue is easily reproduced with gulp-autoprefixer and any number of other plugins.

I have this Gulp code which compiles three SCSS files (first.scss, last.scss, and app.scss). All plugins are gulp-sourcemaps compatible:

return gulp.src(cssFiles)
    .pipe(plugins.if(addSourceMaps, plugins.sourcemaps.init({loadMaps: true})))
    .pipe(plugins.sass())
    .pipe(plugins.autoprefixer())

    // I have verified this code is not the issue--if commented out the problem remains.
    .pipe(plugins.if(!!config.cssFile,plugins.order(
      [
        config.sourceFolder + '**/first.css',
        '!' + config.sourceFolder + '**/*',
        '!' + config.sourceFolder + '**/last.css'
      ],
      {base: '.'}
    )))

    .pipe(plugins.if(!!config.cssFile, plugins.concat(config.cssFile)))
    .pipe(plugins.if(addSourceMaps, plugins.sourcemaps.write('.', {sourceRoot: '../src'})))
    ...

When autoprefixer is commented out, the source maps are produced properly:

{"version":3,"sources":["sass/first.scss","sass/app.scss","sass/last.scss"],"names":[],"mappings":"AAAA;ACAA;ACAA","file":"all.css","sourcesContent":["// All CSS files are combined into one big file called \"all.css\". This file is\n// guaranteed to be the first file added (the contents of this file will be at\n// the beginning of \"all.css\").\n\n","// app.scss\n\n","// All CSS files are combined into one big file called \"all.css\". This file is\n// guaranteed to be the last file added (the contents of this file will be at\n// the end of \"all.css\").\n\n"],"sourceRoot":"../src"}

When autoprefixer is enabled, the source maps are incorrect and point to nonexistent CSS files:

{"version":3,"sources":["sass/app.css","sass/first.css","sass/last.css"],"names":[],"mappings":"AAAA;ACAA;ACAA","file":"all.css","sourceRoot":"../src","sourcesContent":[]}

vendor prefixes being removed starting @1.0.0

Starting at version 1.0.0 (also tested with 1.0.1), vendor prefixes for box-sizing are being removed from my compiled css.

gulp-autoprefixer call
.pipe(autoPrefixer("last 4 versions", "Firefox >= 27", "Blackberry >= 7", "IE 8", "IE 9"))

test css before autoprefixer:

.solr-index-lists *, 
.solr-index-lists *:before, 
.solr-index-lists *:after {
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
}

compiled css with only gulp-autoprefixer running in the pipe

.solr-index-lists *, 
.solr-index-lists *:before, 
.solr-index-lists *:after {
  box-sizing: border-box;
}

I reverted back to version 0.0.9 and I get the expected output:

.solr-index-lists *, 
.solr-index-lists *:before, 
.solr-index-lists *:after {
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
}

I've also tested just using box-sizing: border-box; in the source css but I get the same output (no prefixes with version >= 1.0.0 and expected prefixes with version 0.0.9

Getting Promise errors

I tried the following code:

var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var concat = require('gulp-concat');


var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');

gulp.task('default', function () {
    return gulp.src('src/styles.css')
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(gulp.dest('dist'));
});

But I'm constantly getting errors like this:

/Users/krisvandermast/gulptests/b/node_modules/gulp-autoprefixer/node_modules/postcss/lib/lazy-result.js:152
        this.processing = new Promise(function (resolve, reject) {
                              ^
ReferenceError: Promise is not defined
    at LazyResult.async (/Users/krisvandermast/gulptests/b/node_modules/gulp-autoprefixer/node_modules/postcss/lib/lazy-result.js:152:31)
    at LazyResult.then (/Users/krisvandermast/gulptests/b/node_modules/gulp-autoprefixer/node_modules/postcss/lib/lazy-result.js:75:21)
    at DestroyableTransform._transform (/Users/krisvandermast/gulptests/b/node_modules/gulp-autoprefixer/index.js:28:13)
    at DestroyableTransform.Transform._read (/Users/krisvandermast/gulptests/b/node_modules/gulp-autoprefixer/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:172:10)
    at DestroyableTransform.Transform._write (/Users/krisvandermast/gulptests/b/node_modules/gulp-autoprefixer/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:160:12)
    at doWrite (/Users/krisvandermast/gulptests/b/node_modules/gulp-autoprefixer/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:326:12)
    at writeOrBuffer (/Users/krisvandermast/gulptests/b/node_modules/gulp-autoprefixer/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:312:5)
    at DestroyableTransform.Writable.write (/Users/krisvandermast/gulptests/b/node_modules/gulp-autoprefixer/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:239:11)
    at write (/Users/krisvandermast/gulptests/b/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:623:24)
    at flow (/Users/krisvandermast/gulptests/b/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:632:7)

What is going on and most important: how can I get around it?

Mention about possibility to use postCSS instead

While this plugin is great if one doesn't need anything else but autoprefixing, I'm kinda missing information from readme which would suggest to use postcss autoprefixer plugin instead:
https://github.com/postcss/autoprefixer#gulp

Using postcss seems to be recommended way by the Gulp team anyway:
https://github.com/gulpjs/plugins/issues/210

Now people might be adding CSS minifiers and autoprefixers separately to their build scripts, while they really should be adding postfix with these plugins instead.

Thoughts?

ReferenceError: Promise is not defined

It seems that postcss (one of gulp-prefixer's deps) uses promises while nodejs does not officially implement that api yet; Have you considered using a version of postcss that does not break the behaviour?

node_modules/gulp-autoprefixer/node_modules/postcss/lib/lazy-result.js:152
        this.processing = new Promise(function (resolve, reject) {
                              ^
ReferenceError: Promise is not defined
  at LazyResult.async (node_modules/gulp-autoprefixer/node_modules/postcss/lib/lazy-result.js:152:31)
  at LazyResult.then (node_modules/gulp-autoprefixer/node_modules/postcss/lib/lazy-result.js:75:21)
  at DestroyableTransform._transform (node_modules/gulp-autoprefixer/index.js:24:6)
  at DestroyableTransform.Transform._read (node_modules/gulp-autoprefixer/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:172:10)
  at DestroyableTransform.Transform._write (node_modules/gulp-autoprefixer/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:160:12)
  at doWrite (node_modules/gulp-autoprefixer/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:333:12)
  at writeOrBuffer (node_modules/gulp-autoprefixer/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:319:5)
  at DestroyableTransform.Writable.write (node_modules/gulp-autoprefixer/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:246:11)
  at write (node_modules/gulp-concat/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:623:24)
  at flow (node_modules/gulp-concat/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:632:7)
  at DestroyableTransform.pipeOnReadable (node_modules/gulp-concat/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:664:5)
  at DestroyableTransform.emit (events.js:117:20)
  at emitReadable_ (node_modules/gulp-concat/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:448:10)
  at emitReadable (node_modules/gulp-concat/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:444:5)
  at readableAddChunk (node_modules/gulp-concat/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:187:9)
  at DestroyableTransform.Readable.push (node_modules/gulp-concat/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:149:10)
  at DestroyableTransform.Transform.push (node_modules/gulp-concat/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:145:32)
  at DestroyableTransform.endStream [as _flush] (node_modules/gulp-concat/index.js:98:10)
  at DestroyableTransform.<anonymous> (node_modules/gulp-concat/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:135:12)
  at DestroyableTransform.g (events.js:180:16)
  at DestroyableTransform.emit (events.js:92:17)
  at finishMaybe (node_modules/gulp-concat/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:371:12)
  at endWritable (node_modules/gulp-concat/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:378:3)
  at DestroyableTransform.Writable.end (node_modules/gulp-concat/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:356:5)
  at Stream.onend (stream.js:79:10)
  at Stream.emit (events.js:117:20)
  at DestroyableTransform.<anonymous> (node_modules/event-stream/index.js:50:16)
  at DestroyableTransform.emit (events.js:117:20)
  at endReadableNT (node_modules/gulp-sass/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:958:12)
  at afterTick (node_modules/gulp-sass/node_modules/through2/node_modules/readable-stream/node_modules/process-nextick-args/index.js:11:8)
  at process._tickCallback (node.js:448:13)

input:autofill

As for as I can tell, autoprefixer does not support :autofill. Should it support it?

linear-gradient and browser query for Safari 6 does not generate prefixed CSS

Based on information on the caniuse.com site for the linear-gradient CSS property, the CSS property should be prefixed for Safari 6.1 and earlier (with partial support for Safari 4.3 and earlier).

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%);
}

gulp-util.noop break autoprefixer

var gulp = require('gulp');
var util = require('gulp-util');
var autoprefixer = require('gulp-autoprefixer');
var paths = require('./paths');

module.exports = function() {
  return gulp.src(paths.sources.styles)
    .pipe(util.noop)
    .pipe(autoprefixer('last 2 versions', '> 1%'))
    .pipe(gulp.dest(paths.dist.styles))
};

[11:40:21] TypeError: Object function () {
  return through.obj();
} has no method 'on'
    at DestroyableTransform.Readable.pipe [as _pipe] (/Users/ghoullier/Projects/demo/node_modules/gulp-plumber/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:516:8)

noop should not break the pipe ...

transform property not getting prefixed

So i've been using the same gulp setup for many months, but today as I was updating an old project, I noticed it doesn't look right on Android (4.2). Turned out the compiled css was missing -webkit prefix for the transform property (which previously did receive the prefix as it should).

According to caniuse, this prefix is needed for all pre-5 Androids.

Here's my gulpfile and a simple test case, which demostrates the issue:
https://gist.github.com/thykka/b450db9742246245818807d7642e9247

There is no issue when using the same settings with the online autoprefixer though, which leads me to believe this problem is specific to either my config or gulp-autoprefixer itself.

Any ideas?

ReferenceError: Promise is not defined

My task:

gulp.task('css', [], function() {
  return gulp.src(['sass/styles.scss'])
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({
           browsers: ['last 2 versions'],
           cascade: false
    }))
    .pipe(sourcemaps.write('./css/'))
    .pipe(gulp.dest('./css/'));
});

Result:



/Applications/MAMP/htdocs/oneplusone.pl/layouts/roomore/node_modules/gulp-autoprefixer/node_modules/postcss/lib/lazy-result.js:152
        this.processing = new Promise(function (resolve, reject) {
                              ^
ReferenceError: Promise is not defined
    at LazyResult.async (/Applications/MAMP/htdocs/oneplusone.pl/layouts/roomore/node_modules/gulp-autoprefixer/node_modules/postcss/lib/lazy-result.js:152:31)
    at LazyResult.then (/Applications/MAMP/htdocs/oneplusone.pl/layouts/roomore/node_modules/gulp-autoprefixer/node_modules/postcss/lib/lazy-result.js:75:21)
    at DestroyableTransform._transform (/Applications/MAMP/htdocs/oneplusone.pl/layouts/roomore/node_modules/gulp-autoprefixer/index.js:24:6)
    at DestroyableTransform.Transform._read (/Applications/MAMP/htdocs/oneplusone.pl/layouts/roomore/node_modules/gulp-autoprefixer/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:172:10)
    at DestroyableTransform.Transform._write (/Applications/MAMP/htdocs/oneplusone.pl/layouts/roomore/node_modules/gulp-autoprefixer/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:160:12)
    at doWrite (/Applications/MAMP/htdocs/oneplusone.pl/layouts/roomore/node_modules/gulp-autoprefixer/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:333:12)
    at writeOrBuffer (/Applications/MAMP/htdocs/oneplusone.pl/layouts/roomore/node_modules/gulp-autoprefixer/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:319:5)
    at DestroyableTransform.Writable.write (/Applications/MAMP/htdocs/oneplusone.pl/layouts/roomore/node_modules/gulp-autoprefixer/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:246:11)
    at write (/Applications/MAMP/htdocs/oneplusone.pl/layouts/roomore/node_modules/gulp-sass/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:623:24)
    at flow (/Applications/MAMP/htdocs/oneplusone.pl/layouts/roomore/node_modules/gulp-sass/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:632:7)

Adhere to runner guidelines

Use async API and other things:

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

Sass + Autoprefixer + Sourcemaps

If you have unicode symbols anywhere in your Sass (eg: pseudo element content property), it will cause the sourcemap to not appear in Chrome when using gulp-sourcemaps with gulp-sass + gulp-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.

Possibly related: #8

-ms prefix not added to transform

As in my test, using autoprefixer with the following settings, it seems not to generate the transform attributes with the -ms prefix.

autoprefixer('last 2 version', 'safari 5', 'ie 9', 'opera 12.1', 'ios 6', 'android 4')

Raw code:

.tile__front {
  transform: rotateY(180deg);
}

What autoprefixer outputs

.tile__front {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

According to caniuse, the -ms prefix is needed for IE9.

With 1.0.1 index.js is not included in install

My package.json originally included autoprefixer 1.0.1, but after cleaning my node_modules and doing an npm install, autoprefixer did not pull the index.js. The only thing in node_modules/gulp-autoprefixer was its own node_modules. I changed my package.json to pull from "*" and it is working now.

It isn't work with sourcemaps

Hi, I have installed latest versions of gulp-autoprefixer (2.3.0), gulp-sourcemaps (1.5.2) and gulp-sass (2.0.1), and an example code below doesn't work for me:

gulp.task('sass', function () {
  return gulp.src(config.src)
    .pipe(sourcemaps.init())
    .pipe(sass(config.settings))
    .pipe(sourcemaps.write())
    .pipe(autoprefixer({ browsers: ['last 2 version'] }))
    .pipe(gulp.dest(config.dest));
});

Have you any ideas for it?

Why use this rather than autoprefixer's suggested gulp task?

Not trying to be rude, just curious. Why would someone use this plugin rather than autoprefixer's suggested gulp task?

Error: no writecb in Transform class at afterTransform

All of a sudden I am now receiving the following error when I try to run gulp or gulp watch when a sass file is modified, it works fine for js compiling.

events.js:141
      throw er; // Unhandled 'error' event
      ^

Error: no writecb in Transform class
    at afterTransform (project_path\node_modules\laravel-elixir\node_modules\gulp-autoprefixer\node_modules\through2\node_modules\readable-stream\lib\_stream_transform.js:95:33)
    at Immediate.TransformState.afterTransform (project_path\node_modules\laravel-elixir\node_modules\gulp-autoprefixer\node_modules\through2\node_modules\readable-stream\lib\_stream_transform.js:79:12)
    at Immediate.immediate._onImmediate (timers.js:435:18)
    at processImmediate [as _immediateCallback] (timers.js:383:17)

I have also submitted a similar issue to the laravel-elixer package but it looks like the problem actually come from this package. I am using Node-v4.4.7 and I have tried updating, clearing cache and reinstalling my deps with no luck.

1.0.0 is throwing errors

This is my gulp task:

gulp.task('less', function() {
    return gulp.src('src/assets/less/style.less')
        .pipe(plugins.sourcemaps.init())
        .pipe(plugins.less())
        .pipe(plugins.autoprefixer('last 2 versions'))
        .pipe(plugins.sourcemaps.write('./maps'))
        .pipe(gulp.dest('src/.tmp/styles'));
});

This worked fine with gulp-autoprefixer 0.0.10. After upgrading to 1.0.0 I am getting this error:

events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: SourceMapGenerator.prototype.applySourceMap requires either an explicit source file, or the source map's "file" property. Both were omitted.
    at SourceMapGenerator_applySourceMap [as applySourceMap] (/Users/kevin/Workspace/sling-web/node_modules/gulp-autoprefixer/node_modules/vinyl-sourcemaps-apply/node_modules/source-map/lib/source-map/source-map-generator.js:170:17)
    at applySourceMap (/Users/kevin/Workspace/sling-web/node_modules/gulp-autoprefixer/node_modules/vinyl-sourcemaps-apply/index.js:11:15)
    at DestroyableTransform._transform (/Users/kevin/Workspace/sling-web/node_modules/gulp-autoprefixer/index.js:35:5)
    at DestroyableTransform.Transform._read (/Users/kevin/Workspace/sling-web/node_modules/gulp-autoprefixer/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:184:10)
    at DestroyableTransform.Transform._write (/Users/kevin/Workspace/sling-web/node_modules/gulp-autoprefixer/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:172:12)
    at doWrite (/Users/kevin/Workspace/sling-web/node_modules/gulp-autoprefixer/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:237:10)
    at writeOrBuffer (/Users/kevin/Workspace/sling-web/node_modules/gulp-autoprefixer/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:227:5)
    at DestroyableTransform.Writable.write (/Users/kevin/Workspace/sling-web/node_modules/gulp-autoprefixer/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:194:11)
    at write (/Users/kevin/Workspace/sling-web/node_modules/gulp-less/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:623:24)
    at flow (/Users/kevin/Workspace/sling-web/node_modules/gulp-less/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:632:7)

Unhandled error or source map sources are lost

Reproduction scenario:

git clone https://github.com/clee704/gulp-autoprefixer-test.git
cd gulp-autoprefixer-test
npm install
git checkout error
gulp css  # Unhandled 'error' event
git checkout lost
gulp css
head -c 200 build/css/app.css.map  # "sources" array is incomplete
git checkout works
gulp css
head -c 200 build/css/app.css.map  # correct "sources"

Seems like gulp-autoprefixer is handling source maps incorrectly or other modules (gulp-sass or gulp-sourcemaps) are not doing their jobs right.

gulp-autoprefixer seems to work differently on OS X and Windows 7

Hi, I'm having an issue with different prefixes being added by running same version of gulp-autoprefixer (2.2.0) on OS X (El Capitan) and Windows 7 with the 'last 2 version' setting.

SCSS:
a { transform: rotate(-5); }

OS X CSS:
a { -webkit-transform: rotate(-5); transform: rotate(-5); }

Windows CSS:
a { -webkit-transform: rotate(-5); -ms-transform: rotate(-5); transform: rotate(-5); }

Zero in output

Steps to reproduce

$ node -v
v4.0.0
$ npm i gulp gulp-autoprefixer

gulpfile.js

var gulp = require('gulp'),
    autoprefixer = require('gulp-autoprefixer');

gulp.task('default', function() {
    console.log('WAT')
});

Actual behaviour

$ gulp
0
[00:19:17] Using gulpfile ~/Desktop/gulpfile.js
[00:19:17] Starting 'default'...
WAT
[00:19:17] Finished 'default' after 132 μs

Expected behaviour

The same, but without 0

According to @ai, this couldn’t be autoprefixer’s fault because all console logs are disabled by eslint.

Show PostCSS warnings

Right now Autoprefixer generates a lot of really important warnings.

But seems like users do not see them: postcss/autoprefixer#602 (comment)

error @-moz-document url-prefix()

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)

2.1.0 breaks auto-prefixing flexbox on Safari 8.0.5

Output of display: flex; on Safari 8.0.5 is display:-webkit-box and not display:-webkit-flex, thus not working.

Downgrading to 2.0.0 fixes issue.

Config: .pipe(autoprefixer('last 2 version', 'ie 10', 'ios 7'))

Error: no writecb in Transform class

I'm getting Error: no writecb in Transform class with gulp-autoprefixer version 3.0.2 on Node 0.10 using the following task:

gulp.task 'styles', ->
    gulp.src "#{src.styles}/**/*.styl"
        .pipe plumber()
        .pipe stylus 
            use: nib()
        .pipe autoprefixer 
            browsers: ['last 2 versions']
        .pipe gulp.dest dest.styles