Bootstrap version: Adding more flexibility to the DSL vocabulary

The DSL is simple and straight forward: A token per matching html snippet. However, in a real world scenario many classes would overlap and intermix with each other ie:

`

could be:

`

or

`div class="col-md-3 border border-primary">{}`

It seems the structure of the DSL requires you to have a very large vocabulary with thousands of tokens but it would still not solve the flexibility problem. How would you approach solving this problem?

Is an emmet style vocabulary like the below possible?

`{`
`"quadruple.border+border-primary": "