Bananacss NPM | npm.io

Banana CSS

:banana: The Brazilian CSS superset.

What is?

Syntax abstractions for complex native CSS features.
If you can, compile native CSS features like a pre-processor (ex: Custom properties and @import).
Provide a simple abstraction for a Semantic Grid System with calc().
Extra features (ex: @function).

How it works?

Write your style with banana syntax and compile for pure CSS.

How to install

Verify if you have node and npm installed.

Command Line

$ npm install -g bananacss

Module

$ npm install bananacss --save

Command Line Usage

Compile you .bnn file to .css

$ banana <input_path>

Watch for changes.

$ banana <input_path> -w

Output to dir when passing files.

$ banana <input_path> -o <out_path>

Show the project version.

$ banana --version

Show all available commands.

$ banana --help

The bananafile

Create a file called bananafile.json in the directory where you will run the command $ banana and configure as need.

{
	"bnnSize" : true,
	"bnnPosition" : true,
	"bnnGradient" : true,
	"bnnVariable" : true,
	"bnnImport" : true,
	"bnnAlign" : true,
	"bnnWidth" : true,
	"bnnHeight" : true,
	"bnnCol" : true,
	"bnnRow" : true,
	"bnnBox" : true,
	"bnnFunction" : true,
	"compress" : false
}

All features have true as default value, except the compress.

Module Usage

const inputBananaCode = '.a {bnn-size: 50px;}';

// Features injection
const config = {};
config.bnnSize = true;
config.bnnPosition = true;
config.bnnGradient = true;
config.bnnVariable = true;
config.bnnImport = true;
config.bnnAlign = true;
config.bnnWidth = true;
config.bnnHeight = true;
config.bnnCol = true;
config.bnnRow = true;
config.bnnBox = true;
config.bnnFunction = true;
config.compress = true;

const Banana = require('banana')(config);

// Output the css
const output = Banana.render(inputBananaCode);

console.log(output); // .a {width: 50px; height: 50px;}