Template tag regexp does not set grammar

[gertsonderby]

I have a moderately complex template tag regexp to set the Styled Components CSS scope:

"(?:transition(?:\.\w+|\(\w+\))(?:\.\w+(?:\([\s\S]*?\)))*)":source.css.styled

According to regexp testing tools (Regexper, Regexly), this should capture template tags like the following:

transition.div.attrs({
    unmountOnExit: true,
    timeout: 300,
})`[...]`;

transition(div).attrs({
    unmountOnExit: true,
    timeout: 300,
})`[...]`;

transition.div`[...]`;

transition(div).attrs({
    unmountOnExit: true,
    timeout: 300,
}).foo(bar)`[...]`;

However, the template strings remain stubbornly stuck as mere strings.

The grammar is set correctly, according to the dialog that pops up on update. I have uninstalled, cleared Atom cache, and reinstalled, with no change. What am I doing wrong?

[gandm]

TextMate grammar regex's ( which Atom, vscode etc use) operate on one source line at a time. Your syntax covers multiple lines. The regex you specified won't match the first line in the block below - i.e. transition(div).attrs({ won't be matched

transition(div).attrs({
    unmountOnExit: true,
    timeout: 300,
}).foo(bar)`[...]`;

[gertsonderby]

Ah, of course. (It's been too long since I worked on Atom grammar.)

I do notice that using 'styled' instead of 'transition' works. You do special tricks in the grammar for this, I assume? Is that something that couyld be applied in the settings field?

[gandm]

Is transition an alias for the normal use of styled? If so I could add a setting to generate the additional grammar.

[gertsonderby]

It refers to styled-transition-group. The highlighting is the same AFAIK, it just adds a few pseudo-class selectors to handle the transition states from the encapsulated react-transition-group CSSTransitioncomponent.

A simple alias should do the trick admirably.