Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions packages/svelte-vscode/syntaxes/svelte.tmLanguage.src.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -390,7 +390,7 @@ repository:
- { match: on|use|bind, name: keyword.control.svelte }
- { match: transition|in|out|animate, name: keyword.other.animation.svelte }
- { match: let, name: storage.type.svelte }
- { match: class, name: entity.other.attribute-name.svelte }
- { match: class|style, name: entity.other.attribute-name.svelte }

# For Svelte element directives. Scopes the 'click' part in `on:click`.
# The scope of the variable should represent what data type it generally is.
Expand All @@ -400,7 +400,7 @@ repository:
- { match: '(?<=(on):).*$', name: entity.name.type.svelte }
- { match: '(?<=(bind):).*$', name: variable.parameter.svelte }
- { match: '(?<=(use|transition|in|out|animate):).*$', name: variable.function.svelte }
- { match: '(?<=(let|class):).*$', name: variable.parameter.svelte }
- { match: '(?<=(let|class|style):).*$', name: variable.parameter.svelte }

# For directives that may be better suited using different scopes if assigned to something.
# e.g. `class:var={var}` is different to `class:var`.
Expand All @@ -411,15 +411,16 @@ repository:
# Makes 'bind:this' display like `this` would in JS.
- { match: '(?<=(bind):)this$', name: variable.language.svelte }
# If other keywords are patched in in the future, they can easily be added here.
- { match: '(?<=(bind):).*$', name: entity.name.type.svelte }
- { match: '(?<=(class):).*$', name: entity.other.attribute-name.class.svelte }
- { match: '(?<=(bind):).*$', name: entity.name.type.svelte }
- { match: '(?<=(class):).*$', name: entity.other.attribute-name.class.svelte }
- { match: '(?<=(style):).*$', name: support.type.property-name.svelte }
# Defaults to the non-assignment version for everything else.
- include: '#attributes-directives-types'

# Matches Svelte element directives, e.g. `on:click|preventDefault={var}`
attributes-directives:
# If something is added to attributes-directives-keywords, it must be added to the begin-regex, too.
begin: (?<!<)(on|use|bind|transition|in|out|animate|let|class)(:)(?:([_$[:alpha:]][_\-$[:alnum:]]*(?=\s*=))|([_$[:alpha:]][_\-$[:alnum:]]*))((\|\w+)*)
begin: (?<!<)(on|use|bind|transition|in|out|animate|let|class|style)(:)(?:((?:--)?[_$[:alpha:]][_\-$[:alnum:]]*(?=\s*=))|((?:--)?[_$[:alpha:]][_\-$[:alnum:]]*))((\|\w+)*)
beginCaptures:
1: { patterns: [ include: '#attributes-directives-keywords' ] }
2: { name: punctuation.definition.keyword.svelte }
Expand Down