search

styled-components / stylelint-processor-styled-components

Lint your styled components with stylelint!
https://styled-components.com
MIT License
656 stars 61 forks source link

feat(selector-guessing): improve guess at selector #281

Open uniqname opened 5 years ago

uniqname commented 5 years ago

This is a bit of a selfish PR, but I was thinking we could be just a bit smarter about guessing whether an interpolation is a selector or not. I don't think that & and > aren valid tokens in CSS for anything other than as part of a selector, so we could use those to reduce the need for sc tags. This helps in cases like the following (very common in our code base, don't know how common in others):

const SomeCompnent = styled(MyComponent)`
  & > ${SomeChild},
  & > ${OtherChild} {
    color: blue;
  }
`

SomeChild would not be identified as a selector since it is part of a list of selectors. Commas are valid CSS tokens in lots of scenarios, so looking for that is not really an option, but & and > are only valid as part of a selector (I don't think 🤔 ), so it would at least cover those. Thoughts? Am I way off base here?

coveralls commented 5 years ago

Coverage Status

Coverage remained the same at 100.0% when pulling e8a6bb9cd3b8c643270cb3ebe0f66ace72f1f1a0 on uniqname:fix/selector-guess into 8a5fab0fd47526a2e7977ae968e0987c95045e70 on styled-components:master.

chinesedfan commented 5 years ago

@uniqname Sure. Can you add some test cases for your new work?