Fixed incomplete dimension CSS selector suffix

CHANGELOG.md

@@ -1,7 +1,8 @@
-## master (will become 1.0.16)
+## 1.0.17 Maintenance release (2015-02-20)
 * Optimized stylesheet templates
 * Introduced boolean hasCommon template variable
 * Updated dependencies
+* Fixed incomplete dimension CSS selector suffix ([grunt-svg-sprite #31](https://github.com/jkphl/grunt-svg-sprite/issues/31))
 
 ## 1.0.16 Bugfix release (2015-02-11)
 * Fixed broken previous release

docs/configuration.md

@@ -305,8 +305,8 @@ Many `mode` properties are common between all sprite types (sometimes their defa
 Property         | Type            | Default       | Description                                |
 ---------------- | --------------- | ------------- | ------------------------------------------ |
 `mode.<mode>.dest`           | String          | `"<mode>"`       | Base directory for sprite and CSS file output. If not absolute, the path will be resolved using the main output directory (see global `dest` option). |
-`mode.<mode>.prefix`         | String          | `".svg-%s"`    | Used for prefixing the [shape ID](#shape-ids) during CSS class name construction. If the value is empty, no prefix will be used. The prefix may contain the placeholder `"%s"` (e.g. `".svg %s-svg"`), which will then get replaced by the shape ID. Please be aware that `"%"` is a special character in this context and that you'll have to escape it by another percent sign (`"%%"`) in case you want to output it to your stylesheets (e.g. for a [Sass placeholder selector](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#placeholder_selectors_)). |
-`mode.<mode>.dimensions`     | String/Boolean  | `"-dims"`     | A non-empty string value will trigger the creation of additional CSS rules specifying the dimensions of each shape in the sprite. The string will be used as a selector suffix and behave much like `prefix`. A boolean `TRUE` will cause the dimensions to be included directly into each shape's CSS rule (only available for «css» and «view» sprites). |
+`mode.<mode>.prefix`         | String          | `".svg-%s"`    | Used for prefixing the [shape ID](#shape-ids) during CSS selector construction. If the value is empty, no prefix will be used. The prefix may contain the placeholder `"%s"` (e.g. `".svg %s-svg"`), which will then get replaced by the shape ID. Please be aware that `"%"` is a special character in this context and that you'll have to escape it by another percent sign (`"%%"`) in case you want to output it to your stylesheets (e.g. for a [Sass placeholder selector](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#placeholder_selectors_)). |
+`mode.<mode>.dimensions`     | String/Boolean  | `"-dims"`     | A non-empty string value will trigger the creation of additional CSS rules specifying the dimensions of each shape in the sprite. The string will be used as suffix to `mode.<mode>.prefix` during CSS selector construction and may contain the placeholder `"%s"`, which will get replaced by the value of `mode.<mode>.prefix`. A boolean `TRUE` will cause the dimensions to be included directly into each shape's CSS rule (only available for «css» and «view» sprites). |
 `mode.<mode>.sprite`         | String          | `"svg/sprite.<mode>.svg"` | SVG sprite path and file name, relative to the `mode.<mode>.dest` directory (see above). The file extension is optional as it will always get replaced with `.svg` anyway. The basename part will always get used as name for the sprite file. |
 `mode.<mode>.bust`           | Boolean         | `true∣false`        | Add a content based hash to the name of the sprite file so that clients reliably reload the sprite when it's content changes («cache busting»). Defaults to `false` except for «css» and «view» sprites. |
 `mode.<mode>.render`         | Object of [Rendering configs](#rendering-configurations)          | `{}`     | Collection of [stylesheet rendering configurations](#rendering-configurations). The keys are used as file extensions as well as file return keys. At present, there are default templates for the file extensions `css` ([CSS](http://www.w3.org/Style/CSS/)), `scss` ([Sass](http://sass-lang.com/)), `less` ([Less](http://lesscss.org/)) and `styl` ([Stylus](http://learnboost.github.io/stylus/)), which all reside in the directory `tmpl/css`. Example: `{css: true, scss: {dest: '_sprite.scss'}}` |

lib/svg-sprite/mode/css.js

@@ -51,8 +51,8 @@ SVGSpriteCss.prototype = _.create(SVGSpriteBase.prototype, {
 SVGSpriteCss.prototype._init = function() {
 
 	// Prepare the dimension suffix
-	if (this.config.dimensions && (this.config.dimensions !== true) && !/%s/g.test((this.config.dimensions || '').split('%%').join(''))) {
-		this.config.dimensions		= this.config.prefix + this.config.dimensions;
+	if (this.config.dimensions && (this.config.dimensions !== true)) {
+		this.config.dimensions		= /%s/g.test((this.config.dimensions || '').split('%%').join('')) ? util.format(this.config.dimensions, this.config.prefix) : (this.config.prefix + this.config.dimensions);
 	}
 
 	// Refine the base data

lib/svg-sprite/mode/standalone.js

@@ -24,6 +24,7 @@ SVGSpriteBase						= require('./base');
  */
 function SVGSpriteStandalone(spriter, config, data) {
 	SVGSpriteBase.apply(this, arguments);
+	console.log(this.config);
 }
 
 /**
@@ -44,8 +45,8 @@ SVGSpriteStandalone.prototype._init = function() {
 
 	// Prepare the dimension suffix
 	this.config.dimensions			= _.isString(this.config.dimensions) ? this.config.dimensions.trim() : '-dims';
-	if (this.config.dimensions && !/%s/g.test((this.config.dimensions || '').split('%%').join(''))) {
-		this.config.dimensions		= this.config.prefix + this.config.dimensions;
+	if (this.config.dimensions) {
+		this.config.dimensions		= /%s/g.test((this.config.dimensions || '').split('%%').join('')) ? util.format(this.config.dimensions, this.config.prefix) : (this.config.prefix + this.config.dimensions);
 	}
 
 	this.data.inline				= !!this.config.inline;

package.json

@@ -1,12 +1,12 @@
 {
 	"name": "svg-sprite",
-	"version": "1.0.16",
+	"version": "1.0.17",
 	"author": {
 		"name": "Joschi Kuphal",
 		"email": "joschi@kuphal.net",
 		"url": "http://jkphl.is"
 	},
-	"description": "SVG sprites & stacks galore — a low-level Node.js module that takes a bunch of SVG files, optimizes them and bakes them into SVG sprites of several types along with suitable stylesheet resources (e.g. CSS, Sass, LESS, Stylus, etc.)",
+	"description": "SVG sprites & stacks galore — A low-level Node.js module that takes a bunch of SVG files, optimizes them and bakes them into SVG sprites of several types along with suitable stylesheet resources (e.g. CSS, Sass, LESS, Stylus, etc.)",
 	"homepage": "https://github.com/jkphl/svg-sprite",
 	"repository": {
 		"type": "git",