How can I get grunt-autoprefixer to prefix uncompiled LESS files?

Question

I'm working with LESS and I'd like to run grunt-autoprefixer on my LESS markup WITHOUT compiling LESS, because my LESS is compiled on my CMS automatically.

Is this possible?

Here's my Gruntfile.js

module.exports = function(grunt) {

grunt.initConfig({
  concat: {
    sqs_template: {
      src: ['js/one.js', 'js/two.js'],
      dest: 'sqs_template/scripts/app.js',
    },
  }, 
  autoprefixer: {
        options: {
            remove: true,
        },
      multiple_files: {
      expand: true,
      flatten: true,
      src: 'css/*.less', 
      dest: 'sqs_template/css/',
    },
  },
    watch: {
      js: {
        files: ['js/**/*.js'],
        tasks: ['concat'],
      },
      css: {
        files: ['css/**/*.less'],
        tasks: ['autoprefixer'],
      },
    },
});

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


};

Here's an example of the LESS I'm trying to prefix:

//------------------------------------*\

// SOME CSS

//------------------------------------*/

// Variables
@site-width: 960px;
@color: #333333;

// Mixins
.some-font {
    font-family: sans-serif;
    font-size: 1.5rem;
    font-weight: bold;
}

.some-container {
    display: flex;
    max-width: @site-width;
    margin: 0 auto;

    .some-container-inner {
        p {
            .some-font;
            color: @color;
        }
    }
}

I would want grunt-autoprefixer to do nothing but prefix my LESS, and put it into the sqs_template folder. Right now, grunt-autoprefixer errors because it doesn't seem to recognize the variables or mixins.

Is this possible?

Thanks!

You can't. Autoprefixer can only parse CSS syntax. It does not know Less syntax. — seven-phases-max, Apr 11 '15 at 04:02
Thank you, I thought as much. I'm looking for other plugins that might do it. Maybe have found a few. — jasonbarone, Apr 11 '15 at 15:27

score 1 · Answer 1 · answered Apr 11 '15 at 07:39

Instead of autoprefixing, you could use mixins to prefix the needed values yourself. There's LESS-Prefix library that contains mixins for the usual suspects.

As a simple example, if you are using LESS-Prefix (or have a similar mixin yourself), you can just include the mixin file and type the CSS-properties prepended by a .

div {
    .box-shadow(0px 0px 10px rgba(255,0,0,.5));
}

which passes the values through this mixin:

.box-shadow(@args) {
    -webkit-box-shadow: @args;
    box-shadow: @args;
}

and you'll end up with this:

div {
    -webkit-box-shadow: 0px 0px 10px rgba(255,0,0,.5);
    box-shadow: 0px 0px 10px rgba(255,0,0,.5);
}

How can I get grunt-autoprefixer to prefix uncompiled LESS files?

1 Answers1