Using the sibling selector together with props

[ronderksen]

Yesterday, I ran into the following issue:

 const getColorsForType = (type) => {
  switch (type) {
    case 'a': 
     return css`
       background-color: black;
       color: white;
   `;
    case 'b':
      return css`
      background-color: lightgreen;
      color: black;
      `
  }
}
 const Banner = Styled.div`
  ${({ type }) => css`
    ${getColorsForType(type)}
    width: 100%;
    display: inline-block;
 
    & + & {
       margin-left: 16px;
     }
  `}
`

As long as two siblings have the same type, this works fine. But if type a and type. b are next to each other, the classes differ and the sibling selector is no longer applied. Normally in CSS, I would add a secondary class for the colors and use the class with the shared styles for the sibling selector. I know I can add a className to the Banner component and use that for the sibling selector, but it feels like a hack. Can I solve it in a better way, that matches more with the "Emotion" way?

[Andarist]

The usual answer is - don't do this. Don't introduce such contextual styles.

However, if you really want this you can do this (when using our Babel plugin):

 const Banner = Styled.div`
  ${({ type }) => css`
    ${getColorsForType(type)}
    width: 100%;
    display: inline-block;
 
    ${() => Banner} + ${() => Banner} {
       margin-left: 16px;
     }
  `}
`

[ronderksen]

Yeah, I've tried that approach, but TypeScript doesn't like it. I've solved it by using a boolean prop set to true on the second element:

 const Banner = Styled.div`
  ${({ type, isSecond }) => css`
    ${getColorsForType(type)}
    width: 100%;
    display: inline-block;
 
    ${isSecond &&
    css`
      margin-left: ${theme.base.spacing.base}px;
    `}
  `}
`

[Andarist]

This should make TS satisfied:

 const Banner = Styled.div`
  ${({ type }) => css`
    ${getColorsForType(type)}
    width: 100%;
    display: inline-block;
 
    ${() => String(Banner)} + ${() => String(Banner)} {
       margin-left: 16px;
     }
  `}
`

I prefer your solution with isSecond though.