Autoprefixer not working in NPM

Question

I am creating a taskrunner with NPM — I don't want to use Gulp or Grunt...slow!. The task runner is working and it's fast! But...the autoprefixer is not prefixing. The console.logs it has are also not showing up in the terminal. Looks like it is not being fired. I am calling it in a function called autoPrefix() after the SCSS is compiled to CSS.

I have a package.json with a script object task that directs to start.js That file has the following code:

var watch = require('node-watch');
var sass = require('node-sass');
var fs = require('fs');
var browserSync = require('browser-sync');
var autoprefixer = require('autoprefixer');
var postcss = require('postcss');
var inputFile = 'static/scss/compiler.scss';
var outputFile = 'static/css/site.min.css';

/**
 * BrowserSync
 */

browserSync({
    server: "./",
    files: ["./*.html", "static/css/*", "static/js/*"],
    logLevel: "silent",
    notify: false
});


/* AUTOPREFIXER NOT WORKING! */

var autoPrefix = function() {
    postcss([ autoprefixer ]).process({
        from: outputFile,
        to: outputFile
    }).then(function (result) {
        result.warnings().forEach(function (warn) {
            console.warn(warn.toString());
        });
        console.log(result.css);
    });
}


/**
 * Sass Compiler
 */

var compileSass = function(file) {

    sass.render({
        file: inputFile,
        outputStyle: 'compressed'
    }, function(error, result) {
        if (!error) {
            /* Write new file */
            fs.writeFile(outputFile, result.css, function(err) {
                if (!err) {
                    if (file) {
                        autoPrefix();
                        console.log('', '\x1b[34m', 'Done compiling SCSS, after a change in:', '\x1b[0m' + file);
                        console.timeEnd('Speed');
                        console.log('\n');
                    } else {
                        autoPrefix();
                        console.log('  Here we go! Compiling: ' + inputFile + '\n \n' + 'OK done! I\'m watching! ' + '\n');
                    }
                } else {
                    console.log('Hmm something went wrong.. ' + err);
                }
            });
        } else {
            console.log('', '\x1b[31m', 'Error in file: ', '\x1b[0m' + error.file + ' on line: ' + error.line + '\n' + error.message + '\n');
        }
    });
}
compileSass();


/**
 * Watch
 */
watch('static/scss/', function(filename) {
    var file = filename;
    compileSass(file);
    console.time('Speed');
});

What am I doing wrong? I am coding it like the example here: https://github.com/postcss/autoprefixer#javascript

score 0 · Answer 1 · answered Aug 09 '16 at 19:57

Fixed. I had to push the SASS compile results to PostCSS and then prefix is.

Code here:

var watch = require('node-watch');
var sass = require('node-sass');
var fs = require('fs');
var browserSync = require('browser-sync');
var autoprefixer = require('autoprefixer');
var postcss = require('postcss');
var inputFile = 'static/scss/compiler.scss';
var outputFile = 'static/css/site.min.css';
/**
 * BrowserSync, set folders to watch
 * Do not set SCSS folder
 */
browserSync({
    server: "./",
    files: ["./*.html", "static/css/*", "static/js/*"],
    logLevel: "silent",
    notify: false
});

/**
 * Sass Compiler
 */
var compileSass = function(file) {

    sass.render({
        file: inputFile,
        outputStyle: 'compressed'
    }, function(error, result) {

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

            if (!error) {
                /* Write new file */
                fs.writeFile(outputFile, result.css, function(err) {
                    if (!err) {
                        if (file) {
                            console.log('', '\x1b[34m', 'Done compiling SCSS, after a change in:', '\x1b[0m' + file);
                            console.timeEnd('Speed');
                            console.log('\n');
                        } else {
                            console.log('  Here we go! Compiling: ' + inputFile + '\n \n' + 'OK done! I\'m watching! ' + '\n');
                        }
                    } else {
                        console.log('Hmm something went wrong.. ' + err);
                    }
                });
            } else {
                console.log('', '\x1b[31m', 'Error in file: ', '\x1b[0m' + error.file + ' on line: ' + error.line + '\n' + error.message + '\n');
            }
        });
    });
}
compileSass();

/**
 * Watch
 * On each watch, compile SCSS and start timer
 */
watch('static/scss/', function(filename) {
    var file = filename;
    compileSass(file);
    console.time('Speed');
});

Autoprefixer not working in NPM

1 Answers1