[CSS] Fix issues with template interpolation (#4055)

This commit... 1. changes context include order to give `property-lists` less priority over `{{ interpol }}` interpolation tags, so they are scoped as part of selectors or property names. 2. in case strategy 1 is not enough, provide variables to override block punctuation, without duplicating contexts. Note: This commit does not change behavior of CSS itself, just helps inherited CSS variants used in templates like Blade, Go, Jinja, Twig, ... Co-authored-by: Keith Hall <[email protected]>
sublimehq · Oct 11, 2024 · 8aae77f · 8aae77f
1 parent 9a8d068
commit 8aae77f
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 14 deletions.
diff --git a/CSS/CSS.sublime-syntax b/CSS/CSS.sublime-syntax
@@ -85,6 +85,13 @@ variables:
 
   logical_operators: (?i:and|or|not|only)
 
+  # Block punctuations
+  #  Provides an easy and safe interface for template syntaxes to override
+  #  block punctuation patterns to prevent ambiguities with interpolations.
+  #  It helps to correctly highlight {{ tag }} { {{prop}}: {{value}} }
+  block_start: \{
+  block_end: \}
+
   # Properties and Selectors
   property_or_selector_begin: (?={{ident_begin}}|{{selector_start}})
   property_end: (?=[;@)}])
@@ -355,10 +362,14 @@ contexts:
 
   stylesheet:
     # https://www.w3.org/TR/css-syntax-3/#typedef-stylesheet
+    #
+    # CAUTION:
+    # property-lists must follow selector, properties, at-rules
+    # to give {{ interpolation }} precedence
     - include: comments
-    - include: property-lists
     - include: selectors
     - include: at-rules
+    - include: property-lists
     - include: rule-terminators
     - include: illegal-commas
     - include: illegal-groups
@@ -531,7 +542,7 @@ contexts:
   at-counter-style-declaration-list:
     # https://www.w3.org/TR/css-syntax-3/#typedef-declaration-list
     - meta_include_prototype: false
