Error when checking nested CSS with syntastic

[simonsmith]

It seems when a ruleset has a nested ampersand (via postcss-nested) Syntastic throws an unrecognised error:

.PageHeader {
  color: #fff;
  padding-top: 10px;
  padding-bottom: 20px;
  &:after {
  }
}

"client/src/css/components/page-header.css" 9L, 125C
syntastic: 13.175982: &shell = '/usr/local/bin/zsh', &shellcmdflag = '-c', &shellpipe = '2>&1| tee', &shellquote = '', &shellredir = '>%s 2>&1', &shellslash = 0, &shelltemp = 1, &shellxquote = '', &shellxescape = ''
syntastic: 13.176591: UpdateErrors (auto): default checkers
syntastic: 13.176827: CacheErrors: default checkers
syntastic: 13.177406: g:syntastic_aggregate_errors = 1
syntastic: 13.177567: getcwd() = '/Users/simonsmith/Sites/project'
syntastic: 13.177905: CacheErrors: Invoking checker: css/stylelint
syntastic: 13.178422: SyntasticMake: called with options: {'subtype': 'Style', 'preprocess': 'stylelint', 'errorformat': '%t:%f:%l:%c:%m', 'makeprg': 'stylelint -f json client/src/css/components/page-header.css', 'returns': [0, 1, 2]}
syntastic: 13.784214: checker output: ['[{"source":"/Users/simonsmith/Sites/project/client/src/css/components/page-header.css","errored":true,"warnings":[{"line":7,"column":11,"rule":"block-no-empty","severity":2,"text":"Unexpected empty block (block-no-empty)"},{"line":7,"column":3,"rule":"rule-nested-empty-line-before","severity":2,"text":"Expected empty line b
efore nested rule (rule-nested-empty-line-before)"},{"line":6,"column":3,"rule":"rule-properties-order","severity":2,"text":"Expected property \"padding-bottom\" to come before property \"padding-top\" (rule-properties-order)"},{"line":7,"column":4,"rule":"selector-psuedo-element-colon-notation","text":"Expected double colon pseudo-element notation (selector-psuedo-elemen
t-colon-notation)"}]}]']
syntastic: warning: checker css/stylelint: unrecognized error format
syntastic: 13.785629: preprocess: []
syntastic: 13.785812: raw loclist: []
syntastic: 13.786059: getLocList: checker css/stylelint returned 2
syntastic: 13.786175: css/stylelint raw: []
syntastic: 13.786453: quiet_messages filter: {}
syntastic: 13.786706: aggregated: {'_sorted': 0, '_name': '', '_owner': 1, '_columns': 1, '_rawLoclist': []}
syntastic: 13.786998: sorted: {'_sorted': 1, '_name': '', '_owner': 1, '_columns': 1, '_rawLoclist': []}

Removing &:after {} seems to stop the error happening, and style failures are reported as normal.

It's worth noting that using stylelint on the command lint works fine:

stylelint client/src/css/components/page-header.css

client/src/css/components/page-header.css
6:3     Expected property "padding-bottom" to come before property "padding-top" (rule-properties-order)
7:3     Expected empty line before nested rule (rule-nested-empty-line-before)
7:4     Expected double colon pseudo-element notation (selector-psuedo-element-colon-notation)
7:11    Unexpected empty block (block-no-empty)

Here is my .stylelintrc
https://github.com/stylelint/stylelint-config-suitcss

{
  "extends": "./suitcss-config.js",
  "rules": {
    "indentation": [ 2, 2 ]
  }
}

[simonsmith]

Upon further investigation it seems to just the &:after that causes the problem. The following is fine:

.Share-panel {
  border: 1px solid var(--Share-color-grey);
  background-color: var(--Share-color-grey-dark);
  color: #fff;
  position: absolute;
  right: 0;
  bottom: 100%;
  z-index: 1;
  min-width: 270px;
  text-align: left;
  margin-bottom: 16px;
  transition: transform 200ms ease-in-out;
  transform-origin: 95% 100%;
  transform: scale(0, 0);

  &.is-open {
    transform: scale(1, 1);
  }

  &:hover .Share-actionIcon {
    fill: #4a9442;
  }

  @media (--xs-min-viewport) {
    min-width: 300px;
  }
}

As soon as I add the following it fails

  &:after {
    color: red;
  }

[lcd047]

This looks like a bug in stylelint. Please run this and look at the output:

stylelint -f json client/src/css/components/page-header.css

The last message ("Expected double colon...") is missing the severity field (this is from the checker output in the debug logs you posted above).

[simonsmith]

You're right, but it seems to be present in the config:

https://github.com/stylelint/stylelint-config-suitcss/blob/master/index.js#L69

[simonsmith]

I'll check into this on stylelint's end. Thanks

[simonsmith]

Yep, this was a bug in Stylelint. For future reference here is the report and fix - stylelint/stylelint#531