@reshadow/styled does not support of "referring to other components"

[comerc]

https://www.styled-components.com/docs/advanced#referring-to-other-components

const StyledComponent = styled(Component)`
  ${Wrapper} {
    position: relative;
    margin: 1px auto;
  }
  ${Highlights} {
    position: absolute;
    left: 0;
    top: 0;
  }
`

const Component = ({ className }) => (
  <div className={className}>
    <Wrapper>
      <Highlights/>
    </Wrapper>
  </div>
)

Invalid result:

[comerc]

Also I have problems with other HOCs (see above): ReactTimeout for example.

[radist2s]

@comerc, checkout my babel plugin which allows to use variable identifiers as Reshadow selectors.

import {css} from 'reshadow' // any package is configurable
import literalShadow from '@radist2s/babel-plugin-literal-shadow'

const Button = () => <button />
const Text = () => <input />
const style = css`
    ${literalShadow(Button)} {
        color: red;
    }

    /** template literal inside template literal, what is the madness! **/
    /** does the same as function call in different syntax **/
    ${literalShadow`${Text}`} {
        color: red;
    }
`

@lttb, what do you thing about this approach?