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