docpad-plugin-autoprefix-with-configuration

autoprefix.plugin.js

'use strict';

var autoprefixer = require('autoprefixer');

module.exports = function autoprefix(BasePlugin) {
    return BasePlugin.extend({
        name: 'autoprefix',

        config: {
            // fed straight to autoprefixer
        },

        render: function (opts) {
            if (opts.inExtension !== 'autoprefix') {
                return;
            } else if ((opts.outExtension || 'css') !== 'css') {
                return;
            } else {
                return this._render(opts);
            }
        },

        renderDocument: function (opts) {
            if (opts.file.get('autoprefix')) {
                return this._render(opts);
            }
        },

        _render: function (opts) {
            try {
                opts.content = autoprefixer.process(opts.content, this.config).css;
            } catch (err) {
                return err;
            }
        }
    });
};

package.json

{
  "name": "docpad-plugin-autoprefix-with-configuration",
  "version": "2.1.0",
  "description": "apply autoprefix with configuration",
  "main": "./src/autoprefix.plugin.js",
  "keywords": [
    "docpad",
    "docpad-plugin",
    "autoprefix",
    "autoprefixer"
  ],
  "author": "Garth Kidd",
  "license": "ISC",
  "dependencies": {
    "autoprefixer": "^4.0.0"
  },
  "peerDependencies": {
      "docpad": "^6.0.0"
  },
  "engines": {
    "node": ">=0.8.0"
  }
}

This docpad plugin can be dropped into your plugins directory to perform much the same job as docpad-plugin-autoprefix, except:

• You can feed configuration into it, including browsers
• You can't trigger it with document metadata

The latter would require a renderDocument method doing much the same as render, only checking for opts.file.autoprefix rather than opts.inExtension and opts.outExtension. Good luck!

Update: docpad can't render x.css.autoprefix.less without docpad-plugin-less recognising autoprefix as a valid outExtension. It doesn't, so we need to be able to trigger this plugin via autoprefix in the metadata. I've added the required renderDocument method.

Your plugin does not work.

I used your plugin and it always uses the default browsers configuration.

• browsers is not an option of autoprefixer.process().
• browsers is a configuration of autoprefixer().

See the autofixer-core documentation:

https://github.com/postcss/autoprefixer-core

To fix it, your code should look like:

'use strict';

var autoprefixer = require('autoprefixer');

module.exports = function autoprefix(BasePlugin) {
    return BasePlugin.extend({
        name: 'autoprefix',

        config: {
            // Options to create the autoprefixer processor
            autoprefixer: null,
            // Options to pass to the process
            options: null
        },

        render: function (opts) {
            if (opts.inExtension !== 'autoprefix') {
                return;
            } else if ((opts.outExtension || 'css') !== 'css') {
                return;
            } else {
                return this._render(opts);
            }
        },

        renderDocument: function (opts) {
            if (opts.file.get('autoprefix')) {
                return this._render(opts);
            }
        },

        _render: function (opts) {
            try {
                var processor = autoprefixer(this.config.autoprefixer);
                opts.content = processor.process(opts.content, this.config.options).css;
            } catch (err) {
                return err;
            }
        }
    });
};

You need to create a processor object with some of the options (like browser) and then you call process() with the rest of the options.

The configuration in docpad.coffee looks like:

        autoprefix:
            autoprefixer:
                browsers: ['> 0.1%', 'last 5 versions', 'IE 8', 'IE 9', 'IE 10']
                cascade: false
            options:
                map:
                    inline: true