Skip to content

Commit

Permalink
[HTML] Tweak embedded script/style code boundaries and comment indent…
Browse files Browse the repository at this point in the history 
…ation (#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
  • Loading branch information
@deathaxe
deathaxe authored Aug 31, 2024
1 parent 4138608 commit 57cb4a2
Show file tree
Hide file tree
Showing 7 changed files with 115 additions and 31 deletions.
9 changes: 4 additions & 5 deletions ASP/syntax_test_asp.asp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,9 +161,8 @@
Dim var = 0
' ^^^^^^^^^^^^^^^^^ source.asp.embedded.html - meta.tag
-->
' <- source.asp.embedded.html
'^^^ source.asp.embedded.html
' ^^^^ - meta.tag - source
' <- - source
'^^^^^^^ - meta.tag - source
' ^^^ comment.block.html punctuation.definition.comment.end.html
</script>
' ^^^^^^^ meta.tag - source
Expand Down Expand Up @@ -200,11 +199,11 @@
<!--
' ^ - meta.tag - comment - source
' ^^^^ comment.block.html punctuation.definition.comment.begin.html - source
' ^ source.css.embedded.html - comment
' ^ - comment - source
h1 {}
' ^^^^^^^ source.css.embedded.html
-->
' ^ source.css.embedded.html - comment
' ^ - comment - source
' ^^^ comment.block.html punctuation.definition.comment.end.html - source
' ^ - meta.tag - comment - source
</style>
Expand Down
21 changes: 13 additions & 8 deletions HTML/HTML.sublime-syntax
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,27 +142,32 @@ variables:
# - https://github.com/sublimehq/sublime_text/issues/4701
script_content_begin: |-
(?x:
# whitespace followed by opening html comment begin punctuation
\s*(<!--)
# whitespace followed by opening html comment begin punctuation,
# optionally followed by whitespeace until end of line
\s*(<!--) (?:\s*\n)?
# or any other non-whitespace character ahead
| (?=\s*(?!<!--)\S)
# or beginning of a line
| ^
)
script_content_end: |-
(?x:
# optional html comment end punctuation followed by </script> tag
(?: (\s*) (-->) \s* )? (?=</(?i:script){{tag_name_break_char}})
# optional html comment end punctuation or any whitespace at beginning of
# line followed by </script> tag
(?: (?: ^ \s* | (\s*) ) (-->) \s* | ^ \s* )? (?=</(?i:script){{tag_name_break_char}})
# or standalone html comment end punctuation in a line
| ^ (\s*) (-->) \s* $
# note: Keep empty capture group for compatibility with existing 3rd-party syntaxes!
| ^ \s* () (-->) \s* $
)
style_content_begin: '{{script_content_begin}}'
style_content_end: |-
(?x:
# optional html comment end punctuation followed by </style> tag
(?: (\s*) (-->) \s* )? (?=</(?i:style){{tag_name_break_char}})
# optional html comment end punctuation or any whitespace at beginning of
# line followed by </style> tag
(?: (?: ^ \s* | (\s*) ) (-->) \s* | ^ \s* )? (?=</(?i:style){{tag_name_break_char}})
# or standalone html comment end punctuation in a line
| ^ (\s*) (-->) \s* $
# note: Keep empty capture group for compatibility with existing 3rd-party syntaxes!
| ^ \s* () (-->) \s* $
)
event_attribute_names: |-
Expand Down
13 changes: 13 additions & 0 deletions HTML/Indentation Rules - Comments.tmPreferences
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<plist version="1.0">
<dict>
<key>scope</key>
<string>text.html comment.block.html</string>
<key>settings</key>
<dict>
<!-- ignore anything until standalone closing comment punctuation -->
<key>unIndentedLinePattern</key>
<string>^(?!\s*-->)</string>
</dict>
</dict>
</plist>
7 changes: 3 additions & 4 deletions HTML/Indentation Rules.tmPreferences
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,9 @@
^[^<>]*+ </ (?!html[\t\n\f /<>])[^\t\n\f /<>]+ [^>]* >
| ^[\t\n\f ]*+
(
# closing comment punctuation, optionally preceded by an end "comment selector"
(<!\[ .*? \])?-->
# the beginning of the line followed by closing HTML comment
# and </script> or </style> tag
--> [\t\n\f ]* </ (?: script | style )[\t\n\f /<>]
# closing directive/section punctuation
| [?%]>
# closing curly brace
Expand All @@ -38,8 +39,6 @@
# not closing in the same line
(?! .* </\k<html_tag>)
)
# comments that don't close themselves on the same line
| <!--(?!.*?-->)
# directives that don't close themselves on the same line
| <\?(?!.*?\?>)
# sections that don't close themselves on the same line
Expand Down
38 changes: 28 additions & 10 deletions HTML/syntax_test_html.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,11 +62,11 @@
<!--
## ^^^^^ - meta.tag - source
## ^^^^ comment.block.html punctuation.definition.comment.begin.html
## ^ source.js.embedded.html - meta.tag - comment
## ^ - source.js.embedded - meta.tag - comment
var i = 0;
## ^^^^^^^^^^^^ source.js.embedded.html - meta.tag
-->
##^^ source.js.embedded.html - meta.tag - comment
##^^ - source - meta.tag - comment
## ^^^^ - source - meta.tag
## ^^^ comment.block.html punctuation.definition.comment.end.html
var i = 0;
Expand Down Expand Up @@ -101,11 +101,10 @@
##^^^^^^ meta.tag.script.begin.html - meta.tag meta.tag - meta.attribute-with-value - source
## ^^^^^^^^^^^^^^^^^^^^^^ meta.tag.script.begin.html meta.attribute-with-value.html - meta.tag meta.tag - meta.attribute-with-value meta.attribute-with-value - source
## ^ meta.tag.script.begin.html - meta.tag meta.tag - meta.attribute-with-value - source
## ^^^^^ - meta.tag - source
## ^^^^^^ - meta.tag - source
## ^ entity.name.tag.script
## ^ string.quoted.double.html
## ^^^^ comment.block.html punctuation.definition.comment.begin.html
## ^ source.js.embedded.html
var foo = 100;
var baz = function() {
## <- entity.name.function.js
Expand All @@ -129,6 +128,9 @@
var foo = 100;
## ^^^^^^^^^^^^^^^ source.js.embedded
</script>
## <- - source.js.embedded
##^^^^^^ - source.js.embedded
## ^^^^^^^^^ meta.tag.script.end.html

<script type=application/json>
{
Expand All @@ -139,21 +141,33 @@
}
## ^ source.json.embedded.html meta.mapping.json punctuation.section.mapping.end.json
</script>
## <- - source.json.embedded
##^^^^^^ - source.json.embedded
## ^^^^^^^^^ meta.tag.script.end.html

<script type="application/ld+json">
{ "@id": {"key": "value" } }
## ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.json.embedded.html
</script>
## <- - source.json.embedded
##^^^^^^ - source.json.embedded
## ^^^^^^^^^ meta.tag.script.end.html

<script type="application/f̱oo+json">
{ "@id": {"key": "value" } }
## ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - source.json
</script>
## <- - source.json.embedded
##^^^^^^ - source.json.embedded
## ^^^^^^^^^ meta.tag.script.end.html

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

<script type="whatever+json">
<![CDATA[
Expand All @@ -166,6 +180,9 @@
## ^ meta.tag.sgml.cdata.html source.json.embedded.html meta.mapping.json punctuation.section.mapping.end.json
]]>
</script>
## <- - source.json.embedded
##^^^^^^ - source.json.embedded
## ^^^^^^^^^ meta.tag.script.end.html

<script type = "text/html"> <!--
##^^^^^^ meta.tag.script.begin.html - meta.tag meta.tag - meta.attribute-with-value
Expand Down Expand Up @@ -205,8 +222,7 @@
## ^^^^ punctuation.definition.comment.begin.html
## ^^^^^^^ source.js.embedded.html
-->
## ^^^^ source.js.embedded.html
## ^^^^ - source
## ^^^^^^^^ - source
## ^^^ comment.block.html punctuation.definition.comment.end.html
</script>

Expand Down Expand Up @@ -326,25 +342,27 @@
## <- source.css.embedded.html
## ^^^^^^^^^^^^^ source.css.embedded.html
</style>
## <- - source.css.embedded
##^^^^^^ - source.css.embedded
## ^^^^^^^^ meta.tag.style.end.html

<style type="text/css">
<!--
## ^ - meta.tag - comment - source
## ^^^^ comment.block.html punctuation.definition.comment.begin.html - source
## ^ source.css.embedded.html - comment
## ^ - comment - source
h1 {}
## ^^^^^^^ source.css.embedded.html
-->
## ^ source.css.embedded.html - comment
## ^ - comment - source
## ^^^ comment.block.html punctuation.definition.comment.end.html - source
## ^ - meta.tag - comment - source
</style>
## ^^^^^ meta.tag - comment - source

<style type="text/css"> <!--
## ^^^^^^^^^^^^^^^^^^^^ meta.tag.style.begin.html - source.css
## ^^^^^ - meta.tag - source.css
## ^ source.css.embedded.html
## ^^^^^^ - meta.tag - source.css
## ^^^ entity.name.tag.style.html
## ^ - entity
## ^^^^ entity.other.attribute-name
Expand Down
54 changes: 52 additions & 2 deletions HTML/syntax_test_html_indentation.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,49 @@
<meta charset="utf-8" />
<title>Page Title Here</title>
<!-- this comment's
indentation should
be unchanged
indentation should
be unchanged
-->
<script>
var i = 0;
function foo() {
return i;
}
</script>
<!-- this comment's
indentation should
be unchanged -->
<script>
<!--
var i = 0;
function foo() {
return i;
}
-->
</script>
<script> <!--
var i = 0;
function foo() {
return i;
}
--> </script>
<style>
p {
font-family: Helvetica;
}
</style>
<style>
<!--
p {
font-family: Helvetica;
}
-->
</style>
<style> <!--
p {
font-family: Helvetica;
}
--> </style>
</head>
<body>

Expand All @@ -21,6 +61,16 @@

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

<script type="text/json">
{
"dict": {
"list": [
"value"
]
}
}
</script>

<!-- Curly braces -->
foo {
bar { <!-- comment -->
Expand Down
4 changes: 2 additions & 2 deletions Rails/tests/syntax_test_rails.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,11 +39,11 @@
<!--
# ^^^^^ - meta.tag - source
# ^^^^ comment.block.html punctuation.definition.comment.begin.html
# ^ source.js.embedded.html - meta.tag - comment
# ^ - comment - source
var i = 0;
# ^^^^^^^^^^^^ source.js.embedded.html - meta.tag
-->
# ^^ source.js.embedded.html - meta.tag - comment
# ^^ - comment - source - meta.tag
# ^^^^ - source - meta.tag
# ^^^ comment.block.html punctuation.definition.comment.end.html
var i = 0;
Expand Down

0 comments on commit 57cb4a2

Please sign in to comment.