Core API

add ( object )

Adds data for compilation.

api.add({
    body: { 
        padding: 0 
    }
});

import ( string | [string, string, ...] )

AbsurdJS supports importing of JavaScript, JSON, YAML and CSS files.

module.exports = function(api) {
    api.import(__dirname + '/config/sizes.js');
    api.import([
        __dirname + '/config/colors.js',
        __dirname + '/config/sizes.js'
    ]);
}

importCSS ( string )

Send a string containing valid CSS code.

module.exports = function(api) {
    api.importCSS('body { margin: 0; font-size: 20px; }');
}

storage ( key, value )

Setting value:
api.storage("mixin", function(px) { 
    return {
        fontSize: px + 'px'
    }
});
Getting value:
api.add({
    body: [
        api.storage("mixin")(18)
    ]
});

plugin ( name of property, function )

The plugin's function accepts two arguments. The first one is a reference to the API and second one is the value of the CSS property.

api.plugin('my-custom-gradient', function(api, colors) {
    return {
        background: 'linear-gradient(to bottom, ' + colors.join(", ") + ')'
    };
});

darken ( color, percents )

api.add({
    body: {
        color: api.darken('#BADA55', 25)
    }
});

lighten ( color, percents )

api.add({
    body: {
        color: api.lighten('#BADA55', 25)
    }
});

raw ( string )

 api.raw('/* comment here */');

rawImport ( string | [string, string, ...] )

api.rawImport(['bootstrap-responsive.css', 'bootstrap.css']);

compile ( function, options )

Example:
api.compile(function(err, result) {
    // ...
}, {});
Default options:
{
    combineSelectors: true,
    minify: false,
    processor: [internal CSS preprocessor],
    keepCamelCase: false
}

compileFile ( path to file, function, options )

Check compile method for details about the options.

api.compileFile("css/styles.css", function(err, result) {
    // ...
}, {});

hook ( method function )

If your hook handler returns true the default method behaviour is skipped.

api.hook("add", function(rules, stylesheet) {
    // write your logic here
    return true;
});

register ( method, function )

Create your own API function.

api.register("toJSON", function(callback) {
    // your custom code here
})

morph ( type )

type could be html, component, dynamic-css or jsonify. Check out HTML preprocessing for more information.

HTML preprocessing:
api.morph("html").add({
    html: {
        head: {
            title: "AbsurdJS is awesome"
        }
    }
}).compile(function(err, html) {
    // <html>
    //    <head>
    //        <title>AbsurdJS is awesome</title>
    //    </head>
    // </html>
})
Components preprocessing:
api.morph("component").add({
    css: {
        ".page": {
           display: 'block' 
        }
    },
    html: {
        'section.page': {
            h2: "That's a page"
        }
    }
}).compile(function(err, css, html) {
    /*
    css = .page {
      display: block;
    }
    html = <section class=\"page\">
        <h2>That's a page</h2>
    </section>"
    */
})




comments powered by Disqus