styled-components/stylelint-processor-styled-components

Styleint Treats Multiple Components As Same Component

Undistraction opened this issue · 3 comments

Undistraction commented

The following two components defined in the same file results in an error:

Components

const Layout = styled(HSpreadLayout)`
  > *:first-child {
    padding: 1.25rem;
  }
`

const NavList = styled(HList)`
  > * + * {
    border-left: 1px solid #bbb;
  }
`

Error

Expected selector ".selector6 > * + *" to come before selector ".selector5 > *:first-child" no-descending-specificity

Expected
Each component should be evaluated separately.

  • 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

@Undistraction You're right. But I am afraid that stylelint doesn't give a processor the possibility to do that. Because a processor can only extract codes from user's input file and ask stylelint to lint together, which is a string, instead of array.

Undistraction commented

@chinesedfan That seems like a pretty big issue to me because it forces you to define your components in an order just to satisfy the processor. It could also potentially lead to cases that cannot be satisfied by changing component order.

sergio-toro commented

We have the same issue, turning off no-descending-specificity linting rule until this gets fixed.
Big issue :(