Skip to content

Commit 57cb4a2

Browse files
deathaxedeathaxe
authored
[HTML] Tweak embedded script/style code boundaries and comment indentation (#4020)
* [HTML] Tweak embedded script/style code boundaries This commit... 1. consumes a) any trailing whitespace until end of line after opening script/style tags or optionally following `<!--` punctuation. b) any leading whitespace in front of closing script/style tags or optionally preceded `-->` punctuation. to not apply embedded syntax's scope after standalone opening or in front of standalone closing tags. This change makes sure to ... a) always apply HTML specific indentation rules to enclosing script/style tags or comment punctuation. b) apply custom background highlighting of embedded syntaxes only on full lines, but not after or in front of standalone tags. 2. modifies indentation rules for HTML comments to remove indentation of comments' content. * [HTML] Adjust ASP/Rails syntax tests
1 parent 4138608 commit 57cb4a2

File tree

7 files changed

+115
-31
lines changed

7 files changed

+115
-31
lines changed

‎ASP/syntax_test_asp.asp‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -161,9 +161,8 @@
161161
Dim var = 0
162162
' ^^^^^^^^^^^^^^^^^ source.asp.embedded.html - meta.tag
163163
-->
164-
' <- source.asp.embedded.html
165-
'^^^ source.asp.embedded.html
166-
' ^^^^ - meta.tag - source
164+
' <- - source
165+
'^^^^^^^ - meta.tag - source
167166
' ^^^ comment.block.html punctuation.definition.comment.end.html
168167
</script>
169168
' ^^^^^^^ meta.tag - source
@@ -200,11 +199,11 @@
200199
<!--
201200
' ^ - meta.tag - comment - source
202201
' ^^^^ comment.block.html punctuation.definition.comment.begin.html - source
203-
' ^ source.css.embedded.html - comment
202+
' ^ - comment - source
204203
h1 {}
205204
' ^^^^^^^ source.css.embedded.html
206205
-->
207-
' ^ source.css.embedded.html - comment
206+
' ^ - comment - source
208207
' ^^^ comment.block.html punctuation.definition.comment.end.html - source
209208
' ^ - meta.tag - comment - source
210209
</style>

‎HTML/HTML.sublime-syntax‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -142,27 +142,32 @@ variables:
142142
# - https://github.com/sublimehq/sublime_text/issues/4701
143143
script_content_begin: |-
144144
(?x:
145-
# whitespace followed by opening html comment begin punctuation
146-
\s*(<!--)
145+
# whitespace followed by opening html comment begin punctuation,
146+
# optionally followed by whitespeace until end of line
147+
\s*(<!--) (?:\s*\n)?
147148
# or any other non-whitespace character ahead
148149
| (?=\s*(?!<!--)\S)
149150
# or beginning of a line
150151
| ^
151152
)
152153
script_content_end: |-
153154
(?x:
154-
# optional html comment end punctuation followed by </script> tag
155-
(?: (\s*) (-->) \s* )? (?=</(?i:script){{tag_name_break_char}})
155+
# optional html comment end punctuation or any whitespace at beginning of
156+
# line followed by </script> tag
157+
(?: (?: ^ \s* | (\s*) ) (-->) \s* | ^ \s* )? (?=</(?i:script){{tag_name_break_char}})
156158
# or standalone html comment end punctuation in a line
157-
| ^ (\s*) (-->) \s* $
159+
# note: Keep empty capture group for compatibility with existing 3rd-party syntaxes!
160+
| ^ \s* () (-->) \s* $
158161
)
159162
style_content_begin: '{{script_content_begin}}'
160163
style_content_end: |-
161164
(?x:
162-
# optional html comment end punctuation followed by </style> tag
163-
(?: (\s*) (-->) \s* )? (?=</(?i:style){{tag_name_break_char}})
165+
# optional html comment end punctuation or any whitespace at beginning of
166+
# line followed by </style> tag
167+
(?: (?: ^ \s* | (\s*) ) (-->) \s* | ^ \s* )? (?=</(?i:style){{tag_name_break_char}})
164168
# or standalone html comment end punctuation in a line
165-
| ^ (\s*) (-->) \s* $
169+
# note: Keep empty capture group for compatibility with existing 3rd-party syntaxes!
170+
| ^ \s* () (-->) \s* $
166171
)
167172
168173
event_attribute_names: |-

‎HTML/Indentation Rules - Comments.tmPreferences‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<plist version="1.0">
3+
<dict>
4+
<key>scope</key>
5+
<string>text.html comment.block.html</string>
6+
<key>settings</key>
7+
<dict>
8+
<!-- ignore anything until standalone closing comment punctuation -->
9+
<key>unIndentedLinePattern</key>
10+
<string>^(?!\s*-->)</string>
11+
</dict>
12+
</dict>
13+
</plist>

