Handle adjacent variables case (fix microsoft#62)

By using `contents.slice(listIndex, span.start)` as `pre`, we couldn't
tell the different between ` ${'color: red'};` and the second variable of
`margin: ${'1px'} ${'1px'};`. Both of their `pre` are ` `, hence making
both of them got replaced by `$a:0   `, which cause an error in the
second code (`margin: xxxxxxxx $a:0     ;`).

To tell their different, I decided to use a whole line as a context. Use
the start of the line to the placeholder as `pre`. This way the second
code's `pre` would be `margin: ${'1px'} `, which is now different from
the `pre` of ` ${'color: red'};`.

Author: lukyth

e2e/tests/errors.js

@@ -294,5 +294,16 @@ describe('Errors', () => {
             assert.strictEqual(errorResponse.body.length, 0);
         });
     });
+
+    it('should not return an error on adjacent variables (#62)', () => {
+        return getSemanticDiagnosticsForFile(
+            `let css: any = {}; const margin1 = "3px"; const margin2 = "3px"; const q = css.a\`
+                margin: $\{margin1} $\{margin2};
+            \``
+        ).then(errorResponse => {
+            assert.isTrue(errorResponse.success);
+            assert.strictEqual(errorResponse.body.length, 0);
+        });
+    });
 });
 

src/_substituter.ts

@@ -7,12 +7,20 @@ export function getSubstitutions(
 ): string {
     const parts: string[] = [];
     let lastIndex = 0;
+    const lineStarts = contents
+        .split('\n')
+        .map(line => line.length)
+        .reduce((previousValue, currentValue, currentIndex) => [...previousValue, currentValue + previousValue[currentIndex] + 1], [0]);
+    let lineStartIndex = 0;
     for (const span of spans) {
-        const pre = contents.slice(lastIndex, span.start);
+        while (lineStarts[lineStartIndex] <= span.start) {
+            lineStartIndex++;
+        }
+        const pre = contents.slice(lineStarts[lineStartIndex - 1], span.start);
         const post = contents.slice(span.end);
         const placeholder = contents.slice(span.start, span.end);
 
-        parts.push(pre);
+        parts.push(contents.slice(lastIndex, span.start));
         parts.push(getSubstitution({ pre, placeholder, post }));
         lastIndex = span.end;
     }

src/test/substituter.test.ts

@@ -132,6 +132,19 @@ describe('substituter', () => {
             'color: #000 ;'
         );
     });
+
+    it('should replace adjacent variables with x (#62)', () => {
+        assert.deepEqual(
+            performSubstitutions([
+                `margin: \${'1px'}\${'1px'};`,
+                `padding: \${'1px'} \${'1px'};`,
+            ].join('\n')),
+            [
+                `margin: xxxxxxxxxxxxxxxx;`,
+                `padding: xxxxxxxx xxxxxxxx;`,
+            ].join('\n')
+        );
+    });
 });
 
 function performSubstitutions(value: string) {