# panda-vcss

> Virtual CSS for JavaScript.

Latest version **1.0.0** (published 2018-03-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install panda-vcss
pnpm add panda-vcss
yarn add panda-vcss
bun add panda-vcss
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2018-03-26 |
| First published | 2018-03-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 11.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Dan Yoder |
| Maintainers | dyoder |
| Keywords | css, virtual, javascript, coffeescript |

## Links

- npm: https://www.npmjs.com/package/panda-vcss
- Repository: https://github.com/pandastrike/biscotti
- Homepage: https://github.com/pandastrike/biscotti#readme
- Issues: https://github.com/pandastrike/biscotti/issues
- npm.io page: https://npm.io/package/panda-vcss

## Dependencies (2)

- [fairmont-helpers](https://npm.io/package/fairmont-helpers.md) ^3.3.2
- [fairmont-multimethods](https://npm.io/package/fairmont-multimethods.md) ^2.0.2

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2018-03-26

## README

# 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.)

```coffee
# 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`

---
_Source: https://npm.io/package/panda-vcss · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._