_sprite.scss invalid css values?

[rlahoda]

I have this set up in my gulpfile to export the _sprite.scss file but when the file is processed by postcss i get the error that it isn't valid css.

Here's the error:

events.js:141
      throw er; // Unhandled 'error' event
      ^
Error: dev/scss/modules/_sprite.scss
Error: (sprite: (width: 147px, height: 129px, pngPath: "../img/sprite.png", svgPath: "../img/sprite.svg"), casicon: (width: 32.88px, height: 22.19px, backgroundX: 0px, backgroundY: 0px), facebook: (width: 10px, height: 22px, backgroundX: -43px, backgroundY: -33px), twitter: (width: 32px, height: 22px, backgroundX: -63px, backgroundY: -65px), twitterHover: (width: 32px, height: 22px, backgroundX: -105px, backgroundY: -97px)) isn't a valid CSS value.
        on line 2 of dev/scss/modules/_sprite.scss
>>     sprite: (width: 147px, height: 129px, pngPath: '../img/sprite.png', svgPat
   ----^

    at options.error (/web_projects/sandbox_homepage/node_modules/gulp-sass/node_modules/node-sass/lib/index.js:271:32)

The sprite files all seem to be generating correctly and the _sprite.scss file generates correctly based off the template, but the resulting code doesn't appear to be recognized. I tried just putting the sprite.scss code into a scss => css converter and it didn't recognize it either.

I don't know if i just don't have it correctly configured or if postcss needs to be configured differently but I wanted to check here to see if you have any idea.

Here's the relevant part of my gulpfile:

//SVG Sprite and PNG fallback creation
gulp.task('svgSprite', function () {
    return gulp.src(paths.sprite.src)
        .pipe(svgSprite({
            shape: {
                spacing: {
                    padding: 5
                }
            },
            mode: {
                css: {
                    dest: "./",
                    layout: "diagonal",
                    sprite: "assets/img/sprite.svg",
          // sprite: paths.sprite.svg,
                    bust: false,
                    render: {
                        scss: {
                            dest: "../dev/scss/modules/_sprite.scss",
                            template: "dev/tpl/sprite-template.scss"
                        }
                    }
                }
            },
            variables: {
                mapname: "icons"
            }
        }))
        .pipe(gulp.dest(basePaths.dest));
});

gulp.task('pngSprite', ['svgSprite'], function() {
    return gulp.src(basePaths.dest + "assets/img/sprite.svg")
  // return gulp.src(basePaths.dest + paths.sprite.svg)
        .pipe(svg2png())
        .pipe(size({
            showFiles: true
        }))
        .pipe(gulp.dest(paths.images.dest));
});

gulp.task('sprite', ['pngSprite']);

Here's the _sprite.scss file that's generated:

$icons: (
    sprite: (width: 147px, height: 129px, pngPath: '../assets/img/sprite.png', svgPath: '..../assets/img/sprite.svg'),
    casicon: (width: 32.88px, height: 22.189999999999998px, backgroundX: 0px, backgroundY: 0px),
    facebook: (width: 10px, height: 22px, backgroundX: -43px, backgroundY: -33px),
    twitter: (width: 32px, height: 22px, backgroundX: -63px, backgroundY: -65px),
    twitterHover: (width: 32px, height: 22px, backgroundX: -105px, backgroundY: -97px),
);

[jkphl]

@rlahoda Hmm ... The _sprite.scss snippet you provided doesn't look like valid Sass code to me. At least I'm pretty sure this is not the output of the default Mustache template for Sass shipped with (gulp-)svg-sprite. Are you sure you don't use a custom template (which of course I couldn't provide any support for)?

[rlahoda]

the only change I made was to the paths to point to the correct locations. I installed it a while ago and never used it but just started to today so It's possible (likely) that i downloaded something wrong for at least that part. If reinstalling through Gulp should fix it, then I'll do that and try it. I did just look around the svg-sprite repo and saw that the scss template there is completely different so it looks like somewhere along the line I got the wrong template and that's causing the issue. I'll try that and let you know if I have any issues.

[jkphl]

Great! Yeah, excactly, that was what I was suspecting. The scss output totally doesn't look like mine, looks way too cutting-edge. ;)
Please let me know whether you succeed!

[rlahoda]

That was the issue. I copied the scss template from the svg-sprite repo and used that instead and it appears to be working correctly. I checked and there was an article I found that explained how to set this up and the repo associated with it had the wrong template in it.

So here's where I got the scss template from: liquidlight/sass-gulp-svg-sprite

Thanks for your help!

[jkphl]

You're welcome! Glad you could solve it. :)