search

opencrvs / opencrvs-core

A global solution to civil registration
https://www.opencrvs.org
Other
85 stars 67 forks source link

Stylelint raises a false positive for no-duplicate-selectors when using non standard selectors in styled-components #146

Closed euanmillar closed 6 years ago

euanmillar commented 6 years ago

${} causes a stylelint false positive for no-duplicate-selectors when using non standard selectors in styled-components

const StyledButton = styled(PrimaryButton)`
justify-content: center;
${ButtonIcon} {
  margin: 1em
}

Discovered here:

https://github.com/jembi/OpenCRVS/commit/8d7e89d128dc766ae21803176119b8f9035749e7#diff-08e3b93dc8a702ba003519765ab8fd14

Stylelint issue raised here: https://github.com/stylelint/stylelint/issues/2199

This could be expected behaviour for Stylelint, and in fact the error could be an issue with StyledComponents "styled" method.

The only solution for now is to disable stylelint for this pattern:

const StyledButton = styled(PrimaryButton)`
justify-content: center;
/* stylelint-disable */
${ButtonIcon} {
/* stylelint-enable */
  margin: 1em
}
euanmillar commented 6 years ago

This is resolved with Interpolation tagging:

${/* sc-sel */ ButtonIcon} {
  margin: 1em
}

https://www.styled-components.com/docs/tooling#interpolation-tagging