Gulp plumber giving error: "Error in plugin 'sass-lint'"

[jeffersonlam]

I'm trying to add sass-lint onto a current project, and the gulp plumber is giving this error whenever it runs:

[15:42:00] Plumber found unhandled error:
 Error in plugin 'sass-lint'
Message:
    Parsing error at path/to/_colors.scss: Please check validity of the block starting from line #217
undefined:1
undefined
^
SyntaxError: Unexpected token u
    at Object.parse (native)
    at Function.sassLint.resultCount (/path/to/node_modules/gulp-sass-lint/node_modules/sass-lint/index.js:24:26)
    at Function.sassLint.outputResults (/path/to/node_modules/gulp-sass-lint/node_modules/sass-lint/index.js:115:12)
    at DestroyableTransform._transform (/path/to/node_modules/gulp-sass-lint/index.js:64:10)
    at DestroyableTransform.Transform._read (/path/to/node_modules/gulp-sass-lint/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:172:10)
    at DestroyableTransform.Transform._write (/path/to/node_modules/gulp-sass-lint/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:160:12)
    at doWrite (/path/to/node_modules/gulp-sass-lint/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:335:12)
    at writeOrBuffer (/path/to/node_modules/gulp-sass-lint/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:321:5)
    at DestroyableTransform.Writable.write (/path/to/node_modules/gulp-sass-lint/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:248:11)
    at DestroyableTransform.ondata (/path/to/node_modules/gulp-sass-lint/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:583:20)

The _colors.scss file is from the IBM Design Color Palette, and around line #217 looks like this:

@function color($color, $tone: 'core') {
  @if type-of($tone) == 'number' {
    @if $tone % 10 == $tone {
      $tone: $tone * 10;
    }
  }
  @return map-get(map-get($palettes, $color), $tone);
}

#217 is the 3rd line that reads @if $tone..., to be exact. This function can be seen here: https://github.com/IBM-Design/colors/blob/master/_ibm-colors.scss#L25

Any ideas as to why this error is happening? Any workarounds?

[DanPurdy]

I may be completely wrong but I seem to remember that the version of gonzales-pe that we're currently stuck on has issues parsing the % character. It's fixed in the latest version but unfortunately that brings a few regressions which we can't justify introducing right now.. If you remove that character it parses fine, but obviously that isn't exactly a workable solution for you.. 😢

@bgriffith can you remember if that's the case with the % character still?

[jeffersonlam]

Ahh yeah, after some fiddling around, it seems like it's indeed crashing at the % character. And strangely, it was also crashing whenever there were comments in a specific file, but comments in other files were fine.

I think for now to bypass this issue we can exclude this file from the sass-lint task.

[thomasmattheussen]

Hmm, I'm also experiencing the problem you described with the comments...

It seems to have something to do with slashes. For example this wil crash

// Paths
$media-path:                        '../';
$image-url-path:                    $media-path + 'images/';

// Colors

But this won't

// Paths
$media-path:                        '../';

// Colors

[DanPurdy]

What's the error you're seeing with the slashes @thomasmattheussen ? does it still say 'parsing error'?

If so it would be worth reporting on the gonzales-pe repository as those parse errors are our AST rather than sass-lint. Unfortunately we can't do much about them at the moment..

[bgriffith]

Fixed in 1.6