Allow for csssuffix in options, like cssprefix

[commadelimited]

Currently the prefix allows you to convert this:

.icon-<name>

to this:

<prefix><name>

But it doesn't allow you to do this:

<prefix><name>:after

It would be nice if there was a suffix option as well so that a template could look like this:

{{#each customselectors}}{{this}},{{/each}}
{{prefix}}{{name}}{{suffix}} {
    background-image: url('{{datauri}}');
    background-repeat: no-repeat;
}

[jefflembeck]

Custom selectors allow * to be used, so you can use that for after.

filamentgroup/directory-encoder#1

We should definitely add docs for this, will open new ticket for that.

[commadelimited]

Ah, nice! That could be more well documented. It looks like the only problem with that option though it that your selector would then look like this:

customselectors: {
  "*": [".icon-$1:after"]
},
prefix: ".icon-"
==================
.icon-<name>:after,
.icon-<name>
{
    background-image: url('{{datauri}}');
    background-repeat: no-repeat;
}

Unless you also used a custom template in which case you'd wind up with a trailing comma because of the {{#each customselectors}}{{this}},{{/each}} line. That means your CSS would look like this:

.icon-<name>:after, {
    background-image: url('{{datauri}}');
    background-repeat: no-repeat;
}

with a template like this:

{{#each customselectors}}{{this}},{{/each}}
{
    background-image: url('{{datauri}}');
    background-repeat: no-repeat;
}

[jefflembeck]

hrm. I see what you're saying.

Handlebars allows you to check if something is the last element in a list - handlebars-lang/handlebars.js#483

That should help with the template.

[commadelimited]

Ah, very nice! 👍 to Senor @jlembeck.