Skip to content
This repository was archived by the owner on Dec 15, 2022. It is now read-only.

Commit 40ca255

Browse files
WliuWliu
Wliu
authored and
Wliu
committed
Merge pull request #282 from jrburke/html-css-tagged-templates
Support HTML and CSS syntax in template strings suggesting those formats
2 parents 54634fe + 3b0759f commit 40ca255

File tree

2 files changed

+124
-0
lines changed

2 files changed

+124
-0
lines changed

‎grammars/javascript.cson‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1009,6 +1009,56 @@
10091009
}
10101010
]
10111011
}
1012+
{
1013+
'begin': '((\\w+)?(html|HTML|Html))\\s*(`)'
1014+
'beginCaptures':
1015+
'1':
1016+
'name': 'entity.name.function.js'
1017+
'4':
1018+
'name': 'punctuation.definition.string.begin.js'
1019+
'end': '`'
1020+
'endCaptures':
1021+
'0':
1022+
'name': 'punctuation.definition.string.end.js'
1023+
'name': 'string.quoted.template.html.js'
1024+
'patterns': [
1025+
{
1026+
'match': '\\\\(x\\h{2}|[0-2][0-7]{0,2}|3[0-6][0-7]?|37[0-7]?|[4-7][0-7]?|.)'
1027+
'name': 'constant.character.escape.js'
1028+
}
1029+
{
1030+
'include': '#interpolated_js'
1031+
}
1032+
{
1033+
'include': 'text.html.basic'
1034+
}
1035+
]
1036+
}
1037+
{
1038+
'begin': '((\\w+)?(css|CSS|Css))\\s*(`)'
1039+
'beginCaptures':
1040+
'1':
1041+
'name': 'entity.name.function.js'
1042+
'4':
1043+
'name': 'punctuation.definition.string.begin.js'
1044+
'end': '`'
1045+
'endCaptures':
1046+
'0':
1047+
'name': 'punctuation.definition.string.end.js'
1048+
'name': 'string.quoted.template.css.js'
1049+
'patterns': [
1050+
{
1051+
'match': '\\\\(x\\h{2}|[0-2][0-7]{0,2}|3[0-6][0-7]?|37[0-7]?|[4-7][0-7]?|.)'
1052+
'name': 'constant.character.escape.js'
1053+
}
1054+
{
1055+
'include': '#interpolated_js'
1056+
}
1057+
{
1058+
'include': 'source.css'
1059+
}
1060+
]
1061+
}
10121062
{
10131063
'begin': '`'
10141064
'beginCaptures':

‎spec/javascript-spec.coffee‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -495,6 +495,80 @@ describe "Javascript grammar", ->
495495
expect(tokens[13]).toEqual value: '}', scopes: ['source.js', 'string.quoted.template.js', 'source.js.embedded.source', 'punctuation.section.embedded.js']
496496
expect(tokens[14]).toEqual value: '`', scopes: ['source.js', 'string.quoted.template.js', 'punctuation.definition.string.end.js']
497497

498+
describe "ES6 tagged HTML string templates", ->
499+
it "tokenizes them as strings", ->
500+
{tokens} = grammar.tokenizeLine('html`hey <b>${name}</b>`')
501+
expect(tokens[0]).toEqual value: 'html', scopes: [ 'source.js', 'string.quoted.template.html.js', 'entity.name.function.js' ]
502+
expect(tokens[1]).toEqual value: '`', scopes: [ 'source.js', 'string.quoted.template.html.js', 'punctuation.definition.string.begin.js' ]
503+
expect(tokens[2]).toEqual value: 'hey <b>', scopes: ['source.js', 'string.quoted.template.html.js']
504+
expect(tokens[3]).toEqual value: '${', scopes: ['source.js', 'string.quoted.template.html.js', 'source.js.embedded.source', 'punctuation.section.embedded.js']
505+
expect(tokens[4]).toEqual value: 'name', scopes: ['source.js', 'string.quoted.template.html.js', 'source.js.embedded.source']
506+
expect(tokens[5]).toEqual value: '}', scopes: ['source.js', 'string.quoted.template.html.js', 'source.js.embedded.source', 'punctuation.section.embedded.js']
507+
expect(tokens[6]).toEqual value: '</b>', scopes: ['source.js', 'string.quoted.template.html.js']
508+
expect(tokens[7]).toEqual value: '`', scopes: ['source.js', 'string.quoted.template.html.js', 'punctuation.definition.string.end.js']
509+
510+
describe "ES6 tagged HTML string templates with expanded function name", ->
511+
it "tokenizes them as strings", ->
512+
{tokens} = grammar.tokenizeLine('escapeHTML`hey <b>${name}</b>`')
513+
expect(tokens[0]).toEqual value: 'escapeHTML', scopes: [ 'source.js', 'string.quoted.template.html.js', 'entity.name.function.js' ]
514+
expect(tokens[1]).toEqual value: '`', scopes: [ 'source.js', 'string.quoted.template.html.js', 'punctuation.definition.string.begin.js' ]
515+
expect(tokens[2]).toEqual value: 'hey <b>', scopes: ['source.js', 'string.quoted.template.html.js']
516+
expect(tokens[3]).toEqual value: '${', scopes: ['source.js', 'string.quoted.template.html.js', 'source.js.embedded.source', 'punctuation.section.embedded.js']
517+
expect(tokens[4]).toEqual value: 'name', scopes: ['source.js', 'string.quoted.template.html.js', 'source.js.embedded.source']
518+
expect(tokens[5]).toEqual value: '}', scopes: ['source.js', 'string.quoted.template.html.js', 'source.js.embedded.source', 'punctuation.section.embedded.js']
519+
expect(tokens[6]).toEqual value: '</b>', scopes: ['source.js', 'string.quoted.template.html.js']
520+
expect(tokens[7]).toEqual value: '`', scopes: ['source.js', 'string.quoted.template.html.js', 'punctuation.definition.string.end.js']
521+
522+
describe "ES6 tagged HTML string templates with expanded function name and white space", ->
523+
it "tokenizes them as strings", ->
524+
{tokens} = grammar.tokenizeLine('escapeHTML `hey <b>${name}</b>`')
525+
expect(tokens[0]).toEqual value: 'escapeHTML', scopes: [ 'source.js', 'string.quoted.template.html.js', 'entity.name.function.js' ]
526+
expect(tokens[1]).toEqual value: ' ', scopes: [ 'source.js', 'string.quoted.template.html.js' ]
527+
expect(tokens[2]).toEqual value: '`', scopes: [ 'source.js', 'string.quoted.template.html.js', 'punctuation.definition.string.begin.js' ]
528+
expect(tokens[3]).toEqual value: 'hey <b>', scopes: ['source.js', 'string.quoted.template.html.js']
529+
expect(tokens[4]).toEqual value: '${', scopes: ['source.js', 'string.quoted.template.html.js', 'source.js.embedded.source', 'punctuation.section.embedded.js']
530+
expect(tokens[5]).toEqual value: 'name', scopes: ['source.js', 'string.quoted.template.html.js', 'source.js.embedded.source']
531+
expect(tokens[6]).toEqual value: '}', scopes: ['source.js', 'string.quoted.template.html.js', 'source.js.embedded.source', 'punctuation.section.embedded.js']
532+
expect(tokens[7]).toEqual value: '</b>', scopes: ['source.js', 'string.quoted.template.html.js']
533+
expect(tokens[8]).toEqual value: '`', scopes: ['source.js', 'string.quoted.template.html.js', 'punctuation.definition.string.end.js']
534+
535+
describe "ES6 tagged CSS string templates", ->
536+
it "tokenizes them as strings", ->
537+
{tokens} = grammar.tokenizeLine('css`.highlight { border: ${borderSize}; }`')
538+
expect(tokens[0]).toEqual value: 'css', scopes: [ 'source.js', 'string.quoted.template.css.js', 'entity.name.function.js' ]
539+
expect(tokens[1]).toEqual value: '`', scopes: [ 'source.js', 'string.quoted.template.css.js', 'punctuation.definition.string.begin.js' ]
540+
expect(tokens[2]).toEqual value: '.highlight { border: ', scopes: ['source.js', 'string.quoted.template.css.js']
541+
expect(tokens[3]).toEqual value: '${', scopes: ['source.js', 'string.quoted.template.css.js', 'source.js.embedded.source', 'punctuation.section.embedded.js']
542+
expect(tokens[4]).toEqual value: 'borderSize', scopes: ['source.js', 'string.quoted.template.css.js', 'source.js.embedded.source']
543+
expect(tokens[5]).toEqual value: '}', scopes: ['source.js', 'string.quoted.template.css.js', 'source.js.embedded.source', 'punctuation.section.embedded.js']
544+
expect(tokens[6]).toEqual value: '; }', scopes: ['source.js', 'string.quoted.template.css.js']
545+
expect(tokens[7]).toEqual value: '`', scopes: ['source.js', 'string.quoted.template.css.js', 'punctuation.definition.string.end.js']
546+
547+
describe "ES6 tagged CSS string templates with expanded function name", ->
548+
it "tokenizes them as strings", ->
549+
{tokens} = grammar.tokenizeLine('escapeCSS`.highlight { border: ${borderSize}; }`')
550+
expect(tokens[0]).toEqual value: 'escapeCSS', scopes: [ 'source.js', 'string.quoted.template.css.js', 'entity.name.function.js' ]
551+
expect(tokens[1]).toEqual value: '`', scopes: [ 'source.js', 'string.quoted.template.css.js', 'punctuation.definition.string.begin.js' ]
552+
expect(tokens[2]).toEqual value: '.highlight { border: ', scopes: ['source.js', 'string.quoted.template.css.js']
553+
expect(tokens[3]).toEqual value: '${', scopes: ['source.js', 'string.quoted.template.css.js', 'source.js.embedded.source', 'punctuation.section.embedded.js']
554+
expect(tokens[4]).toEqual value: 'borderSize', scopes: ['source.js', 'string.quoted.template.css.js', 'source.js.embedded.source']
555+
expect(tokens[5]).toEqual value: '}', scopes: ['source.js', 'string.quoted.template.css.js', 'source.js.embedded.source', 'punctuation.section.embedded.js']
556+
expect(tokens[6]).toEqual value: '; }', scopes: ['source.js', 'string.quoted.template.css.js']
557+
expect(tokens[7]).toEqual value: '`', scopes: ['source.js', 'string.quoted.template.css.js', 'punctuation.definition.string.end.js']
558+
559+
describe "ES6 tagged CSS string templates with expanded function name and white space", ->
560+
it "tokenizes them as strings", ->
561+
{tokens} = grammar.tokenizeLine('escapeCSS `.highlight { border: ${borderSize}; }`')
562+
expect(tokens[0]).toEqual value: 'escapeCSS', scopes: [ 'source.js', 'string.quoted.template.css.js', 'entity.name.function.js' ]
563+
expect(tokens[1]).toEqual value: ' ', scopes: [ 'source.js', 'string.quoted.template.css.js' ]
564+
expect(tokens[2]).toEqual value: '`', scopes: [ 'source.js', 'string.quoted.template.css.js', 'punctuation.definition.string.begin.js' ]
565+
expect(tokens[3]).toEqual value: '.highlight { border: ', scopes: ['source.js', 'string.quoted.template.css.js']
566+
expect(tokens[4]).toEqual value: '${', scopes: ['source.js', 'string.quoted.template.css.js', 'source.js.embedded.source', 'punctuation.section.embedded.js']
567+
expect(tokens[5]).toEqual value: 'borderSize', scopes: ['source.js', 'string.quoted.template.css.js', 'source.js.embedded.source']
568+
expect(tokens[6]).toEqual value: '}', scopes: ['source.js', 'string.quoted.template.css.js', 'source.js.embedded.source', 'punctuation.section.embedded.js']
569+
expect(tokens[7]).toEqual value: '; }', scopes: ['source.js', 'string.quoted.template.css.js']
570+
expect(tokens[8]).toEqual value: '`', scopes: ['source.js', 'string.quoted.template.css.js', 'punctuation.definition.string.end.js']
571+
498572
describe "ES6 class", ->
499573
it "tokenizes class", ->
500574
{tokens} = grammar.tokenizeLine('class MyClass')

0 commit comments

Comments
 (0)