Combinator gets image sprite generation support!

Topics: Announcements
Jul 26, 2012 at 5:41 PM

I'm very excited that today (simultaneously with the 1.4 version) I could release the 2.0a version of Combinator too, with partial image sprite generation support! Check out the release here: It's only in source form, no nuget package, so you can download it from Codeplex.

It currently only understands "background-image" declarations. Background images should be ones with no-repeat or being on a container thats size doesn't exceed the size of the image.

The original code of the sprite generation piece comes from the Sprite Generator tool developed by Csilla Karaffa.

Jul 26, 2012 at 8:13 PM

Here's the second alpha that fixes exceptions when there were no images in the stylesheets:

Jul 27, 2012 at 7:16 AM

wow that's very cool. Nice job! Hopefully i can test it this weekend

Jul 27, 2012 at 12:35 PM


Jul 27, 2012 at 3:39 PM

Thanks :-). Sprite generation is in a very early stage, any feedback is welcome!

Jul 28, 2012 at 2:45 PM

Third alpha released:

  • Fixing that images in the result could be mixed up
  • Refactoring
Sep 18, 2012 at 8:39 PM

Fourth alpha is here:

  • Exposing resource processing events: this way e.g. a LESS compiler can be plugged into Combinator, so compiled stylesheets are still processed (combined and minified)
  • Better CSS processing with a real CSS parser (ExCSS)
Important notes on sprite generation:
  • There should be no images that are already sprites
  • Only works with images that are non-repetitive
  • The container size shouldn't exceed the size of the image
  • Since the question of an image being suitable for sprite generation depends on the stylesheet, instead of using an exclusion filter it is possible to exclude images from sprite generation by using "no-sprite" in their path.
Sep 19, 2012 at 12:15 AM


Sep 19, 2012 at 6:10 AM

Very nice! Especially the .LESS compiler plugin and sprite generation!

Sep 19, 2012 at 1:38 PM

Thank you both!

Actually there's no LESS compiler built-in for now, but there's a new extension point that such a compiler can hook into :-). It should be fairly simple to implement though.

Sep 20, 2012 at 4:28 PM

Piedone does it again! Love this module. 

Sep 20, 2012 at 6:55 PM
Edited Sep 20, 2012 at 8:40 PM

Glad to hear it :-). I've some more features till 2.0, but it's on the corner.

BTW I would very much appreciate any feedback (working/not/why not :-)), but please note that this is alpha, don't use it anywhere near production. DB schema will still change and I won't include the changes in the migrations (as it's aimed for the release).

Sep 20, 2012 at 8:42 PM

Fifth alpha arrived:

  • Ability to set custom resource domain (work item #37)
  • Ability to exclude images from sprite generation also with adding the .no-sprite

This is feature complete. I'll test it for a while and release it when I still think it works as expected.

BTW TheMonarch, thanks for the Gallery review :-).

Sep 21, 2012 at 8:08 AM

Created an idea ticket:

Sep 23, 2012 at 9:54 PM

Thanks to the contribution on Onestop Internet, Combinator gets LESS and SASS (well, that one almost, there are some issues with external libaries needing update) support too!

There's a slight issue in the CSS parser library used (, but apart from that, release is close.

Sep 24, 2012 at 5:42 PM

That's fantastic news! Can't wait for it :)

Sep 24, 2012 at 11:41 PM

Piedone thanks to you and Onestop Internet - can't wait to try out LESS (don't know much about SASS - going to learn).

Sep 27, 2012 at 12:09 PM
Edited Sep 27, 2012 at 12:10 PM

Very nice, indeed. Thanks to all contributors.

Have you considered excluding background images that have background-size set? I guess it wouldn't work with sprites.

And just to satisfy my curiosity: why have you abandoned the sprite generation lib mentioned in your first post and opted for greedy?


e: Just realized that you used the code from that lib.

Sep 27, 2012 at 2:09 PM

There are some quirks to work out but I'll be able to release soon :-).

@JasperD: background size is a good idea, thanks! Haven't thought about that, it only checks for position and repetition.

Oct 16, 2012 at 3:19 PM
Edited Oct 16, 2012 at 3:19 PM

The 6th alpha version is here! It brings smarter sprite generation, LESS and SASS preprocessing and some other minor tweaks. Read the release notes.

This release is quite stable now and I almost say it can be used in production. However there's still a little issue with the underlying CSS parser that should be solved before the beta, but if you don't use non-quoted font names consisting of multiple words (like Comic Sans) in your css declarations (when between quotes they're fine!) then you're good to go.

Oct 16, 2012 at 3:20 PM

Very nice! And congratulations on finding a clever way to prevent users from using Comic Sans.

Oct 16, 2012 at 3:21 PM

You are rocking it Piedone, can't wait to try it out. Thanks so much.

Oct 16, 2012 at 4:00 PM

nice one Piedone, that's great news, will give it a try.

lol @bertrand's comment! :)

Oct 16, 2012 at 4:08 PM

GJ Zoltán, as Bertrand pointed it out, the Comic Sans issue is a feature, not a bug.

Oct 16, 2012 at 4:43 PM

You might want to give us a demo at the meeting. I am sure we can give you feedback in doing so. This is one module that could stand in the Core distribution !

Oct 16, 2012 at 4:50 PM

Thanks all! Bertrand just blew away my hidden intent, damn. Bad news for Times New Roman users as well, Calibri is the new TNR!

@Sebastien: sure, let's make a demo. That will make two for today, there's something else as well :-).

Nov 22, 2012 at 6:50 PM
Edited Nov 22, 2012 at 6:52 PM

7th alpha is here. This one you definitely can use in production if you're tough enough. We use it at Orchard Hungary. I'll provide a migration path if needed to future versions.

Actually I was wrong about the CSS parsing issue: you can use non-quoted font names consisting of multiple words but not ones between quotes.

And I've also created a TypeScript preprocessor. Don't know what it is useful for yet :-).