I’m rewriting my CSS syntax highlighter (https://github.com/y0ssar1an/CSS3) in the new sublime-syntax engine (which I love BTW). I’m trying to add support for custom element selectors. Basically, in the near future, you’re going to be able to write HTML that looks like this:

<my-awesome-custom-element>...</my-awesome-custom-element>

Since we can now make up HTML element names, we need to be able to write CSS selectors that look like this:

my-awesome-custom-element {
    background-color: green;
}

Custom element names can be anything, as long as they’re all lowercase letters and have at least one hyphen. Here’s a simplified regex for matching custom elements.

[a-z]+\-[a-z-]*

The problem I’m having is trying to match arbitrary custom element names without accidentally matching mistyped property names. Here’s a screenshot showing the problem (the matched text is in blue for clarity): https://www.dropbox.com/s/qm2l11xdcvx3wsu/Screenshot%202015-05-30%2018.37.55.png?dl=0

Do you have any ideas about how I could make the custom element regex specific to just CSS selectors and not CSS properties? Thanks in advance!