-    - match: \{
+    - match: '{{block_start}}'
       scope: punctuation.section.block.begin.css
       set: at-counter-style-declaration-list-body
     - include: comments
@@ -689,19 +700,22 @@ contexts:
 
   at-keyframe-block:
     - meta_include_prototype: false
-    - match: \{
+    - match: '{{block_start}}'
       scope: punctuation.section.block.begin.css
       set: at-keyframe-block-body
     - include: comments
     - include: else-pop
 
   at-keyframe-block-body:
+    # CAUTION:
+    # property-lists must follow selector, properties, at-rules
+    # to give {{ interpolation }} precedence
     - meta_include_prototype: false
     - meta_scope: meta.block.css
     - include: block-end
     - include: comments
-    - include: property-lists
     - include: at-keyframe-selectors
+    - include: property-lists
     - include: rule-terminators
     - include: illegal-commas
     - include: illegal-groups
@@ -1008,7 +1022,7 @@ contexts:
 
   at-other-body:
     - meta_scope: meta.at-rule.other.css
-    - match: \{
+    - match: '{{block_start}}'
       scope: punctuation.section.block.begin.css
       push: at-other-block-body
     - include: at-rule-end
@@ -1492,7 +1506,7 @@ contexts:
 
   maybe-stylesheet-block:
     - meta_include_prototype: false
-    - match: \{
+    - match: '{{block_start}}'
       scope: punctuation.section.block.begin.css
       set: stylesheet-block-body
     - include: comments
@@ -1508,28 +1522,32 @@ contexts:
 
   maybe-property-list:
     - meta_include_prototype: false
-    - match: \{
+    - match: '{{block_start}}'
       scope: punctuation.section.block.begin.css
       set: property-list-body
     - include: comments
     - include: else-pop
 
   property-lists:
-    - match: \{
+    - match: '{{block_start}}'
       scope: punctuation.section.block.begin.css
       push: property-list-body
 
   property-list-body:
     # According to official specs, this is a style-block.
     # It supports declarations, nested style-rules and at-rules.
     # https://www.w3.org/TR/css-syntax-3/#typedef-style-block
+    #
+    # CAUTION:
+    # property-lists must follow selector, properties, at-rules
+    # to give {{ interpolation }} precedence
     - meta_include_prototype: false
     - meta_scope: meta.property-list.css meta.block.css
     - include: block-end
     - include: comments
-    - include: property-lists
     - include: properties-or-selectors
     - include: nested-at-rules
+    - include: property-lists
     - include: rule-terminators
     - include: illegal-commas
     - include: illegal-groups
@@ -3464,12 +3482,12 @@ contexts:
       scope: punctuation.separator.sequence.css
 
   block-end:
-    - match: \}
+    - match: '{{block_end}}'
       scope: punctuation.section.block.end.css
       pop: 1
 
   block-end2:
-    - match: \}
+    - match: '{{block_end}}'
       scope: punctuation.section.block.end.css
       pop: 2
 
@@ -3493,13 +3511,13 @@ contexts:
 
   illegal-blocks:
     # https://www.w3.org/TR/CSS22/syndata.html#parsing-errors
-    - match: \{
+    - match: '{{block_start}}'
       scope: invalid.illegal.unexpected-token.css
       push:
-        - match: \}
+        - match: '{{block_end}}'
           scope: invalid.illegal.unexpected-token.css
           pop: 1
-    - match: \}
+    - match: '{{block_end}}'
       scope: invalid.illegal.unexpected-token.css
 
   illegal-groups:

diff --git a/Go/tests/syntax_test_template.html b/Go/tests/syntax_test_template.html
@@ -63,6 +63,22 @@
         |                        ^^ punctuation.section.interpolation.end.go - source.go.template
         |                          ^ punctuation.terminator.rule.css
         }
+
+        {{ $tag }} > .{{ $cls }} #{{ $id }} { {{$prop_name}}: {{ $value }} }
+        | <- meta.selector.css meta.interpolation.go punctuation.section.interpolation.begin.go
+        | ^^^^^^^^ meta.selector.css meta.interpolation.go
+        |         ^^^^ meta.selector.css - meta.interpolation
+        |             ^^^^^^^^^^ meta.selector.css meta.interpolation.go
+        |                       ^^ meta.selector.css - meta.interpolation
+        |                         ^^^^^^^^^ meta.selector.css meta.interpolation.go
+        |                                  ^ meta.selector.css - meta.interpolation
+        |                                   ^^ meta.property-list.css meta.block.css - meta.property-name - meta.interpolation
+        |                                     ^^^^^^^^^^^^^^ meta.property-list.css meta.block.css meta.property-name.css support.type.property-name.css meta.interpolation.go
+        |                                                   ^ meta.property-list.css meta.block.css - meta.property-name - meta.property-value - meta.interpolation
+        |                                                    ^ meta.property-list.css meta.block.css meta.property-value.css - meta.interpolation
+        |                                                     ^^^^^^^^^^^^ meta.property-list.css meta.block.css meta.property-value.css meta.interpolation.go
+        |                                                                 ^ meta.property-list.css meta.block.css meta.property-value.css - meta.interpolation
+        |                                                                  ^ meta.property-list.css meta.block.css - meta.property-value - meta.interpolation
     </style>
   </head>
 

diff --git a/Go/tests/syntax_test_template.md b/Go/tests/syntax_test_template.md
@@ -155,6 +155,21 @@
 |                           ^^ punctuation.section.interpolation.end.go - source.go.template
 |                             ^ punctuation.terminator.rule.css
     }
+
+    {{ $tag }} > .{{ $cls }} #{{ $id }} { {{$prop_name}}: {{ $value }} }
+|   ^^^^^^^^^^ meta.selector.css meta.interpolation.go
+|             ^^^^ meta.selector.css - meta.interpolation
+|                 ^^^^^^^^^^ meta.selector.css meta.interpolation.go
+|                           ^^ meta.selector.css - meta.interpolation
+|                             ^^^^^^^^^ meta.selector.css meta.interpolation.go
+|                                      ^ meta.selector.css - meta.interpolation
+|                                       ^^ meta.property-list.css meta.block.css - meta.property-name - meta.interpolation
+|                                         ^^^^^^^^^^^^^^ meta.property-list.css meta.block.css meta.property-name.css support.type.property-name.css meta.interpolation.go
+|                                                       ^ meta.property-list.css meta.block.css - meta.property-name - meta.property-value - meta.interpolation
+|                                                        ^ meta.property-list.css meta.block.css meta.property-value.css - meta.interpolation
+|                                                         ^^^^^^^^^^^^ meta.property-list.css meta.block.css meta.property-value.css meta.interpolation.go
+|                                                                     ^ meta.property-list.css meta.block.css meta.property-value.css - meta.interpolation
+|                                                                      ^ meta.property-list.css meta.block.css - meta.property-value - meta.interpolation
   </style>
 
   <hr style="color: {{.Site.Color}}"/>