Referring to other components

[nonameolsson]

How can I refer to other styled-components with twin.macro?
https://styled-components.com/docs/advanced#referring-to-other-components

Example

import { StyledList, StyledListItem } from 'components/list'

export const OngoingTaskList = styled(StyledList)`
  padding: 0;

  ${StyledListItem} { <!------ HERE
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background 350ms cubic-bezier(0.5, 1, 0.5, 1);
    border-width: 1px;
    border-color: transparent;
    border-style: solid;
    padding: 0 1rem;

    &:last-child {
      padding-bottom: 0.5rem;
    }

    &:hover {
      background-color: ${({ theme }) => theme.colors.COLOR_WARNING_TRANSPARENT_HOVER};
      border-color: ${({ theme }) => theme.colors.COLOR_WARNING_HOVER_BORDER};
    }
  }
`

[nonameolsson]

I am going to answer this myself, after getting some help of a colleague :)

import { StyledList, StyledListItem } from 'components/list'

export const OngoingTaskList = styled(StyledList)`
  ${tw`p-0`};

  ${StyledListItem} {
    ${tw`
      rounded cursor-pointer transition-colors border border-transparent border-solid py-0 px-4
      last:pb-2
      hover:(bg-warning border-warning)
  `};
  }
`