fix: invalid syntax highlighting for scenario outline variables

CHANGELOG.md

@@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
 ### Fixed
+- Leading spaces breaks syntax highlighting for scenario outline ([#219](https://github.com/cucumber/language-service/pull/219))
 - (Ruby) Support `And` and `But` step definition annotations ([#211](https://github.com/cucumber/language-service/pull/211))
 - (Python) Title variants of Behave's decorators (`Step`, `Given`, `When`, `Then`) ([#213](https://github.com/cucumber/language-service/pull/213))
 - (PHP) Scoped query to match annotations only (`@Given`) ([#214](https://github.com/cucumber/language-service/pull/214))

src/service/getGherkinSemanticTokens.ts

@@ -100,15 +100,12 @@ export function getGherkinSemanticTokens(
       if (inScenarioOutline) {
         const regexp = /(<[^>]+>)/g
         let match: RegExpExecArray | null = null
+        const line = step.location.line - 1
+        const startOfText = lines[line].indexOf(step.text)
         while ((match = regexp.exec(step.text)) !== null) {
-          const character = step.location.column - 1 + step.keyword.length + match.index
-          arr = makeToken(
-            step.location.line - 1,
-            character,
-            match[0],
-            SemanticTokenTypes.variable,
-            arr
-          )
+          const line = step.location.line - 1
+          const character = startOfText + match.index
+          arr = makeToken(line, character, match[0], SemanticTokenTypes.variable, arr)
         }
       } else {
         for (const expression of expressions) {

test/service/getGherkinSemanticTokens.test.ts

@@ -90,6 +90,35 @@ Feature: a
     ]
     assert.deepStrictEqual(actual, expected)
   })
+
+  it('ignores whitespace for scenario outlines', () => {
+    // Note that 'When' step uses two spaces, to align the text with 'Given'
+    const gherkinSource = `
+Feature: making drinks
+  Scenario Outline:
+    Given a <ingredient>
+    When  I make <drink>
+    Examples:
+      | ingredient | drink       |
+      | apple      | apple juice |
+`
+    const semanticTokens = getGherkinSemanticTokens(gherkinSource, [])
+    const actual = tokenize(gherkinSource, semanticTokens.data)
+    const expected: TokenWithType[] = [
+      ['Feature', SemanticTokenTypes.keyword],
+      ['Scenario Outline', SemanticTokenTypes.keyword],
+      ['Given ', SemanticTokenTypes.keyword],
+      ['<ingredient>', SemanticTokenTypes.variable],
+      ['When ', SemanticTokenTypes.keyword],
+      ['<drink>', SemanticTokenTypes.variable],
+      ['Examples', SemanticTokenTypes.keyword],
+      ['ingredient', SemanticTokenTypes.property],
+      ['drink', SemanticTokenTypes.property],
+      ['apple', SemanticTokenTypes.string],
+      ['apple juice', SemanticTokenTypes.string],
+    ]
+    assert.deepStrictEqual(actual, expected)
+  })
 })
 
 // See https://microsoft.github.io/language-server-protocol/specifications/specification-3-17/#textDocument_semanticTokens