blessed-css

CSS engine for blessed

#background {
  bg: blue;
}
 
box {
  fg: black;
  bg: white;
}
 
box:border {
  fg: magenta;
}

What works?

• Inheriting styles from parent components
• Node names (box, form, button, etc.)
• ID names (#background)
• Class names (.dialog)
• Attribute selectors ([draggable], [shadow], etc.)
• Pseudo selectors (:border, :focus, :hover, :scrollbar, etc.)

Example

const blessed = require('blessed')
const css = require('blessed-css')
 
const style = css(`
  #background {
    bg: blue;
  }
 
  .dialog {
    fg: black;
    bg: white;
  }
 
  .dialog:border {
    fg: magenta;
  }
`)
 
const screen = blessed.screen({
  smartCSR: true
})
 
const background = blessed.box({
  parent: screen,
  id: 'background'
})
 
// Style the `box#background` according to the CSS rules
style(background)
 
const box = blessed.box({
  parent: screen,
  className: 'dialog',
  top: 'center',
  left: 'center',
  width: '60%',
  height: '55%',
  content: 'Hello world!',
  border: 'line',
  shadow: true
})
 
// Style the `box.dialog` according to the CSS rules
style(box)
 
screen.key(['escape', 'q', 'C-c'], (ch, key) => process.exit(0))
 
screen.render()