Attribute values containing ${} anywhere are interpreted as javascript with fixed offsets

[kmoschcau]

This is particularly noticeable when using thymeleaf expression syntax.

For example I have this element:

<div th:replace="footers/${footerStyle} :: .footer-container"></div>

The attribute value starting from the second "o" until the last "e" is interpreted as javascript. This looks to me as if the dollar sign, opening and closing brace are implicitly assumed to be at the start and end of the attribute value, even though they can appear anywhere in the attribute to trigger this behavior.

Here is what that looks like when using this for highlighting in neovim:

This is what the TSPlayground shows when toggling everything on:

element [0, 0] - [0, 68]
  start_tag [0, 0] - [0, 62]
    "<" [0, 0] - [0, 1]
    tag_name [0, 1] - [0, 4]
    attribute [0, 5] - [0, 61]
      attribute_name [0, 5] - [0, 15]
      "=" [0, 15] - [0, 16]
      quoted_attribute_value [0, 16] - [0, 61]
        """ [0, 16] - [0, 17]
        attribute_value [0, 17] - [0, 60]
          expression_statement [0, 19] - [0, 59]
            binary_expression [0, 19] - [0, 59]
              left: binary_expression [0, 19] - [0, 50]
                left: identifier [0, 19] - [0, 24]
                operator: "/" [0, 24] - [0, 25]
                ERROR [0, 25] - [0, 26]
                  identifier [0, 25] - [0, 26]
                right: member_expression [0, 26] - [0, 50]
                  object: object [0, 26] - [0, 39]
                    "{" [0, 26] - [0, 27]
                    shorthand_property_identifier [0, 27] - [0, 38]
                    "}" [0, 38] - [0, 39]
                  ERROR [0, 40] - [0, 42]
                    ":" [0, 40] - [0, 41]
                    ":" [0, 41] - [0, 42]
                  "." [0, 43] - [0, 44]
                  property: property_identifier [0, 44] - [0, 50]
              operator: "-" [0, 50] - [0, 51]
              right: identifier [0, 51] - [0, 59]
        """ [0, 60] - [0, 61]
    ">" [0, 61] - [0, 62]
  end_tag [0, 62] - [0, 68]
    "</" [0, 62] - [0, 64]
    tag_name [0, 64] - [0, 67]
    ">" [0, 67] - [0, 68]

[amaanq]

Just FYI, this won't be solved here - you could create a grammar for thymeleaf to then be injected here

[kmoschcau]

Just FYI, this won't be solved here - you could create a grammar for thymeleaf to then be injected here

I am not sure this issue is thymeleaf specific though. If the HTML grammar already looks for these interpolation constructs in attributes, it should also consider where in the attribute they appear. This is independent of thymeleaf.

[amaanq]

No, the HTML grammar does not look for them. The way it works is an injections query is created to inject languages into certain nodes of the HTML grammar - in Neovim JavaScript is injected if $( and } are present iirc. Same construct would apply for thymeleaf, once there's a grammar certain patterns/nodes can be queried to have that language injected.

[kmoschcau]

No, the HTML grammar does not look for them. The way it works is an injections query is created to inject languages into certain nodes of the HTML grammar - in Neovim JavaScript is injected if $( and } are present iirc. Same construct would apply for thymeleaf, once there's a grammar certain patterns/nodes can be queried to have that language injected.

Alright. But since there is no thymeleaf grammar as far as I know, this would then mean that the JavaScript grammar is wrong here, correct?

[kmoschcau]

To bring this a bit further, I get that the HTML grammar injects Javascript here. This already seems like a fairly strong assumption that's not always correct. But wouldn't it be better if the condition for the injection and the injection offsets would at least match in their positions? The current result just looks weird.