diff --git a/packages/svelte-vscode/syntaxes/svelte.tmLanguage.src.yaml b/packages/svelte-vscode/syntaxes/svelte.tmLanguage.src.yaml index 5a7ebc4f3..30323f6d4 100644 --- a/packages/svelte-vscode/syntaxes/svelte.tmLanguage.src.yaml +++ b/packages/svelte-vscode/syntaxes/svelte.tmLanguage.src.yaml @@ -339,17 +339,26 @@ repository: # Matches attribute keyvalues. (and boolean attributes as well) # e.g. `class="my-class"` attributes-keyvalue: - begin: ([_$[:alpha:]][_\-$[:alnum:]]*) - beginCaptures: { 1: { name: entity.other.attribute-name.svelte } } + begin: ((?:--)?[_$[:alpha:]][_\-$[:alnum:]]*) + beginCaptures: + 0: + patterns: + # Matches if the key is a `--css-variable` attribute. + - match: --.* + name: support.type.property-name.svelte + # Matches everything else. + - match: .* + name: entity.other.attribute-name.svelte end: (?=\s*+[^=\s]) name: 'meta.attribute.$1.svelte' - patterns: [ include: '#attributes-value' ] + patterns: + - begin: '=' + beginCaptures: { 0: { name: punctuation.separator.key-value.svelte } } + end: (?<=[^\s=])(?!\s*=)|(?=/?>) + patterns: [include: '#attributes-value'] - # The value part of attribute keyvalues. e.g. `="my-class"` in `class="my-class"` + # The value part of attribute keyvalues. e.g. `"my-class"` in `class="my-class"` attributes-value: - begin: '=' - beginCaptures: { 0: { name: punctuation.separator.key-value.svelte } } - end: (?<=[^\s=])(?!\s*=)|(?=/?>) patterns: # No quotes - just an interpolation expression. - include: '#interpolation' @@ -365,7 +374,7 @@ repository: - begin: (['"]) end: \1 beginCaptures: { 0: { name: punctuation.definition.string.begin.svelte } } - endCaptures: { 0: { name: punctuation.definition.string.end.svelte } } + endCaptures: { 0: { name: punctuation.definition.string.end.svelte } } name: string.quoted.svelte patterns: [ include: '#interpolation' ] @@ -419,7 +428,10 @@ repository: end: (?=\s*+[^=\s]) name: meta.directive.$1.svelte patterns: - - include: '#attributes-value' + - begin: '=' + beginCaptures: { 0: { name: punctuation.separator.key-value.svelte } } + end: (?<=[^\s=])(?!\s*=)|(?=/?>) + patterns: [include: '#attributes-value'] # ------ # TAGS