Textmate 2: how do I style HTML class attribute names?

Question

My Goal/Question

In Textmate 2, how do I style the appearance of class attribute names within HTML elements? E.g. <div class="value">…</div> (value being the target for styling.)

Background

I quite easily managed to do this in Textmate 1 by modifying the language grammar of the standard HTML bundle, adding a new scope selector for class names and that was it. But trying to clone that grammar from TM1 and use it in TM2 didn't pan out very well...

Here's the exact way I accomplished this in TM1 (I'll post links to the files at the end of this question):

1. Edit the language grammar for HTML, replicating the tag-id-attribute definition and
2. Naming the new instance tag-class-attribute.
3. Under the tag-stuff part, append {include = '#tag-class-attribute'; }
4. In the Theme editor, enter a new scope selector for class name styles: meta.attribute-with-value.class.html string.quoted

Again, following this exact procedure just doesn't work for me in Textmate 2. I shall say that I've managed to bring my TM1 theme in; I've just not been able to get the class name scope to kick in... (I also tried using the slightly different HTML grammar from TM1, containing my new class name addition, but to no avail.)

Any help would be much appreciated! I really don't get why this scope selector wasn't built-in from the start, neither in TM1 or TM2.

Here's my (working) language grammar from Textmate 1, and here's my non-working language grammar from Textmate 2.

Below is a reference shot of the working theme in TM1, which I'd like to port to TM2: