<img src="https://i.imgur.com/R4GAGr8.png" /> <a href="https://travis-ci.org/herber/vxv"><img src="https://travis-ci.org/herber/vxv.svg?branch=master" alt="Build Status"></a> <a href="https://codecov.io/gh/herber/vxv"><img src="https://codecov.io/gh/herber/vxv/branch/master/graph/badge.svg" /></a> <a href="https://codeclimate.com/github/herber/vxv/maintainability"><img src="https://api.codeclimate.com/v1/badges/133d21f1c0e84bfa9e6b/maintainability" /></a> <a href="https://npm.im/vxv"><img src="https://img.shields.io/npm/v/vxv.svg" alt="vxv"></a> A tiny library for writing native css code in JavaScript. VXV is powered by <a href="https://github.com/thysultan/stylis.js">stylis</a>, a fast css preprocessor.

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);

Dynamic styles

You can use plain old JavaScript variables for dynamic styles. You could even build mixins using JavaScript functions.

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

const color = 'blue';

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

& h1 {
  color: ${ color };
}
`;

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

Styling subelements

Subelements have to be suffixed by an &.

const vxv = require('vxv');

vxv`
& p {
  text-align: center;

  &.red {
    color: red;
  }
}
`;

Styling global elements

Global elements have to be tagged by the global statement.

const vxv = require('vxv');

vxv`
:global(body) {
  background: red;
}
`;

Serverside rendering

For serverside rendering you need the vxv-server module.

VXV-Server processes your styles just like VXV does including hash prefixing. server() will return a simple string containing all your styles - you can now save those styles somewhere or send them directly to the user.

const vxv = require('vxv');
const server = require('vxv-server');

const mainStyles = vxv`
h1 { font-size: 2rem }
h2 { font-size: 1.5rem }
h3 { font-size: 1.25rem }
h4 { font-size: 1rem }
h5 { font-size: .875rem }
h6 { font-size: .75rem }
`;

const otherStyles = vxv`
p, dl, ol, ul, pre, blockquote {
  margin-top: 1em;
  margin-bottom: 1em;
}
`;

server();
// => All styles even those used in other files -
// => prefixed and concatenated into single string,
// => that you can use for serverside rendering.

Monorepo

This is a monorepo, which means that there are multiple node modules in a single git repository, all the modules are in packages/. Monorepos are used by many other oss projects including babel, react and meteor - Learn why.

Vxv

Install / Use

README