Reported lines with errors are incorrect

[martynhoyer]

A bit of Googling has led me to believe this is an issue with the Stylelint SC processor...

I'm getting the following error:

4:3 ✖ Unknown word CssSyntaxError

On this file:

import { css } from 'styled-components'
import { transparentize } from 'polished'

export const focusState = css`outline: none;`

Not sure what's wrong there?

P.S. Don't judge me for disabling the default outline - I'm doing it responsibly! 😄

[mxstbr]

Can you try

export const focusState = css`
  outline: none;
`

Does that fix the issue?

[emilgoldsmith]

Yeah I agree that it's probably our bug not any other software, can't see off the bat what the problem would be, but yeah, probably us at fault.

[martynhoyer]

@mxstbr That doesn't help unfortunately, but we're using Prettier which I have formatting on save anyway, and we've got a Prettier (and linters) step in our CI which would fail the build as well (of course, I turned it off for this test).

I've also tried:

export const focusState = css`
  /* stylelint-disable */
  outline: none;
  /* stylelint-enable */
`

To no avail.

Interestingly, with that option the linter complains about line 8 8:3 ✖ Unknown word CssSyntaxError which is the line with the closing backtick.

If I take out the focusState declaration completely the linter still fails and claims line 2 is problematic... weird.

[martynhoyer]

Aha! I've fixed it!

Further down the file I had:

const overlay = color => css`
  linear-gradient(to bottom, ${transparentize(0.9, color)}, ${transparentize(
  0.825,
  color
)})
`

Which I was using in other files like: background-image: ${hoverGradientOverlay()};

If I insert the background-image property into overlay, it fixes it:

const overlay = color => css`
  background-image: linear-gradient(
    to bottom,
    ${transparentize(0.9, color)},
    ${transparentize(0.825, color)}
  );
`

That's my mistake I guess, but the linter reporting the wrong line number is a bit of a pain.

Not sure if it's worth keeping the issue open for though?

[mxstbr]

That's my mistake I guess, but the linter reporting the wrong line number is a bit of a pain.

Yep, agreed. Again, would appreciate you adding this to the real-world tests so we can replicate the line issue at least!

[mxstbr]

Another replication here: https://github.com/styled-components/stylelint-config-styled-components/issues/19

@Jmeyering would you mind also adding your code as a real world test case so we can fix the underlying issue? Thanks!

[Jmeyering]

Added a breaking test case above

[mxstbr]

Awesome, thanks @Jmeyering! I currently don't have time to look into the issue, but the failing test should help any contributions to come in 😊