‎HTML/Indentation Rules.tmPreferences‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,9 @@
1212
^[^<>]*+ </ (?!html[\t\n\f /<>])[^\t\n\f /<>]+ [^>]* >
1313
| ^[\t\n\f ]*+
1414
(
15-
# closing comment punctuation, optionally preceded by an end "comment selector"
16-
(<!\[ .*? \])?-->
15+
# the beginning of the line followed by closing HTML comment
16+
# and </script> or </style> tag
17+
--> [\t\n\f ]* </ (?: script | style )[\t\n\f /<>]
1718
# closing directive/section punctuation
1819
| [?%]>
1920
# closing curly brace
@@ -38,8 +39,6 @@
3839
# not closing in the same line
3940
(?! .* </\k<html_tag>)
4041
)
41-
# comments that don't close themselves on the same line
42-
| <!--(?!.*?-->)
4342
# directives that don't close themselves on the same line
4443
| <\?(?!.*?\?>)
4544
# sections that don't close themselves on the same line

‎HTML/syntax_test_html.html‎

Lines changed: 28 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -62,11 +62,11 @@
6262
<!--
6363
## ^^^^^ - meta.tag - source
6464
## ^^^^ comment.block.html punctuation.definition.comment.begin.html
65-
## ^ source.js.embedded.html - meta.tag - comment
65+
## ^ - source.js.embedded - meta.tag - comment
6666
var i = 0;
6767
## ^^^^^^^^^^^^ source.js.embedded.html - meta.tag
6868
-->
69-
##^^ source.js.embedded.html - meta.tag - comment
69+
##^^ - source - meta.tag - comment
7070
## ^^^^ - source - meta.tag
7171
## ^^^ comment.block.html punctuation.definition.comment.end.html
7272
var i = 0;
@@ -101,11 +101,10 @@
101101
##^^^^^^ meta.tag.script.begin.html - meta.tag meta.tag - meta.attribute-with-value - source
102102
## ^^^^^^^^^^^^^^^^^^^^^^ meta.tag.script.begin.html meta.attribute-with-value.html - meta.tag meta.tag - meta.attribute-with-value meta.attribute-with-value - source
103103
## ^ meta.tag.script.begin.html - meta.tag meta.tag - meta.attribute-with-value - source
104-
## ^^^^^ - meta.tag - source
104+
## ^^^^^^ - meta.tag - source
105105
## ^ entity.name.tag.script
106106
## ^ string.quoted.double.html
107107
## ^^^^ comment.block.html punctuation.definition.comment.begin.html
108-
## ^ source.js.embedded.html
109108
var foo = 100;
110109
var baz = function() {
111110
## <- entity.name.function.js
@@ -129,6 +128,9 @@
129128
var foo = 100;
130129
## ^^^^^^^^^^^^^^^ source.js.embedded
131130
</script>
131+
## <- - source.js.embedded
132+
##^^^^^^ - source.js.embedded
133+
## ^^^^^^^^^ meta.tag.script.end.html
132134

133135
<script type=application/json>
134136
{
@@ -139,21 +141,33 @@
139141
}
140142
## ^ source.json.embedded.html meta.mapping.json punctuation.section.mapping.end.json
141143
</script>
144+
## <- - source.json.embedded
145+
##^^^^^^ - source.json.embedded
146+
## ^^^^^^^^^ meta.tag.script.end.html
142147

143148
<script type="application/ld+json">
144149
{ "@id": {"key": "value" } }
145150
## ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.json.embedded.html
146151
</script>
152+
## <- - source.json.embedded
153+
##^^^^^^ - source.json.embedded
154+
## ^^^^^^^^^ meta.tag.script.end.html
147155

148156
<script type="application/f̱oo+json">
149157
{ "@id": {"key": "value" } }
150158
## ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - source.json
151159
</script>
160+
## <- - source.json.embedded
161+
##^^^^^^ - source.json.embedded
162+
## ^^^^^^^^^ meta.tag.script.end.html
152163

153164
<script type="application/ld+json;charset=utf-8">
154165
{ "@id": {"key": "value" } }
155166
## ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.json.embedded.html
156167
</script>
168+
## <- - source.json.embedded
169+
##^^^^^^ - source.json.embedded
170+
## ^^^^^^^^^ meta.tag.script.end.html
157171

158172
<script type="whatever+json">
159173
<![CDATA[
@@ -166,6 +180,9 @@
166180
## ^ meta.tag.sgml.cdata.html source.json.embedded.html meta.mapping.json punctuation.section.mapping.end.json
167181
]]>
168182
</script>
183+
## <- - source.json.embedded
184+
##^^^^^^ - source.json.embedded
185+
## ^^^^^^^^^ meta.tag.script.end.html
169186

170187
<script type = "text/html"> <!--
171188
##^^^^^^ meta.tag.script.begin.html - meta.tag meta.tag - meta.attribute-with-value
@@ -205,8 +222,7 @@
205222
## ^^^^ punctuation.definition.comment.begin.html
206223
## ^^^^^^^ source.js.embedded.html
207224
-->
208-
## ^^^^ source.js.embedded.html
209-
## ^^^^ - source
225+
## ^^^^^^^^ - source
210226
## ^^^ comment.block.html punctuation.definition.comment.end.html
211227
</script>
212228

@@ -326,25 +342,27 @@
326342
## <- source.css.embedded.html
327343
## ^^^^^^^^^^^^^ source.css.embedded.html
328344
</style>
345+
## <- - source.css.embedded
346+
##^^^^^^ - source.css.embedded
347+
## ^^^^^^^^ meta.tag.style.end.html
329348

330349
<style type="text/css">
331350
<!--
332351
## ^ - meta.tag - comment - source
333352
## ^^^^ comment.block.html punctuation.definition.comment.begin.html - source
334-
## ^ source.css.embedded.html - comment
353+
## ^ - comment - source
335354
h1 {}
336355
## ^^^^^^^ source.css.embedded.html
337356
-->
338-
## ^ source.css.embedded.html - comment
357+
## ^ - comment - source
339358
## ^^^ comment.block.html punctuation.definition.comment.end.html - source
340359
## ^ - meta.tag - comment - source
341360
</style>
342361
## ^^^^^ meta.tag - comment - source
343362

344363
<style type="text/css"> <!--
345364
## ^^^^^^^^^^^^^^^^^^^^ meta.tag.style.begin.html - source.css
346-
## ^^^^^ - meta.tag - source.css
347-
## ^ source.css.embedded.html
365+
## ^^^^^^ - meta.tag - source.css
348366
## ^^^ entity.name.tag.style.html
349367
## ^ - entity
350368
## ^^^^ entity.other.attribute-name

‎HTML/syntax_test_html_indentation.html‎

Lines changed: 52 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,49 @@
66
<meta charset="utf-8" />
77
<title>Page Title Here</title>
88
<!-- this comment's
9-
indentation should
10-
be unchanged
9+
indentation should
10+
be unchanged
1111
-->
12+
<script>
13+
var i = 0;
14+
function foo() {
15+
return i;
16+
}
17+
</script>
18+
<!-- this comment's
19+
indentation should
20+
be unchanged -->
21+
<script>
22+
<!--
23+
var i = 0;
24+
function foo() {
25+
return i;
26+
}
27+
-->
28+
</script>
29+
<script> <!--
30+
var i = 0;
31+
function foo() {
32+
return i;
33+
}
34+
--> </script>
35+
<style>
36+
p {
37+
font-family: Helvetica;
38+
}
39+
</style>
40+
<style>
41+
<!--
42+
p {
43+
font-family: Helvetica;
44+
}
45+
-->
46+
</style>
47+
<style> <!--
48+
p {
49+
font-family: Helvetica;
50+
}
51+
--> </style>
1252
</head>
1353
<body>
1454

@@ -21,6 +61,16 @@
2161

2262
<script type="text/javascript" src="/some_script.js"></script>
2363

64+
<script type="text/json">
65+
{
66+
"dict": {
67+
"list": [
68+
"value"
69+
]
70+
}
71+
}
72+
</script>
73+
2474
<!-- Curly braces -->
2575
foo {
2676
bar { <!-- comment -->

‎Rails/tests/syntax_test_rails.html.erb‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,11 +39,11 @@
3939
<!--
4040
# ^^^^^ - meta.tag - source
4141
# ^^^^ comment.block.html punctuation.definition.comment.begin.html
42-
# ^ source.js.embedded.html - meta.tag - comment
42+
# ^ - comment - source
4343
var i = 0;
4444
# ^^^^^^^^^^^^ source.js.embedded.html - meta.tag
4545
-->
46-
# ^^ source.js.embedded.html - meta.tag - comment
46+
# ^^ - comment - source - meta.tag
4747
# ^^^^ - source - meta.tag
4848
# ^^^ comment.block.html punctuation.definition.comment.end.html
4949
var i = 0;

0 commit comments

Comments
 (0)