nested-camel

A function which flattens a nested object tree by recursively joining and camelcasing keys. Useful as a utility for css-in-js frameworks.

Usage

import { css } from 'glamor';
import nested from 'nested-camel';

// Use it directly:
const rule = css(nested({
  font: {
    family: 'fantasy',  // fontFamily
    size: '30em',       // fontSize
    weight: 'bold',     // fontWeight
  },
  border: {
    top: {
      style: 'dashed',  // borderTopStyle
      color: 'red',     // borderTopColor
      width: 'thick',   // borderTopWidth
    },
    bottom: {
      style: 'light',   // borderBottomStyle
      color: 'blue',    // borderBottomColor
      width: 'thin',    // borderBottomWidth
    },
  },
}));

// Use it with object-rest-spread:
const rule2 = css({
  background: 'blue',    // background
  ...nested({
    font: {
      family: 'fantasy', // fontFamily
      size: '30em',      // fontSize
      weight: 'bold',    // fontWeight
    },
  }),
});

// Compose it:
import { compose } from 'ramda';
const ncss = compose(css, nested);

const rule3 = ncss({
  font: {
    family: 'fantasy',  // fontFamily
    size: '30em',       // fontSize
    weight: 'bold',     // fontWeight
  },
  border: {
    top: {
      style: 'dashed',  // borderTopStyle
      color: 'red',     // borderTopColor
      width: 'thick',   // borderTopWidth
    },
    bottom: {
      style: 'solid',   // borderBottomStyle
      color: 'blue',    // borderBottomColor
      width: 'thin',    // borderBottomWidth
    },
  },
});

License

MIT