vxv

Tiny css in js library

Usage no npm install needed!

<script type="module">
  import vxv from 'https://cdn.skypack.dev/vxv';
</script>

README

Build Status vxv

A tiny library for writing native css code in JavaScript.
VXV is powered by stylis, a fast css preprocessor.
Full documentation

Features

  • Tiny: VXV does not bloat you bundle
  • Powered by tagged template literals
  • Namespaced: VXV automatically namespaces your css
  • Modular: Import css from js files
  • Isomorphic: VXV works in node and in browsers, this is great for server side rendering
  • Just CSS: VXV does not force you to learn anything new, it's just good old css.

Install

$ npm install vxv

Usage

VXV supports standard css(with some extras). It returns a simple class name that you can use to access the styles.

const vxv = require('vxv');
const xou = require('xou');

const styles = vxv`
font-family: sans-serif;

// Nested elements have to be tagged by an &.
& h1 {
  color: red;
}

& p {
  color: blue;
}
`;

const element = xou`<div class="${ styles }">
  <h1>I am red.</h1>
  <p>I am blue.</p>
</div>`;

document.body.appendChild(element);

License

MIT © Tobias Herber