No Interpolation Tag For Media Query

[Undistraction]

Problem

The following code gives three errors:

• [stylelint] Unexpected duplicate selector ".selector283 ", first used at line 1 (no-duplicate-selectors)
• [stylelint] Unexpected duplicate selector ".selector283 ", first used at line 1 (no-duplicate-selectors)
• [stylelint] Unexpected duplicate selector ".selector283 > *", first used at line 4 (no-duplicate-selectors)

const Layout = styled.div`
  ${getQuery(SMALL_UP)} {
    > * {
      flex: 0 1 50%;
    }
  }

  ${getQuery(MEDIUM_UP)} {
    > * {
      flex: 0 1 25%;
    }
  }
`

It would appear that the solution would be to use interpolation tagging, however there is no tag available for a media query. The closest would be selector, however that only removes the error from the first block:

const Layout = styled.div`
  ${/* sc-selector */ getQuery(SMALL_UP)} {
    > * {
      flex: 0 1 50%;
    }
  }

  ${/* sc-selector */ getQuery(MEDIUM_UP)} {
    > * {
      flex: 0 1 25%;
    }
  }
`

[chinesedfan]

Duplicated of #202.