Learning-postcss-my-plugin

Learning-postcss-my-plugin

by Ann Tseng

HTML

Learning : postcss - my - plugin

CSS

//postcss
.my-plugin{
	font-family:"Droid Sans Fallback", fontstack("Helvetica");
}

//css
.my-plugin{
	font-family:"Droid Sans Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

JavaScript

var postcss = require('postcss');

module.exports = postcss.plugin('myplugin', function myplugin(options) {

    options = options || {};

    var fontstacks_config = {
        'Arial': 'Arial, "Helvetica Neue", Helvetica, sans-serif',
        'Helvetica' : '"Helvetica Neue", Helvetica, Arial, sans-serif'
    };

    function toTitleCase(str){
        return str.replace(/\w\S*/g, function(txt){
            return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
        });
    }

    return function (css){

       //Traverses the css nodes, calling callback for each rule node.
        css.walkRules(function(rule){

            //Traverses the rule nodes, calling callback for each declaration node.
            rule.walkDecls(function(decl){

                var value = decl.value;

                //search
                if(value.indexOf('fontstack(') !== -1){

                    var fontstack_requested = toTitleCase(value.match(/\(([^)]+)\)/)[1].replace(/["']/g, "")),
                        fontstack = fontstacks_config[fontstack_requested];

                    //new value
                    decl.value = value.replace(/fontstack\(.*\)/g, fontstack);
                }

            });

        });

    }

});