Component references in object-notation styles

Per the conversation with @mxstbr in spectrum, I’ve gotten nested selectors and media queries working with the new object-notation, but not Component references like ${Text}.

Here’s my Sandbox for an example (check out the ObjectTest file): https://codesandbox.io/s/xz9q6ovvlo

Reproduction

Expected Behavior

• <Text> component has red text

Actual Behavior

• <Text> component has purple text

[thysultan]

Maybe a ToString method on the component could implicitly extract this when used as an object key.

function a () {}
a.toString = () => { return '.' + this.styledComponentId }
var obj = {[a]: ''}

[probablyup]

Here is a workaround: https://codesandbox.io/s/yv8ojjr5wj, but it relies on internals. I suppose we could add a util to make the pattern a little neater:

import styled, { getSelector } from 'styled-components';

const Thing = styled.div({
  color: 'red',
});

const OtherThing = styled.div({
  [getSelector(Thing)]: {
    color: 'blue',
  },
});