how to fix indent eslint error in nested styled-components?

Question

How to fix this eslint error?

I want to write below format.

const Hoge = styled.div`
  ...

  .class {
    color: ${props =>
      props.a !== 'aaaaaa' &&
      props.b !== 'bbbbbb' &&
      '#ccc'};
  }
`

But this format has eslint error.

error: [eslint] Expected indentation of 4 spaces but found 6. (indent)

I'd like to know about fix this.

I'm using below versions.

"styled-components": "^3.1.6",
"eslint": "^4.17.0",
"eslint-config-prettier": "^2.9.0",
"eslint-plugin-prettier": "^2.6.0",
"prettier": "^1.10.2",
"prettier-eslint": "^8.8.1",

And eslint setting for indent is just below.

 "indent": ["error", 2, { "SwitchCase": 1 }],

Answer 1

First, eslint's indent rule is working correctly, see here. If you want to continue to use styled-components and adhere to your linter configurations for indent the easiest solution is to probably not write the interpolation function inline, but instead assign it to a variable.

For example:

const getColorForClass = ({ a, b }) => {
  return a !== 'aaaaaa' && b !== 'bbbbbb' && '#ccc'
}

const Hoge = styled.div`
  .class {
    color: ${getColorForClass};
  }
`