Spritesheet generates without comma

[CreativeZoller]

I wanna make a spritesheet from my png files. My problem is in the generated file there are not a single commas at the end of lines. And I have totally no idea about the why. Here is my task in gulp:

gulp.task('sprites:png', function() {
      var spritePngs = gulp.src('src/images/*.png')
        .pipe(plugins.spritesmith({
          algorithm: 'binary-tree',
          cssFormat: 'sass',
          imgName: 'sprites.png',
          cssName: 'sprites.scss',
        }))
      spritePngs.img.pipe(gulp.dest('.tmp/images/'));
      spritePngs.css.pipe(gulp.dest('.tmp/scss/'));
 });

[twolfson]

I'm going to assume you are talking about the commas in our SASS lists:

https://github.com/twolfson/spritesheet-templates/blob/master/test/expected_files/scss-single.scss#L22

This is valid SASS/SCSS and have been supported for a while (at least 2 years as we updated the template then):

https://github.com/twolfson/spritesheet-templates/blob/9.1.0/test/expected_files/scss.scss#L24

If you're encountering a SASS/SCSS compilation error, please try upgrading your SASS/SCSS version.

If you're encountering a linting error, please don't lint the generated file. It's unlikely that our unoptimized template won't fit linting expectations (e.g. using 0px instead of 0).

Related issue: https://github.com/twolfson/spritesheet-templates/issues/39

[CreativeZoller]

My SASS version is the new (Sass 3.4.23 (Selective Steve)). Also, it is irrelevant if I lint it or not, because it won't compile so my whole stylesheet is useless right now. It's missing on everywhere from the first occurrence.

[ERROR]: .tmp/scss/sprites.scss
Error: Invalid CSS after "$navbar-bg-x": expected 1 selector or at-rule, was ": 800px"
        on line 12 of .tmp/scss/sprites.scss
>> $navbar-bg-x: 800px
   ^

[twolfson]

Thank you for providing the error message. That shines a light on the problem.

My shot in the dark is you are telling SASS to run in SCSS mode for a SASS file with a .scss extension. Try removing the cssFormat line from your spritesmith configuration so it will generate SCSS instead of SASS (based on .scss extension):

gulp.task('sprites:png', function() {
      var spritePngs = gulp.src('src/images/*.png')
        .pipe(plugins.spritesmith({
          algorithm: 'binary-tree',
          imgName: 'sprites.png',
          cssName: 'sprites.scss',
        }))
      spritePngs.img.pipe(gulp.dest('.tmp/images/'));
      spritePngs.css.pipe(gulp.dest('.tmp/scss/'));
 });

If that doesn't repair the issue, then could you provide the command/task you are running which is producing that error?

[CreativeZoller]

Thank you for your hint. Now it works like charm, again ^^ For months I used Node 5.6.0 + NPM 3.7.2 with this plugin and it worked. Few days ago I updated to Node 7.2.0 + NPM 3.10.9 and the previously mentioned gulp task just stopped working. Hope it helps in the future if anyone facing the same issue.