cader

Facade your cascade.

npm install cader

const cader = require("cader")
const cade = new cader
 
cade.save({
  "Box": "border-box m0 p0 border-none",
  "Fit": "width-fit height-fit",
  "Tap": "preset-tap font-control",
  "PadWide": "px2 py1",
  "PadTall": "px1 py2",
  "Raised": "shadow-raised",
}).save({
  "ButtonTallRaised": cade.fuse("Tap PadTall Raised"),
  "ButtonWideRaised": cade.fuse("Tap PadWide Raised"),
  "Circle": cade.bond("Box radii-circle"),
})

API

.save(mapping)

• Save mapping to the instance
• @param {Object} mapping
• @return this for chaining

const cade = new cader
 
cade.save({
  "Box": "border-box m0 p0 border-none",
  "Contain": "clearfix relative",
})
 
cade.fuse("Box") // border-box m0 p0 border-none
cade.fuse("Contain") // clearfix relative
cade.fuse("Box Contain") // border-box m0 p0 border-none clearfix relative
cade.bond("Box another") // border-box m0 p0 border-none another

.fuse(atoms)

• fuse atoms into string
• atoms is a space-separated string of saved atoms only
• throws error if attempting to fuse unsaved atoms
• @return string

const cade = new cader
 
cade.save({
  "Box": "border-box m0 p0 border-none",
  "ViewportSize": "w-100vw h-100vh"
})
 
cade.fuse("Box ViewportSize")  // border-box m0 p0 border-none w-100vw h-100vh

.bond(atoms)

• bond atoms into string
• atoms is a space-separated string of saved atoms or foreign particles
• foreign particles are included as is
• @return string

const cade = new cader
 
cade.save({
  "Box": "border-box m0 p0 border-none",
  "ViewportSize": "w-100vw h-100vh"
})
 
cade.bond("Box ViewportSize p2")  // border-box m0 p0 border-none w-100vw h-100vh p2

.freeze()

• freeze mapping to prevent new atoms from being saved
• facilitates immutability
• @return this for chaining

const cade = new cader
cade.freeze()
cade.save({ "Unable": "example" }) // throws Error

.clone()

• clone instance
• useful for extending frozen instances without mutating them
• @return new instance with cloned mapping

const library = new cader
library.save({/* ... */}).freeze() // save library atoms and then freeze export
const feature = library.clone() // new instance has access to atoms from library
feature.save({/* ... */})  // can save more atoms if unique from library atoms

.pair(mate)

• pair instance with another instance
• shortcut for .clone().save(mate.port())
• will throw if there are conflicts
• @return clone containing atoms from both

const shape = new cader
const paint = new cader
/* ... */
const super = shape.pair(paint)

.port()

• get serializable object representing atom mapping
• mainly for internal use or inspection
• @return serializable plain object

.help()

• log helpful info about an instance including atom mapping and methods
• useful for inspection, debugging, learning
• @return this for chaining

Compatibility

• ES5+
• CommonJS
• Node
• Web via webpack | rollup | browserify