ndmitry/grunt-autoprefixer

Parse CSS and add vendor-prefixed CSS properties using the Can I Use database. Based on Autoprefixer.

grunt-autoprefixer's Issues

[BUG] CSS blocks removed between 2 comments

To start off, this is quite a peculiar bug since it only happens when a certain condition is met.

Code blocks that don't have any prefixable content and are between 2 comments that have this structure:
/* / some lame code / */

are being removed from the resulting css.

Note: For this bug to appear, the forward slashes inside have to be present without any space between the slashes and the asterisk (github wouldn't allow it).

I only discovered this bug because my commenting style looks something like this:
/*///////////////////////
     HEADER
/////////////////////// */

-ms-transform not added and * box-sizing removed

Hi

I've just been testing this out from a tutorial I found on CSS-Tricks http://css-tricks.com/autoprefixer/ . I was wondering, I've tried both with and without the option of ie 9 support specified in the autoprefixer: { options, but for me autoprefixr is not outputing -ms-transform as it does in the linked tutorial.

Also, I tried adding a catch all box-sizing: border-box code block:

*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

But this gets completely stripped out by autoprefixer...

For -ms-transform I must have messed up something in the options, but in that tutorial even if none are specified it still adds the -ms-transform variable. For box-sizing, are * selectors not supported?

Thanks

Documentation is missing expand and flatten opts

Please add a documentation for these two options that are used in the example in README.md.

Added spurious css file

I have a project, with a structure of

I am running a LESS task which builds 2 css files to /tmp/styles

I then have an autoprefixer task

autoprefixer: {
            options: {
                browsers: ['last 1 version', 'ie 8']
            },

            files: {
                expand: true,
                flatten: true,
                src: 'tmp/styles/{,*/}*.css',
                dest: 'tmp/styles/'
            }
        },

This works. However, if I omit the dest line, it writes one of my CSS files to the project root. Not the map file, and only the live_preview.css file.

I thought omitting that param would just write the processed css back on top of the old css files?

Autoprefixer runs successfully, but not outputting files

Hi, I'm setting up Grunt and Autoprefixer in a new work environment, and for some reason I can't get it to work like it does for me on my own machine.

Here's my gruntfile:

module.exports = function(grunt) {

var version = grunt.option('pomVersion') || 'VERSION';

grunt.initConfig({

    project: {
        name: 'web-standard',
        version: version
    },


    less: {
        dev: {
            files: [
                {   
                    expand: true,
                    flatten:true,
                    src: 'src/main/less/*.less',
                    dest: 'target/css',
                    ext: '.css',

                }
            ]
        }
        },


    autoprefixer: {

        dev: {  

            options: {
                    browsers: ['last 2 version','> 1%']
                },

                multiple_files: {
                    expand:true,
                    src: 'target/css/*.css',
                    dest: 'target/css/prefixed/'
                }
            }
        },

        watch: {
                less: {
                    files: ['src/main/less/*.less'],
                    tasks: ['less','autoprefixer'],
                    options: {
                        livereload:true,
                        spawn: false
                    }
                }
           }


});

grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-watch');



//grunt.registerTask('build', []);
grunt.registerTask('dev', ['less','autoprefixer']);
};

For whatever reason, when I call 'grunt dev' it successfully runs autoprefixer, but no "prefixed" folder is created, and no new files are added.

Thanks in advance for any help you can provide.

CSS map getting stripped

I'm using the latest SASS, grunt-contrib-sass and grunt-autoprefixer. In fact, I just upgraded the grunt-autoprefixer today, and now the CSS map line at the end of the .css file that SASS outputs ...

/*# sourceMappingURL=ecc.css.map */

... is getting stripped by the autoprefixer task.

This didn't happen with older versions. Perhaps an inadvertent bug? If not, then am I doing something wrong, possibly? I'm not sure I've changed anything in my project though that could in any way affect this.

IE9 -ms prefix not added for CSS 3 transform

http://caniuse.com/#search=transform
IE9 should support CSS 3 transform property if -ms prefix is added.
Auto-prefixer seems not to add it. See the diff (.patch) and grunt options below.

.panel .back {
@@ -513,12 +514,16 @@
   z-index: 800;
   width: inherit;
   height: inherit;
   padding: 1em;
+  -webkit-transform: rotateY(-179deg);
+          transform: rotateY(-179deg);
-  transform: rotateY(-179deg);
 }

// Add vendor prefixed styles
    autoprefixer: {
      options: {
        browsers: [
        'last 2 version',
        'ff > 20',
        '> 1%',
        'ie 9',
        'ie 10'],
        diff: true
      },

Отступы после прохода

При проходе grunt-autoprefixer он заменяет все табы на двойные пробелы. Как можно это исправить?
Может стоит добавить как опцию — пробелами или табами?

Comments get filtered out

I'm using grunt-autoprefixer with kss-node, and are using some specific comment syntax to make it work. When I use kss-node class {$modifiers} grunt-autoprefixer filters this out. Tested autoprefixer sublime plugin, but did not have any problem then.

Css before autoprefixer:

/*
Buttons

Markup:
<a href="#0" class="{$modifiers}">Link Button</a>
<button class="{$modifiers}">Button Element</button>
<input type="button" class="btn {$modifiers}" value="Input Element"/>

.btn               - Default button style
.btn-cta           - Call to action buttons
.btn-neutral       - Neutral button
.btn-text          - Link button

Styleguide 1.6.1
*/
/* line 17, ../../../_sass/partials/atoms/_buttons.scss */
.btn, .btn-cta, .btn-neutral, .btn-text {
  color: white;
  background-color: dodgerblue;
  display: inline-block;

Css after grunt-autoprefixer:

/* line 17, ../../../_sass/partials/atoms/_buttons.scss */

.btn,
.btn-cta,
.btn-neutral,
.btn-text {
  color: white;
  background-color: dodgerblue;
  display: inline-block;

Autoprefixer 1.0 update

Autoprefixer hit 1.0 today. What's the outlook on getting this implemented in grunt-autoprefixer? I know this is really fresh, but J wanted to get the ball rolling, if possible.

add Changelog

A changelog is needed either in the releases or in a file so users can know whats changed, whether its breaking or not, etc.

Cannot call method 'slice' of undefined

I'm getting this output as a warning when running grunt. It's accompanied by a deprecation notice:

Running "autoprefixer:dist" (autoprefixer) task
Method autoprefixer.compile is deprecated and will be removed in 0.7 version. 
Use autoprefixer(reqs).compile instead.
Warning: Cannot call method 'slice' of undefined Used --force, continuing.

I'm not sure how to fix this. Here is the autoprefixer task in my Gruntfile:

autoprefixer: {
    dist: {
        options: {
            browsers: ['last 1 version']
        },
        files: [{
            expand: true,
            cwd: '.tmp/styles/',
            src: '{,*/}*.css',
            dest: '.tmp/styles/'
        }]
    }
},

Browser options: add -moz and -ms prefixes

Hi,
I would like to add pre-fixes for older webkit, Mozilla, IE 10 and Opera. Thus adding prefixes -moz, -ms, -webkit combined in my grunt auto-prefixer browser options configuration.
Tried many options but I cannot get it to work. How should I do this? Here down obvious doesn't work ;)

autoprefixer: {
      options: {
        browsers: [
        'last 2 version',
        'ff > 20',
        '> 1%',
        'ie 8',
        'ie 9',
        'ie 10',
        'Firefox ESR',
        'Opera 12.1'],

Autoprefix background-clip and text-fill-color?

Using this trick: http://css-tricks.com/snippets/css/gradient-text

Autoprefixer isn't adding prefixes (-webkit-) to background-clip and text-fill-color.

http://caniuse.com/#search=background-clip
http://caniuse.com/#search=text-fill-color

background: linear-gradient(#eee, #333);
background-clip: text;
text-fill-color: transparent;

Is currently prefixed as:

background: -webkit-linear-gradient(#eee, #333);
background: linear-gradient(#eee, #333);
background-clip: text;
text-fill-color: transparent;

Should be prefixed as:

background: -webkit-linear-gradient(#eee, #333);
background: linear-gradient(#eee, #333);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;

map location

Is there any reason for this limitation ?

You cannot specify a path where to save a map file, it will be saved at the same directory as the output CSS file.

Sources in (edited) source map

Updating source map, when src and dest are the same file, shouldn't add a src/dest file into sources.

Source maps on windows maintain \ instead of having them converted to /

The issue this causes is that devtools won't actually group the files in a folder instead it sees them as (for example) scss\something.scss

Replacing the \ with a / in the map file will work just fine and cause no issues.

Not working with grunt 0.4.1

Am not that familiar with grunt module development, but I am using about a dozen other modules all of which seems to list grunt 0.4+ as a dependency and work with grunt 0.4.1 (which is what I have). Thanks for the plugin!

Install fails if autoprefixer is already installed

My project has a direct dependency on autoprefixer - basically a dev server that adds prefixes when serving css, then grunt-autoprefixer for the built/minified version.

https://github.com/tqc/ChondricJS/blob/master/package.json

I'm getting an error when running npm install:

npm ERR! Error: ENOENT, chmod 'c:\git\ChondricJS\node_modules\grunt-autoprefixer\node_modules\autoprefixer\bin\autoprefixer'

If I delete autoprefixer and install the packages manually in a different order, everything works as it should:

npm install grunt-autoprefixer
npm install autoprefixer

Unable to consume embedded source map

grunt-contrib-less by default embeds source map content directly in the compiled file, and [email protected] was able to correctly consume and modify it. However, @0.6.3 it does not work anymore.

Please let me know if you need more info about my setup.

source maps point to src file, not dest

Here's my config:

autoprefixer: {
  options: {
    browsers: ['last 1 versions', '> 10%', 'ie 8']
  }
  , dev: {
    src: 'tmp/css/*.css'
    , dest: 'public/css/'
    , expand: true
    , flatten: true
    , options: {
      map: true
    }
  }
}

Sourcemaps work! but… they point to the files in tmp instead of public. The task completes fine, the map and css files load in the browser, but the source map points to the file listed as the src, not the dest.

fails to parse css with sourcemaps

While developing with LESS/SASS/etc… and outputting sourcemaps, it would be great to then apply autoprefixer so that a bunch of elaborate mixins aren't required.

autoprefix scss files

Is it possible to do autoprefixing on scss files, like on a mixins/config file?

autoprefix a minified file results in expanded css file

I have a Gruntfile with the following tasks:

sass: {
  build: {
    options: {
      style: 'compressed',
      sourcemap: true,
      precision: 7
    },
    files: [{
      expand: true,
      cwd: '<%= assets.sass %>',
      src: ['*.scss'],
      dest: '<%= assets.css %>',
      ext: '.css'
    }]
  }
},

autoprefixer: {
  options: {
    browsers: ['last 2 version'],
  },
  no_dest: {
    src: '<%= assets.css %>/!(*.min).css'
  }
}

When I run this autoprefix expands the CSS file.

Is it possible to minify the file after autoprefixer has been finished? (or leave it minified)
I know you can use cssmin (or csso) to minify the CSS file, but then the sourceMap entry gets removed from file.

For the record I have [email protected] installed.

Push tags to GitHub; use semver tags

Please push the corresponding git tags to GitHub, and use semver tags.

Not working after fresh install

I just installed this plugin via npm.

I added this basic settings to my Gruntfile:

    autoprefixer:
        src: '<%= outDir %>/*.css'

of course, with the loadNpmTasks as well, but when I call grunt autoprefixer it doesn't have affect on the files. There are 5 css files in the folder and grunt outputs File "src" prefixed. 5 times.

I tried to add this short, prefix needed css:

#test-rule{
    transform: rotate(90deg);
    user-select: none;
}

.. but nothing changed.

What do I do wrong?

OS: Win 8.1
nodeJs: 0.10.24

Change reference to file in the sourcemap

Hello
Currently my autoprefixer task (im using grunt) takes in input "main.temp.css" which is generated by sass...and outputs "main.css" and "main.css.map" the issue is that since the sourcemap references "main.temp.css" it is useless because the filename is different from what devtools expects.

Is there any way i can change this behaviour? I've tried using the map options but with no luck.

        autoprefixer: {
            options: {
                browsers: [
                    'last 4 version',
                    'Firefox ESR',
                    'Opera 12.1',
                    '> 1%',
                    'ie 8',
                    'ie 7'
                ],
                map: {
                    prev: 'css/',
                    annotation: 'css/main.css.map',
                    //sourceContent: true
                },
            },
            dev: {
                src: '<%= ground.cssFileTemp %>',
                dest: '<%= ground.cssFileTemp %>'
            },
        },

When I use 'transform' in 'keyframes', Unnecessary prefix attached.

When I use 'transform' in 'keyframes', Unnecessary prefix attached.

original:

@keyframes bar {
    ...
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

produces:

@-webkit-keyframes bar {
    ...
    100% {
        -webkit-transform: translate(1px, -2px) rotate(-1deg); 
        transform: translate(1px, -2px) rotate(-1deg); 
    }
}

@keyframes bar {
    ...
    100% { 
       -webkit-transform: translate(1px, -2px) rotate(-1deg);
        transform: translate(1px, -2px) rotate(-1deg); 
    }
}

i think:

@-webkit-keyframes bar {
    ...
    100% {
        -webkit-transform: translate(1px, -2px) rotate(-1deg); 
    }
}

@keyframes bar {
    ...
    100% {
        transform: translate(1px, -2px) rotate(-1deg); 
    }
}

gradient prefixing

using this with grunt-contrib-sass

as my input
$darkred: #b74435;
$litered: #d04d36;
background: linear-gradient($litered, $darkred);

outputs as

background: linear,false,#d04d36,#b74435;

says this issue was closed on autoprefixer
not sure what's up.
postcss/autoprefixer#204

@keyframes rules within Media Queries aren't prefixed

Hi, and first of all, thx for your amazing job !

So, everything is working fine except one thing.

The css @Keyframes rules.

I use grunt-autoprefixer 0.4.1 with these parameters :
browsers: ['last 2 version', 'ie 9', 'ios 5']
So i want -webkit prefixes.

I have no issues with css properties like animation-delay, animation-fill-mode etc...

But for example, with this source :

@keyframes FadeIn {
    100% {
      opacity: 1;
    }
}

the generated code should be :

@keyframes FadeIn {
    100% {
      opacity: 1;
    }
}
@-webkit-keyframes FadeIn {
    100% {
      opacity: 1;
    }
}

But it's not...
No prefixes for @Keyframes...
Have you any ideas ?

Thanks.

Autoprefixer 2.0.0

https://github.com/ai/autoprefixer/releases/tag/2.0.0

Just sayin' ;)

IE 10 flexbox syntax

I've noticed that the task won't add the IE10 specific flexbox syntax, despite being configured to do so.

According to Autoprefix readme examples this should be possible:

Just code by latest W3C specs and Autoprefixer will produce the code for old browsers:

a {
    display: flex;
}
compiles to:

a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex
}

Use `dependencies` instead of `peerDependencies` for autoprefixer module

When using peerDependencies the autoprefixer module gets installed into the project's node_modules directory but should reside inside grunt-autoprefixer

Post-Processing CSS that contains liquid variables

Not sure if an actual issue, per say - but running into a situation with liquid variables in CSS. For example, in SCSS, variables are interpolated to get through the compiler:

.class{ 
  background-image: url( #{"{{ 'my_image.jpg' | asset_url }}"} );
}

But then autoprefixer doesn't like it when it sees those variables, and throws an error on CSS like:

.class{ 
  background-image: url( {{ 'my_image.jpg' | asset_url }} );
}

Wondering if there are any known workarounds to get by this. Thanks in advance! Love this plugin!

Support Visual Cascade

Would it be possible to have grunt-autoprefixer support the new cascade option introduced in autoprefixer 1.1?

New Autoprfixer API

Hi. Thanks for your work again, Grunt plugin is really help with Autoprefixer promotion :).

Autoprefixer 0.6 will use new API (old one will show deprecated messages and will be removed in 0.7): autoprefixer(browsers).compile(css) instead of autoprefixer.compile(css, browsers).

New API will allow to cache precalculated RegExps and other prefixes data, so code like:

compiler = autoprefixer(browsers)
for i in [0..1000]
  compiler.compile(css)

will be faster.

Asky me if you have some questions or requests ;).

Missing prefix

I am using this grunt plugin and the following CSS remains unprefixed:

.csstransforms3d [data-off-canvas-state=invisible] .off-canvas {
    transform: translate3d(-110%, 0, 0);
}
.csstransforms3d [data-off-canvas-state=visible] .off-canvas {
    transform: translate3d(0, 0, 0);
}

Not the greatest selectors but I need to use the attribute selector to look at the data state. Modernizr adds the check for CSS transforms.

This is the task from my gruntfile.js:

autoprefixer: {
  options: {
    cascade: true,
    map: true
  },
  prefix_files: {
    expand: true,
    flatten: true,
    src: '<%= config.dist %>/*.css'
  }
},

Thanks

Autoprefixer 1.1 API

@nDmitry thanks for covering Autoprefixer source map issues :).

Autoprefixer 1.1 is very close to release (there is only 1 issue to close and next Middle Age motto search) and you can clean your code.

I very like our sync releases, do you possible to make new grunt-autoprefixer release with new Autoprefixer API on this Saturday or Sunday?

support passed arguments to grunt task e.g autoprefixer:dist

I'd like to do something similar to this:-

autoprefixer: {

    setone: {
        options: {
            browsers: ['last 2 version', 'ie 8', 'ie 9']
        },

        multiple_files: {
            expand : true,
            flatten: true,
            src : 'web/setone/css/**/*.css',
            dest : 'web/setone/css/'
        }
    }

    settwo: {
        options: {
            browsers: ['last 2 version', 'ie 8', 'ie 9']
        },

        multiple_files: {
            expand : true,
            flatten: true,
            src : 'web/settwo/css/**/*.css',
            dest : 'web/settwo/css/'
        }
    }

};

and be able to run the task like this:-

autoprefixer:setone

A lot of grunt plugins allow you to separate multiple sections in the configuration like this. Any chance this could be added?

I might give this a shot myself i just haven't wrote a grunt plugin yet and comparing this plugin against other grunt plugins that do allow this behaviour it was not immediately obvious what the key difference was.

Error: No compatible version found: caniuse-db@'^1.0.20140710'

This seems to be some other issue, but only happens when I want to install grunt-autoprefixer, I already have different working version of caniuse-db.
grunt-autoprefixer forces some version that doesn't exist I guess.

This is what I am gerring when trying to install it on Windows:

npm install grunt-autoprefixer --save-dev

npm http GET https://registry.npmjs.org/grunt-autoprefixer
npm http 304 https://registry.npmjs.org/grunt-autoprefixer
npm http GET https://registry.npmjs.org/diff
npm http GET https://registry.npmjs.org/autoprefixer
npm http GET https://registry.npmjs.org/chalk
npm http 304 https://registry.npmjs.org/diff
npm http 304 https://registry.npmjs.org/chalk
npm http 304 https://registry.npmjs.org/autoprefixer
npm http GET https://registry.npmjs.org/has-color
npm http GET https://registry.npmjs.org/ansi-styles
npm http GET https://registry.npmjs.org/strip-ansi
npm http 304 https://registry.npmjs.org/has-color
npm http 304 https://registry.npmjs.org/strip-ansi
npm http 304 https://registry.npmjs.org/ansi-styles
npm http GET https://registry.npmjs.org/caniuse-db
npm http GET https://registry.npmjs.org/fs-extra
npm http GET https://registry.npmjs.org/postcss
npm http 304 https://registry.npmjs.org/postcss
npm http 304 https://registry.npmjs.org/fs-extra
npm http 304 https://registry.npmjs.org/caniuse-db
npm ERR! Error: No compatible version found: caniuse-db@'^1.0.20140710'
npm ERR! Valid install targets:
npm ERR! ["1.0.20140224","1.0.20140225","1.0.20140226","1.0.20140301","1.0.20140
302","1.0.20140303","1.0.20140304","1.0.20140306","1.0.20140311","1.0.20140313",
"1.0.20140316","1.0.20140318","1.0.20140319","1.0.20140325","1.0.20140326","1.0.
20140330","1.0.20140331","1.0.20140401","1.0.20140403","1.0.20140409","1.0.20140
412","1.0.20140416","1.0.20140422","1.0.20140428","1.0.20140429","1.0.20140502",
"1.0.20140504","1.0.20140505","1.0.20140506","1.0.20140507","1.0.20140511","1.0.
20140516","1.0.20140519","1.0.20140520","1.0.20140521","1.0.20140523","1.0.20140
526","1.0.20140529","1.0.20140601","1.0.20140602","1.0.20140603","1.0.20140606",
"1.0.20140608","1.0.20140609","1.0.20140610","1.0.20140611","1.0.20140616","1.0.
20140617","1.0.20140618","1.0.20140619","1.0.20140622","1.0.20140623","1.0.20140
626","1.0.20140628","1.0.20140702","1.0.20140710","1.0.20140715","1.0.20140716"]

npm ERR!     at installTargetsError (C:\nodejs\node_modules\npm\lib\cache.js:685
:10)
npm ERR!     at C:\nodejs\node_modules\npm\lib\cache.js:607:10
npm ERR!     at saved (C:\nodejs\node_modules\npm\node_modules\npm-registry-clie
nt\lib\get.js:138:7)
npm ERR!     at Object.oncomplete (fs.js:107:15)
npm ERR! If you need help, you may report this log at:
npm ERR!     <http://github.com/isaacs/npm/issues>
npm ERR! or email it to:
npm ERR!     <[email protected]>

npm ERR! System Windows_NT 6.1.7601
npm ERR! command "C:\\nodejs\\\\node.exe" "C:\\nodejs\\node_modules\\npm\\bin\\n
pm-cli.js" "install"
npm ERR! cwd C:\Users\user\workspace\
npm ERR! node -v v0.10.4
npm ERR! npm -v 1.2.18
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR!     C:\Users\user\workspace\npm-debug.log
npm ERR! not ok code 0

Not working well with prefixes at the top

Hello,

your autoprefixer does not work well with prefixes at the very top
of a class, it does not detect / remove it at all:

.class
{
    -moz-box-shadow: 0 0 1em rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 0 1em rgba(0, 0, 0, 0.2);
    color: #000;
    box-shadow: 0 0 1em rgba(0, 0, 0, 0.2);
}

Thanks for this script anyway...

Autoprefixer Removing Too Much

It is my understanding that for the android 2.3 browser -webkit-box-sizing is needed (http://caniuse.com/#search=box-sizing) but yet autoprefixer is removing it. Also, is there a way to stop autoprefixer from removing what it thinks is unnecessary so that it only adds to my css?

This is the relevant section of my Gruntfile...

autoprefixer: {
            dev: {
                browsers: ['> 1%', 'Android >= 2.1', 'Chrome >= 21', 'Explorer >= 7', 'Firefox >= 17', 'Opera >= 12.1', 'Safari >= 6.0'],
                src: 'style.css'
            }
        },

Before...

input[type="search"] {
  -webkit-appearance: textfield;
  /* Addresses appearance set to searchfield in S5, Chrome */
  -webkit-box-sizing: content-box;
  /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

After...

input[type="search"] {
  -webkit-appearance: textfield;
  /* Addresses appearance set to searchfield in S5, Chrome */
  /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

Сгенерированная автопрефиксером source map указывает не на те строчки в исходных файлах.

Помоги, пожалуйста, разобраться с проблемой.
Source map, сгенерированный less (без автопрефиксера) работает корректно.
Автопрефиксер генерит новую css и новую source map.
Т.е. грубо говоря, в папке после его работы у нас есть style.css, style.css.map, style-prefix.css, style-prefix.css.map
Всё, как и должно быть.
И вот тут, при подключении на страничку style-prefix.css, инспектор начинает указывать на неправильные строки. Т.е. source map работает, в инспекторе отображаются ссылки на исходные less файлы, но не на те строки, что нужно.
Где может быть моя ошибка?

IE10 and IE11 need -ms- prefix on linear gradients

IE10 and IE11 require the -ms- prefix on the linear-gradient property, however, Can I Use does not list the -ms- prefix anywhere in their listings. Currently, adding the -ms- prefix manually in the CSS is futile, as it is removed per the Can I Use rules.

I propose a new method for adding custom rules, allowing pre-specified prefixes to go untouched, or maybe adding in support for some of the -ms- prefix(es) that Can I Use is lacking on?

Feature req: Logfile

Could this generate a logfile, or a comment (special comments if needed) logging the replacements it has made? I noticed that some of my files end up shorter than the original, and wanted a way to track what was pulled out. (and vice versa)

grunt-postcss?

@w0rm created good gulp-postcss to combine several PostCSS processors (like Autoprefixer, MQPacker, CSSWrings, postcss-calc or postcss-var) and parse CSS only once.

Maybe we need same plugin for Grunt?

[Question] In multiple file form, what do expand and flatten do?

I've searched everywhere I could but did not find an answer.

 multiple_files: {
      expand: true,
      flatten: true,

Thanks.

Issues with configuration and concatenation

In my gruntFile.js if I include:

autoprefixer: {
            options: {
                browsers: ["last 2 versions", "> 1%", "ie 8", "ie 7"]
            },
files: {
            "css/mycss_prefixed.css": ["css/mycss_1.css", "css/mycss_2.css"]
}
        }

It doesn't work but if I include this it does:

autoprefixer: {
            options: {
                browsers: ["last 2 versions", "> 1%", "ie 8", "ie 7"]
            },
            "css/mycss_prefixed.css": ["css/mycss_1.css", "css/mycss_2.css"]
        }

Also; the inbuilt CSS concatenation injects a comma as a separator - can this be removed?

Move to autoprefixer-core

Autoprefixer 3.0 was released. Now project is split to autoprefixer (CLI, docs, benchmark) and autoprefixer-core (JS API).

Please, use autoprefixer-core in dependencies (API is totally same). This package has no fs-extra dependency and contains less files.

Question: How do you update the metadata from caniuse.com

autoprefixer has a means to update the data about browsers:

autoprefixer --update

How do I execute an update for grunt-autoprefixer?