Add support for CSS in JS annotations like css` and styled.*`

autoload/emmet.vim

@@ -404,6 +404,8 @@ function! emmet#getFileType(...) abort
     let type = 'typescript'
   elseif type =~? '^xml'
     let type = 'xml'
+  elseif type == 'styledEmmetAbbreviation'
+    let type = 'styled'
   else
     let types = split(&filetype, '\.')
     for part in types
@@ -1680,6 +1682,9 @@ let s:emmet_settings = {
 \    'css.drupal': {
 \        'extends': 'css',
 \    },
+\    'styled': {
+\        'extends': 'css',
+\    },
 \    'html': {
 \        'snippets': {
 \            '!': "html:5",

autoload/emmet/lang/css.vim

@@ -23,7 +23,7 @@ function! emmet#lang#css#parseIntoTree(abbr, type) abort
   " emmet
   let tokens = split(abbr, '+\ze[^+)!]')
   let block = emmet#util#searchRegion('{', '}')
-  if abbr !~# '^@' && emmet#getBaseType(type) ==# 'css' && type !=# 'sass' && block[0] ==# [0,0] && block[1] ==# [0,0]
+  if abbr !~# '^@' && emmet#getBaseType(type) ==# 'css' && type !=# 'sass' && type !=# 'styled' && block[0] ==# [0,0] && block[1] ==# [0,0]
     let current = emmet#newNode()
     let current.snippet = substitute(abbr, '\s\+$', '', '') . " {\n" . indent . "${cursor}\n}"
     let current.name = ''

syntax/javascript.vim

@@ -0,0 +1,3 @@
+" Register `styledEmmetAbbreviation` syntax in `styledDefinition` region defined in
+" https://github.com/styled-components/vim-styled-components.
+syntax match styledEmmetAbbreviation "[a-z0-9#+!%]\+" containedin=styledDefinition contained

syntax/javascriptreact.vim

@@ -0,0 +1 @@
+runtime syntax/javascript.vim

syntax/typescript.vim

@@ -0,0 +1 @@
+runtime syntax/javascript.vim

syntax/typescriptreact.vim

@@ -0,0 +1 @@
+runtime syntax/javascript.vim