gradient prefixing

[charliewilco]

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. https://github.com/ai/autoprefixer/issues/204

[nDmitry]

Make sure you are using the last version of grunt-autoprefixer (0.7.2). Also try to reinstall it to get the last version of Autoprefixer (npm remove grunt-autoprefixer && npm install grunt-autoprefixer).

I can't reproduce the issue:

$ cat Gruntfile.js 
'use strict';

module.exports = function (grunt) {
    grunt.initConfig({
        autoprefixer: {
            dist: {
                src: 'a.css',
                dest: 'b.css'
            }
        }
    });

    grunt.loadNpmTasks('grunt-autoprefixer');
};

$ cat a.css 
a {
    background: linear-gradient(to right, #fff, #000);
}

a {
    background: linear-gradient(#fff, #000);
}

a {
    background: linear-gradient(right, #fff, #000);
}

$ cat b.css
a {
    background: -webkit-gradient(linear, left top, right top, from(#fff), to(#000));
    background: -webkit-linear-gradient(left, #fff, #000);
    background: linear-gradient(to right, #fff, #000);
}

a {
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#000));
    background: -webkit-linear-gradient(#fff, #000);
    background: linear-gradient(#fff, #000);
}

a {
    background: -webkit-gradient(linear, right top, left top, from(#fff), to(#000));
    background: -webkit-linear-gradient(right, #fff, #000);
    background: linear-gradient(right, #fff, #000);
}

[bobrocke]

I'm seeing the same thing at the OP. I reinstalled grunt-autoprefixer and have version 0.7.2 and autoprefixer 1.1.20140301.

Is there a solution?

[nDmitry]

@bobrocke please show your Grunt config and that piece of CSS where you got a problem.

[bobrocke]

Here's my full gruntfile.js:

module.exports = function(grunt) {

    grunt.initConfig({
        sass: {
            dist: {
                options: {
                    sourcemap: true
                },
                files: {
                    'assets/css/main.css': 'assets/scss/main.scss'
                }
            }
        },
        autoprefixer: {
            options: {
                browsers: ['last 2 version', 'ie 8', 'ie 9']
            },
            src: 'assets/**/*.css'
        },
        watch: {
            options: {
                debounceDelay: 1500,
            },
            scss: {
                options: {
                    livereload: true
                },
                files: ['assets/scss/*.scss'],
                tasks: ['sass'],
            },
            css: {
                options: {
                    livereload: true
                },
                files: ['assets/**/*.css'],
                tasks: ['autoprefixer'],            
            },
            code: {
                options: {
                    livereload: true
                },
                files: [
                    '**/*.{php,html,js}',
                    '!**/perch/core/**',
                    '!**/node_modules/**'
                ]
            }
        }
    });

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

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

And this is the SCSS code block causing the trouble:

@mixin brpButton {
    font-size: 1.4rem;
    border-color: transparent;
    border-top: 1px solid #7AA4A8;
    border-style: none;
    border-top-style: outset;
    /* background: #6a999e; */
    /* @include linear-gradient ($ColorLink, #6a999e); */
    background-image: linear-gradient(#4a6e72, #6a999e);
    padding: 0.3em 0.8em;
    border-radius: 0.6em;
    box-shadow: none;
    text-shadow: none;
    color: #000000;
    font-family: $FontSansSerif;
    text-decoration: none;
    vertical-align: middle;
}

[ai]

Seems like it is grunt-contrib-sass issue: https://github.com/ai/autoprefixer/issues/216#issuecomment-37734328

[bobrocke]

When I tracked this to its end, the problem was with my use of the Bourbon SASS extensions.

Bourdon version 4.0.0rc1 corrects it: http://rubygems.org/gems/bourbon/versions/4.0.0.rc1