Как отключить stylelint для всех нестроковых значений

Question

Можно ли отключить линковку stylelint в глобальных интерполяциях с включенным процессором styled-components?Мой конфиг eslint должен применяться для этих случаев, и я не хочу, чтобы мой конфиг stylelint мешал ему.Есть ли способы подойти к этому?

Например, этот фрагмент кода вызовет ошибку из-за правила CSSl 1003 * stylelint.Но поскольку он находится внутри интерполяции (так что это просто JS, а не CSS), я бы хотел отключить линтинг для таких мест.

const MyStyling = styled.div`
  color: ${props => props.colors.darkPink};
`

Что я использую:

{
  "stylelint": "^9.10.1",
  "stylelint-config-standard": "^16.0.0",
  "stylelint-config-styled-components": "^0.1.1",
  "stylelint-processor-styled-components": "^1.5.2"
}

Answer 1

У меня такая же проблема.

После того, как я не нашел ничего конкретного, чтобы отключить правила стиля, применяемые к нестроковым значениям в javascript, я решил отключить правило value-keyword-case в нескольких строках, где оно мне нужно, используя:

/* stylelint-disable-line value-keyword-case */

Пример в моем коде:

const buttonStyles = css<Props>`
  /* CSS property: value pairs removed for simplicity */
`

const DecoyButton = styled.div`
  ${buttonStyles} /* stylelint-disable-line value-keyword-case */
`

const Button = styled('button').attrs((props: Attrs) => ({
  type: props.type || 'button',
}))`
  ${buttonStyles} /* stylelint-disable-line value-keyword-case */
`