Detect CSS syntax inside template literals automatically

[2Pacalypse-]

I know this might be a long shot, but I was wondering if it was possible to detect the syntax inside the template literals automatically as CSS (or some other language)? So instead of relying on specific keywords, eg. styled, the CSS syntax highlighting would work regardless of the keyword used.

One specific use case of this would be when making your own functions to be used with template literals. For example, styled-component docs have an example of creating a helper to define media queries: https://www.styled-components.com/docs/advanced#media-templates

Unfortunately, the syntax highlighting doesn't work when you do this:

Even worse, if you have some more complex syntax inside that block, eg. interpolations, it breaks the syntax highlighting completely for the rest of the file (it even triggers eslint parsing error for some reason):

If it's not possible to automatically detect the syntax inside template literals, maybe it would be possible to define your own custom keywords that Naomi would recognize and apply appropriate syntax highlighting to it.

[acnebs]

This also breaks the rest of the syntax highlighting if you then have nested blocks.

With nested block (broken):

Without nested block (not broken but also not highlighting the block):