stylin.jsx

// stylez.js
// colors :: Style
export const colors = {
  black: '#000',
  white: '#fff',
}

// or
// bgBlack :: Style
export const bgBlack = {
  backgroundColor: colors.black,
}

// spacing :: [number]
const spacing = [
  0,
  0.25,
  0.5,
  1,
  2,
  4,
  8,
  16,
];

// addRem :: number -> string
const addRem = n => `${n}rem`;

// sp :: [string]
// [ '0rem', '0.25rem', …]
export const sp = map(addRem, spacing);

// or
// pa2 :: Style
export const pa2 = {
  padding: sp[2],
} // etc

// or
// pa :: int -> Style
const pa = n => {
  padding: sp[n],
} // etc


// WhateverComponent.jsx
const sx = {
  // this is too verbose
  padding: sp[2],
  // but I also really dislike all these spreads
  ...pa2,
  ...pa(2),
  // and again
  color: colors.white,
  backgroundColor: colors.black,
  ...bgBlack,
};

const WhateverComponent = ({ children }) =>
  <div style={sx}>{ children }</div>

// these all feels really convoluted
// when we can just do
const WhateverComponent = ({ children }) =>
  <div className="pa2 white bg-black">{ children }</div>

To do this with Rebass...

<div className="pa2 white bg-black">{ children }</div>

You can do:

<Base p={2} color='white' backgroundColor='black' />

Or if it's something reusable, turn that into another component:

const BlackBox = props => <Base {...props} p={2} color='white' backgroundColor='black' />

Yeah, that bothers me a little as well but it's a trade off, right?
Huge benefit about using this approach, for example, is that you will only load the styles that you actually need, instead of a bundle full of stuff that you don't need.

Also, what @jxnblk mentioned above is very interesting... By relying on good abstractions - like Rebass - you can simplify all this ES2015 mumbo jumbo into a nice and declarative API.

---

Side note: have you looked at CSS Modules plus functional CSS?