How to disable stylelint for all non-string values

Question

Is it possible to turn off stylelint linting in interpolations globally with the styled-components processor enabled? My eslint config should apply for this cases and I don't want my stylelint config to interfere with it. Are there any ways to approach this?

For example, this piece of code will generate an error, because of the CSS value-keyword-case rule of stylelint. But because it's inside the interpolation (so it's just JS and no CSS), I would like to turn off linting for places like this.

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

What I use:

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

Can you add an example of what you mean by "in interpolations globally", please? — jeddy3, Apr 06 '19 at 21:44
I don't believe there's a `no-camel-case` rule in stylelint. Are you sure it's stylelint that is linting this code? Additionally, stylelint can now extract styles from template literals out-of-the-box, so you might not need to use a _processor_. Try removing the stylelint-processor-styled-components from your configuration file. — jeddy3, Apr 07 '19 at 08:32
I'm not sure if it's the correct rule title, but the idea of removing the processor seems promising! I will try that tomorrow. — , Apr 07 '19 at 13:11
The rule is `value-keyword-case` and removing the processor results into the same error (but without the processor overhead, so thank you already). :/ — , Apr 08 '19 at 09:38
I might suggest updating the title to "How to disable stylelint for all non-string values". — Beau Smith, May 09 '19 at 06:58

Beau Smith · Answer 1 · 2019-10-23T03:56:04.697

I'm having this same problem.

After not finding anything specific to disable stylelint rules applying to non-string values in javascript, I have decided to disable the value-keyword-case rule on the few lines where I need it using:

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

Example in my code:

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(({ type = 'button' }: Attrs) => ({
  type,
}))`
  ${buttonStyles} /* stylelint-disable-line value-keyword-case */
`

How to disable stylelint for all non-string values

1 Answers1