Missed semicolon has incorrect collumn

Clearly describe the bug

The Missed semicolon error will produce an incorrect column.

Which rule, if any, is the bug related to?

CssSyntaxError

What code is needed to reproduce the bug?

e.g.

div {
        color: red !important
        background-color: #000
}

What stylelint configuration is needed to reproduce the bug?

CSSSyntaxError is enabled by default and not a rule.

{
  "rules": {}
}

Which version of stylelint are you using?

13.13.1

How are you running stylelint: CLI, PostCSS plugin, Node.js API?

Demo, otherwise you can do it with stylelint test.css --config test.json

Does the bug relate to non-standard syntax (e.g. SCSS, Less etc.)?

Nope.

What did you expect to happen?

Show the error:

test.css
 2:30  ✖  Missed semicolon   CssSyntaxError

With the column at 30 which is after !important and the correct place to add the semicolon

What actually happened (e.g. what warnings or errors did you get)?

Show the error:

test.css
 2:20  ✖  Missed semicolon   CssSyntaxError

With the the column at 20 which is before !important and not the correct place to add the semicolon. It should instead error at the correct place which is after !important and in this case at column 30.

[ybiquitous]

@Gusted Great! The PR you created has been merged soon! 👏🏼

[Gusted]

It is not CSS/LESS/SCSS/SASS/etc, invalid CSS === linter doesn’t work

That’s correct, but the error in this one comes from a Syntaxerror, which should error at the correct place IMO. It’s a bit weird to go error at some place which is incorrect at it’s own.

you need custom parser for this weird CSS

Not sure how this is weird css I actually found about this bug when I forgot to add my semi-column and stylelint was erroring it should add an semi-column at the wrong place.

Anyway, thanks for diagnosing the bug - hopefully can be handled over at postcss.