Correct syntax in docs?

[brianfeister]

Copying this fro the docs

grunt.initConfig({
    "dr-svg-sprites": {
        options: {
            spriteElementPath: "img/logos",
            spritePath: "img/sprites",
            cssPath: "css",
            prefix: "dr-logos"
        },
        tv: {
            options: {
                sizes: {
                    large: 24,
                    small: 16
                },
                refSize: "large",
                unit: 6
            }
        },
        radio: {
            options: {
                sizes: {
                    small: 16
                },
                refSize: 24,
                unit: 12,
                cssUnit: "rem"
            }
        }
    }
});

and replacing with my paths, resulting in

    "dr-svg-sprites": {
        options: {
          spriteElementPath: '<%= yeoman.client %>/assets/img/svg/src',
          spritePath: '<%= yeoman.client %>/assets/img',
          cssPath: '<%= yeoman.client %>/app',
          prefix: ''
        },
        tv: {
            options: {
                sizes: {
                    large: 24,
                    small: 16
                },
                refSize: "large",
                unit: 6
            }
        },
        radio: {
            options: {
                sizes: {
                    small: 16
                },
                refSize: 24,
                unit: 12,
                cssUnit: "rem"
            }
        }
    },

I get a failed build. The <%= yeoman.client %>/assets/img/svg/src path is resolving correctly, because using the same paths but targeting this way, works:

    'dr-svg-sprites': {
      all: {
        options: {
          spriteElementPath: '<%= yeoman.client %>/assets/img/svg/src',
          spritePath: '<%= yeoman.client %>/assets/img',
          cssPath: '<%= yeoman.client %>/app',
          prefix: ''
        },
        shapes: {
          options: {
            sizes: {
              large: 75,
              medium: 30,
              small: 15
            },
            refSize: 26,
            unit: 13
          }
        }
      }
    },

The problem is that this is the "simple" syntax so it's ignoring my .shapes config with it's unique options and generating a single-size spritemap. No idea what's going on here!

[phloe]

In your second sample tvand radio inherit spriteElementPath from the global options with the target names appended - which means that for tv it becomes: <%= yeoman.client %>/assets/img/svg/src/tv. Is this in sync with your src folders? If there is no tv folder (with svg's in it) you probably get an empty sprite?

The third sample looks like you nested shapes inside the all target - so it's just ignored.

[brianfeister]

In your second sample tvand radio inherit spriteElementPath from the global options with the target names appended - which means that for tv it becomes: <%= yeoman.client %>/assets/img/svg/src/tv

There's my problem - I guess I misunderstood this from reading the docs. I humbly suggest to you that this is non-intuitive, I would think paths should be absolute all the way down. I know it's disorganized, but I'm sure someone can come up with a good reason to place originals in different root directories. Also, it feels a bit like black magic for the "namespace" of a sub-state to magically be appended to it's path for source directory lookup.

[phloe]

@brianfeister Ah ok - so you were using shared options while only having 1 target? Using the basic options and staying clear of shared options would've avoided the confusion.

I agree that automagically appending stuff can be cause for WTF-moments. But I don't see how else using spriteElementPath in shared options would ever make sense for multiple targets.

The documentation doesn't explain in too much detail when to use shared options - when not to. That might be nice addition.