Better Composition

[emmatown]

Because of #154 we can make composition way more powerful. We should be able to support interpolations anywhere.

This is what I'm thinking should be possible

const flexCenter = css`
  display: flex;
  justify-content: center;
  align-items: center;
`

const CenteredComponent = styled.div`
  display: block;
  ${flexCenter}
`

In this example display: flex; should take priority over display: block; since the interpolation is after display: block;.

This should be possible since we can split the output object at each interpolation. We will likely have to use a custom version of postcss-js's objectify to do this. We'll also have to make postcss think interpolations are at rules so they be parsed.

[lukeed]

I've been checked out for a bit, but aren't these returned as objects? If so, then you can recursively expand/assign the object into a result. Nested objects will overwrite any matching, existing keys.

[tkh44]

@lukeed They return strings. This problem is a bit more nuanced than that, but what you describe is where we are on the path to currently. The first step was to get objects working.

[lukeed]

Gotcha 👍

This is likely your path already, but just in case... in my mind, I see this happening:

const flexCenter = {
  display: 'flex',
  'justify-content': 'center',
  'align-items': 'center'
};

const centeredComponent = [{
  display: 'block',
  'text-align': 'center'
}, flexCenter];
//=> `compose` = [styles].push(object);

function assign(tar) {
  var k, src, i=1, len=arguments.length;
  for (; i < len; i++) {
    src = arguments[i];
    for (k in src) {
      tar[k] = src[k];
    }
  }
  return tar;
}

function compile(val) {
  return Array.isArray(val) ? assign.apply(null, val) : val;
}

console.log( compile(flexCenter) );
//=> { display: 'flex',
//=>   'justify-content': 'center',
//=>   'align-items': 'center' }

console.log( compile(centeredComponent) );
//=> { display: 'flex',
//=>   'text-align': 'center',
//=>   'justify-content': 'center',
//=>   'align-items': 'center' }

Of course, could also just use Object.assign if don't care about IE.

Once you have these outputs, then I would convert the keys into the appropriate property names.

[tkh44]

https://github.com/tkh44/emotion/pull/213/files