Double Colon CssSyntaxError

[ghost]

Currently we have:

modifier: css':nth-last-child(1) ${StyledText}::before'

when running Stylelint under this processor it comes up with the following:

108:45  ✖  Double colon   CssSyntaxError

However, before is a pseudo-element [https://www.growingwiththeweb.com/2012/08/pseudo-classes-vs-pseudo-elements.html] which should be prefixed with a double colon rather than single. The CSS for this we are trying to test is:

  :nth-last-child(${getIndex}) {
    ${StyledText}::before {
      content: '${props => props.mobileText} ';
    }
  }

If we have a single on one and double on the other the test fails, but we cannot have double on both due to the above issue. It works with a single colon on both, but isn't technically correct.

[chinesedfan]

@KITSDominicWhite Sorry, I am not very clear with your problem. What do you mean 'a single on one' and 'double on the other'? Can you give different code snippets with detailed stylelint configs and package versions?

[chinesedfan]

According to #221, I guess you want to lint :nth-last-child(1) ${StyledText}::before. It is really not a valid CSS snippets.

[ghost]

@chinesedfan The specific issue that is gathered here is the : in the before. There is a further discussion around the nth-last-child which I raised separately.

My point is in CSS; before should be pre-appended with a double colon. If this is the case, it fails.

It must be a valid CSS snippet, as it validates as correct with a single colon...

[chinesedfan]

It must be a valid CSS snippet, as it validates as correct with a single colon.

@KITSDominicWhite Do you mean modifier: css':nth-last-child(1) ${StyledText}:before'? Notice a single colon is before before and the origin codes should use back quotes to wrap css.

I think this processor can not lint modifier as discussed in #221.