Vudu NPM | npm.io

✨Vudu

A composable approach to writing styles in JavaScript

Features

Supports media queries
Supports pseudo selectors :hover, :active, etc
Generates animation sequences with @keyframes
Provides configurable, immutable style utilities out of the box
Plays nice with or without popular frameworks like React, Ember, and Angular
Generates necessary styles at runtime
No external stylesheets to include, no duplicate rulesets
Can be used with server-side rendering
Lightweight (18kb minified, 6kb gzipped)
Only one dependency
Autoprefixes styles
Author dynamic and stateful styles with JS!

Getting Started

npm install vudu --save

// UI component usage
import React from 'react';
import v from 'vudu';

const exampleComponent = () => {
  const styles = v({
    someColor: {
      color: 'red',
      ':hover': {
        color: 'green'
      }
    },
    somePadding: {
      padding: '2rem'
    },
    someColumns: {
      width: '100%',
      '@media (min-width: 40em)': {
        width: '50%'
      },
      '@media (min-width: 52em)': {
        width: '33%'
      },
      '@media (min-width: 64em)': {
        width: '25%'
      }
    }
  });
  return (
    <section>
      // v creates strings to be used as classnames
      // that represent the objects above
      <div className={styles.someColor}>
        <p>{'This is red and turns green on hover'}</p>
      </div>
      <div className={styles.somePadding}>
        <p>{'This has a padding of 2rem around the outside'}</p>
      </div>
      <div className={styles.someColumns}>
        <p>{'Full width on mobile, 1/2 width on small breakpoint, 1/3 on medium, 1/4 on large'}</p>
      </div>
    </section>
  );
}

Composability FTW!

One of the key features of Vudu is the ability to compose POJOs and use them within the context of other objects. In other words, setup styles that can be used in multiple places, and then compose them wherever you want. Here’s what that might look like in practice:

import v from 'vudu';

const buttonStyles = {
  base: {
    color: 'blue',
    height: '2.5em',
    padding: '1em 1.5em',
    fontSize: '1.25rem',
    display: 'inline-block',
    verticalAlign: 'middle',
    textDecoration: 'none',
    // ...
  },
  large: {
    fontSize: '2em',
    padding: '1.5em 1em',
    height: '3.25em'
  },
  grey: {
    color: 'grey'
  },
  blue: {
    color: 'blue'
  },

};

// compose with the '@composes' key
const styles = v({
  button: {
    '@composes': [ 
      buttonStyles.base,
      buttonStyles.large,
      this.props.disabled ? buttonStyles.grey : buttonStyles.blue
    ],
    'color': 'red', // to override composes
  }
});

Why call it @composes, you ask? It’s inspired by CSS Modules, which you can read about here.

@font-face

Use all formats for greatest compatibility, however it will work as long as at least one source is declared. Keep in mind that the path to the file is relative to the HTML file where the stylesheet is loaded.

const CalibreRegular = v.addFontFace({  
  fontFamily: 'CalibreRegular',
  src: `url(/path/to/file.eot) format("eot"),
    url(/path/to/file.woff2) format("woff2"),
    url(/path/to/file.woff) format("woff"),
    url(/path/to/file.ttf) format("truetype")`,
  fontWeight: 'normal',
  fontStyle: 'normal'
});

If you have a Webpack build, install the file-loader npm package and import the actual files as paths.

@keyframes

import v from 'vudu';

const keyframeExample = () => {
  const styles = v({
    myAnimation: {
      width: '10px',
      height: '10px', 
      background: 'blue',
      borderRadius: '50%',
      animationName: 'moveCircle',
      animationDuration: '4s',
      animationIterationCount: 'infinite',
      animationTimingFunction: 'linear',
      '@keyframes moveCircle': {
        '50%': {
          transform: 'translateX(50px)'
        },
        '100%': {
          transform: 'translateX(0px)'
        }
      }
    }  
  });
  return (
    <div className={styles.myAnimation}></div>
  );
};

Targeting child elements

Sometimes, in cases where HTML is generated dynamically, you want to select a particular element or class name:

const styles = v({
  targetChild: {
    'h1': { // by element type
      color: 'red'
    }
    'h1.class-name': { // by classname
      color: 'red'
    }
    'h1:hover': { // by pseudo class
      color: 'green'
    }
  }
});

Nesting

const styles = v({
  nest: {
    'h1': { // child of nest selector
      color: 'red',
      'span': { // child of h1
        color: 'green',
        '.child-of-span': { // child of span
          '@composes': [ someObject ] // composes works here too!
        }
      }
    }
  }
});