styled-components/stylelint-processor-styled-components

False Positive: Unexpected Duplicate Selector

Undistraction opened this issue · 3 comments

Undistraction commented

Code

const DisclosureButton = styled.button`
  padding: 0;
  margin: 0;
  background: transparent;
  font-weight: bold;
  outline: none;
  border: none;
`

const Layout = styled.div`
  padding: 1.25rem;
  
  ${DisclosureButton} {
    margin-left: 0.5rem;
  }
`

Error

17:31 ✖ Unexpected duplicate selector ".selector10 ", first used at line 10 no-duplicate-selectors

Versions

  • Node 8.11.3
  • "stylelint": "^9.5.0",
  • "stylelint-config-recommended": "^2.1.0",
  • "stylelint-config-styled-components": "^0.1.1",
  • "stylelint-processor-styled-components": "^1.3.2"
chinesedfan commented

Similar with #193. Before someone made the substitution logic more clever, interpolation-tagging is one of workarounds.

Undistraction commented

@chinesedfan Thanks. The following worked:

const Layout = styled.div`
  padding: 1.25rem;

  ${/* sc-sel */ DisclosureButton} {
    margin-left: 0.5rem;
  }
`
chinesedfan commented

@Undistraction OK. I will close this issue. If #110 was implemented, things will be better.