{"action":"created","issue":{"url":"https://api.github.com/repos/jkphl/gulp-svg-sprite/issues/56","repository_url":"https://api.github.com/repos/jkphl/gulp-svg-sprite","labels_url":"https://api.github.com/repos/jkphl/gulp-svg-sprite/issues/56/labels{/name}","comments_url":"https://api.github.com/repos/jkphl/gulp-svg-sprite/issues/56/comments","events_url":"https://api.github.com/repos/jkphl/gulp-svg-sprite/issues/56/events","html_url":"https://github.com/jkphl/gulp-svg-sprite/issues/56","id":157719379,"number":56,"title":"_sprite.scss invalid css values?","user":{"login":"rlahoda","id":18124644,"avatar_url":"https://avatars.githubusercontent.com/u/18124644?v=3","gravatar_id":"","url":"https://api.github.com/users/rlahoda","html_url":"https://github.com/rlahoda","followers_url":"https://api.github.com/users/rlahoda/followers","following_url":"https://api.github.com/users/rlahoda/following{/other_user}","gists_url":"https://api.github.com/users/rlahoda/gists{/gist_id}","starred_url":"https://api.github.com/users/rlahoda/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rlahoda/subscriptions","organizations_url":"https://api.github.com/users/rlahoda/orgs","repos_url":"https://api.github.com/users/rlahoda/repos","events_url":"https://api.github.com/users/rlahoda/events{/privacy}","received_events_url":"https://api.github.com/users/rlahoda/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/jkphl/gulp-svg-sprite/labels/question","name":"question","color":"cc317c"}],"state":"open","locked":false,"assignee":{"login":"jkphl","id":4446936,"avatar_url":"https://avatars.githubusercontent.com/u/4446936?v=3","gravatar_id":"","url":"https://api.github.com/users/jkphl","html_url":"https://github.com/jkphl","followers_url":"https://api.github.com/users/jkphl/followers","following_url":"https://api.github.com/users/jkphl/following{/other_user}","gists_url":"https://api.github.com/users/jkphl/gists{/gist_id}","starred_url":"https://api.github.com/users/jkphl/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jkphl/subscriptions","organizations_url":"https://api.github.com/users/jkphl/orgs","repos_url":"https://api.github.com/users/jkphl/repos","events_url":"https://api.github.com/users/jkphl/events{/privacy}","received_events_url":"https://api.github.com/users/jkphl/received_events","type":"User","site_admin":false},"milestone":null,"comments":4,"created_at":"2016-05-31T16:52:11Z","updated_at":"2016-05-31T17:50:46Z","closed_at":null,"body":"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. \r\n\r\nHere's the error:\r\n```\r\nevents.js:141\r\n      throw er; // Unhandled 'error' event\r\n      ^\r\nError: dev/scss/modules/_sprite.scss\r\nError: (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.\r\n        on line 2 of dev/scss/modules/_sprite.scss\r\n>>     sprite: (width: 147px, height: 129px, pngPath: '../img/sprite.png', svgPat\r\n   ----^\r\n\r\n    at options.error (/web_projects/sandbox_homepage/node_modules/gulp-sass/node_modules/node-sass/lib/index.js:271:32)\r\n```\r\nThe 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. \r\n\r\nI 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.\r\n\r\nHere's the relevant part of my gulpfile:\r\n```\r\n//SVG Sprite and PNG fallback creation\r\ngulp.task('svgSprite', function () {\r\n\treturn gulp.src(paths.sprite.src)\r\n\t\t.pipe(svgSprite({\r\n\t\t\tshape: {\r\n\t\t\t\tspacing: {\r\n\t\t\t\t\tpadding: 5\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\tmode: {\r\n\t\t\t\tcss: {\r\n\t\t\t\t\tdest: \"./\",\r\n\t\t\t\t\tlayout: \"diagonal\",\r\n\t\t\t\t\tsprite: \"assets/img/sprite.svg\",\r\n          // sprite: paths.sprite.svg,\r\n\t\t\t\t\tbust: false,\r\n\t\t\t\t\trender: {\r\n\t\t\t\t\t\tscss: {\r\n\t\t\t\t\t\t\tdest: \"../dev/scss/modules/_sprite.scss\",\r\n\t\t\t\t\t\t\ttemplate: \"dev/tpl/sprite-template.scss\"\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\tvariables: {\r\n\t\t\t\tmapname: \"icons\"\r\n\t\t\t}\r\n\t\t}))\r\n\t\t.pipe(gulp.dest(basePaths.dest));\r\n});\r\n\r\ngulp.task('pngSprite', ['svgSprite'], function() {\r\n\treturn gulp.src(basePaths.dest + \"assets/img/sprite.svg\")\r\n  // return gulp.src(basePaths.dest + paths.sprite.svg)\r\n\t\t.pipe(svg2png())\r\n\t\t.pipe(size({\r\n\t\t\tshowFiles: true\r\n\t\t}))\r\n\t\t.pipe(gulp.dest(paths.images.dest));\r\n});\r\n\r\ngulp.task('sprite', ['pngSprite']);\r\n```\r\n\r\nHere's the _sprite.scss file that's generated:\r\n\r\n```\r\n$icons: (\r\n    sprite: (width: 147px, height: 129px, pngPath: '../assets/img/sprite.png', svgPath: '..../assets/img/sprite.svg'),\r\n \tcasicon: (width: 32.88px, height: 22.189999999999998px, backgroundX: 0px, backgroundY: 0px),\r\n \tfacebook: (width: 10px, height: 22px, backgroundX: -43px, backgroundY: -33px),\r\n \ttwitter: (width: 32px, height: 22px, backgroundX: -63px, backgroundY: -65px),\r\n \ttwitterHover: (width: 32px, height: 22px, backgroundX: -105px, backgroundY: -97px),\r\n);\r\n```\r\n"},"comment":{"url":"https://api.github.com/repos/jkphl/gulp-svg-sprite/issues/comments/222766588","html_url":"https://github.com/jkphl/gulp-svg-sprite/issues/56#issuecomment-222766588","issue_url":"https://api.github.com/repos/jkphl/gulp-svg-sprite/issues/56","id":222766588,"user":{"login":"rlahoda","id":18124644,"avatar_url":"https://avatars.githubusercontent.com/u/18124644?v=3","gravatar_id":"","url":"https://api.github.com/users/rlahoda","html_url":"https://github.com/rlahoda","followers_url":"https://api.github.com/users/rlahoda/followers","following_url":"https://api.github.com/users/rlahoda/following{/other_user}","gists_url":"https://api.github.com/users/rlahoda/gists{/gist_id}","starred_url":"https://api.github.com/users/rlahoda/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rlahoda/subscriptions","organizations_url":"https://api.github.com/users/rlahoda/orgs","repos_url":"https://api.github.com/users/rlahoda/repos","events_url":"https://api.github.com/users/rlahoda/events{/privacy}","received_events_url":"https://api.github.com/users/rlahoda/received_events","type":"User","site_admin":false},"created_at":"2016-05-31T17:50:46Z","updated_at":"2016-05-31T17:50:46Z","body":"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. \r\n\r\nSo here's where I got the scss template from: [liquidlight/sass-gulp-svg-sprite\r\n](https://github.com/liquidlight/sass-gulp-svg-sprite/blob/master/html/assets/css/src/_sprite.scss)\r\n\r\nThanks for your help!"}}
{"actor":{"display_login":"rlahoda"}}