Panda VCSS

Virtual CSS in JavaScript (or CoffeeScript, TypeScript, and so on).

(Examples in CoffeeScript because I like to write in CoffeeScript, but the semantics are the same as those of JavaScript.)

# Let's define a helper... 
rhythm = (lineHeight, fontSize) -> [
  p "font-size", scale lineHeight, fontSize
  p "line-height", lineHeight
]
 
# The s and p are functions that return mixins, 
# functions that will modify a stylesheet. 
# Here we just run them with no arguments, 
# which will create an empty stylesheet for us. 
# The render function will convert that into a 
# string of CSS. 
 
css = render s "article", [
 
  # The & will use the parent selector 
  s "& > h1", [
 
    # Unit helpers like rem and pct are built-in 
    rhythm (rem 4), (pct 90)
  ]
 
  s "& > p", [
    p "font-face", "Montserrat"
  ]
]
 
assert.equal css, """
  article > h1 { font-size: 3.6rem; line-height: 4rem; }
  article > p { font-face: Montserrat; }
 """

Installation

npm i -s panda-vcss