From c4940ad8267b407df0e63d48b8155cbb02987915 Mon Sep 17 00:00:00 2001 From: Max Date: Tue, 25 Oct 2016 19:16:45 +0200 Subject: [PATCH 1/6] WIP --- src/utils/tagged-template-literal.js | 11 ++++------- test/interpolations.test.js | 1 + test/simple.test.js | 1 + test/utils.test.js | 2 +- 4 files changed, 7 insertions(+), 8 deletions(-) diff --git a/src/utils/tagged-template-literal.js b/src/utils/tagged-template-literal.js index 8562db4..83b13ce 100644 --- a/src/utils/tagged-template-literal.js +++ b/src/utils/tagged-template-literal.js @@ -11,13 +11,10 @@ const hasInterpolations = (node) => !node.quasi.quasis[0].tail /** * Merges the interpolations in a parsed tagged template literals with the strings */ -const interleave = (quasis) => ( - quasis.reduce((prev, quasi, i) => { - if (i === 0) { - return quasi.value.raw.replace(/(\n.*$)/, '\n') - } - return prev + quasi.value.raw.replace(/(\n.*$|^.+\n)/, '') - }, '') +const interleave = (quasis, expressions) => ( + expressions.reduce((prev, expression, index) => ( + prev.concat(`$\{${expression.name}}`, quasis[index + 1].value.raw) + ), [quasis[0].value.raw]).join('') ) /** diff --git a/test/interpolations.test.js b/test/interpolations.test.js index 1d58fe6..ea13b98 100644 --- a/test/interpolations.test.js +++ b/test/interpolations.test.js @@ -34,6 +34,7 @@ describe('interpolations', () => { it('should have one result', () => { expect(data.results.length).toEqual(1) + console.log(data.results[0].warnings) }) it('should use the right file', () => { diff --git a/test/simple.test.js b/test/simple.test.js index 00ceb55..5e145e6 100644 --- a/test/simple.test.js +++ b/test/simple.test.js @@ -24,6 +24,7 @@ describe('simple', () => { data = result done() }).catch((err) => { + console.log(err) data = err done() }) diff --git a/test/utils.test.js b/test/utils.test.js index 465faf2..345ca7c 100644 --- a/test/utils.test.js +++ b/test/utils.test.js @@ -15,7 +15,7 @@ describe('utils', () => { it('should remove an interpolation', () => { const quasis = [{ value: { - raw: '\n display: block;\ncolor: ', + raw: '\n display: block;\n color: ', }, }, { value: { From 6e28e5d255f71f500bff63f72c7af04b33617372 Mon Sep 17 00:00:00 2001 From: Max Date: Wed, 26 Oct 2016 08:05:21 +0200 Subject: [PATCH 2/6] Make first version work --- src/utils/tagged-template-literal.js | 2 +- test/hard.test.js | 1 + test/interpolations.test.js | 16 ++++++++++------ test/simple.test.js | 1 + test/utils.test.js | 2 +- 5 files changed, 14 insertions(+), 8 deletions(-) diff --git a/src/utils/tagged-template-literal.js b/src/utils/tagged-template-literal.js index 83b13ce..7e076bf 100644 --- a/src/utils/tagged-template-literal.js +++ b/src/utils/tagged-template-literal.js @@ -13,7 +13,7 @@ const hasInterpolations = (node) => !node.quasi.quasis[0].tail */ const interleave = (quasis, expressions) => ( expressions.reduce((prev, expression, index) => ( - prev.concat(`$\{${expression.name}}`, quasis[index + 1].value.raw) + prev.concat(`$${expression.name}`, quasis[index + 1].value.raw) ), [quasis[0].value.raw]).join('') ) diff --git a/test/hard.test.js b/test/hard.test.js index 50eb0c9..81339e4 100644 --- a/test/hard.test.js +++ b/test/hard.test.js @@ -16,6 +16,7 @@ describe('hard', () => { beforeEach((done) => { stylelint.lint({ files: [fixture], + syntax: 'scss', config: { processors: [processor], rules, diff --git a/test/interpolations.test.js b/test/interpolations.test.js index ea13b98..a6ab55a 100644 --- a/test/interpolations.test.js +++ b/test/interpolations.test.js @@ -14,6 +14,7 @@ describe('interpolations', () => { beforeEach((done) => { stylelint.lint({ files: [fixture], + syntax: 'scss', config: { processors: [processor], rules, @@ -34,7 +35,6 @@ describe('interpolations', () => { it('should have one result', () => { expect(data.results.length).toEqual(1) - console.log(data.results[0].warnings) }) it('should use the right file', () => { @@ -50,7 +50,7 @@ describe('interpolations', () => { }) }) - describe('invalid interpolations (should be ignored)', () => { + describe('invalid interpolations', () => { beforeAll(() => { fixture = path.join(__dirname, './fixtures/interpolations/invalid.js') }) @@ -63,12 +63,16 @@ describe('interpolations', () => { expect(data.results[0].source).toEqual(fixture) }) - it('should not have errored', () => { - expect(data.errored).toEqual(false) + it('should have errored', () => { + expect(data.errored).toEqual(true) }) - it('should not have any warnings', () => { - expect(data.results[0].warnings.length).toEqual(0) + it('should have warnings', () => { + expect(data.results[0].warnings.length).toEqual(1) + }) + + it('should have an indentation as the first warning', () => { + expect(data.results[0].warnings[0].rule).toEqual('indentation') }) }) }) diff --git a/test/simple.test.js b/test/simple.test.js index 5e145e6..4469a29 100644 --- a/test/simple.test.js +++ b/test/simple.test.js @@ -16,6 +16,7 @@ describe('simple', () => { beforeEach((done) => { stylelint.lint({ files: [fixture], + syntax: 'scss', config: { processors: [processor], rules, diff --git a/test/utils.test.js b/test/utils.test.js index 345ca7c..7a90751 100644 --- a/test/utils.test.js +++ b/test/utils.test.js @@ -25,7 +25,7 @@ describe('utils', () => { const expressions = [{ name: 'color', }] - expect(interleave(quasis, expressions)).toEqual('\n display: block;\n background: blue;\n') + expect(interleave(quasis, expressions)).toEqual('\n display: block;\n color: $color;\n background: blue;\n') }) }) }) From 92c432c200795c4921fe93f2d97e8a796efc5dc8 Mon Sep 17 00:00:00 2001 From: Max Date: Wed, 26 Oct 2016 08:15:31 +0200 Subject: [PATCH 3/6] Add tests for source maps correctness for simple cases --- test/fixtures/hard/source-maps.js | 14 ++++++++++++++ test/hard.test.js | 16 +++++++++++++--- test/utils.test.js | 2 +- 3 files changed, 28 insertions(+), 4 deletions(-) diff --git a/test/fixtures/hard/source-maps.js b/test/fixtures/hard/source-maps.js index 22b7b94..7f42148 100644 --- a/test/fixtures/hard/source-maps.js +++ b/test/fixtures/hard/source-maps.js @@ -14,3 +14,17 @@ const Button2 = styled.button` const Button3 = styled.button` color: blue; ` + +// ⚠️ BAD INDENTATION at 22:5 ⚠️ +const Button4 = styled.button` + color: blue; + background: ${color}; + display: block; +` + +// ⚠️ BAD INDENTATION at 29:5 ⚠️ +const Button5 = styled.button` + color: blue; + background: ${color}; + display: block; +` diff --git a/test/hard.test.js b/test/hard.test.js index 81339e4..cf45c17 100644 --- a/test/hard.test.js +++ b/test/hard.test.js @@ -99,13 +99,15 @@ describe('hard', () => { expect(data.errored).toEqual(true) }) - it('should have two warning', () => { - expect(data.results[0].warnings.length).toEqual(2) + it('should have four warning', () => { + expect(data.results[0].warnings.length).toEqual(4) }) - it('should have two warnings about indentation', () => { + it('should have four warnings about indentation', () => { expect(data.results[0].warnings[0].rule).toEqual('indentation') expect(data.results[0].warnings[1].rule).toEqual('indentation') + expect(data.results[0].warnings[2].rule).toEqual('indentation') + expect(data.results[0].warnings[3].rule).toEqual('indentation') }) it('should have a warning in line 5', () => { @@ -115,5 +117,13 @@ describe('hard', () => { it('should have a warning in line 15', () => { expect(data.results[0].warnings[1].line).toEqual(15) }) + + it('should have a warning in line 22', () => { + expect(data.results[0].warnings[2].line).toEqual(22) + }) + + it('should have a warning in line 28', () => { + expect(data.results[0].warnings[3].line).toEqual(28) + }) }) }) diff --git a/test/utils.test.js b/test/utils.test.js index 7a90751..133461c 100644 --- a/test/utils.test.js +++ b/test/utils.test.js @@ -12,7 +12,7 @@ describe('utils', () => { expect(interleave(quasis, [])).toEqual(raw) }) - it('should remove an interpolation', () => { + it('should variabelize an interpolation', () => { const quasis = [{ value: { raw: '\n display: block;\n color: ', From 30c19a4459073e658d33fe9c0643bb16a41c22a0 Mon Sep 17 00:00:00 2001 From: Max Date: Wed, 26 Oct 2016 08:25:28 +0200 Subject: [PATCH 4/6] Add source maps test for complex interpolation --- test/fixtures/hard/source-maps.js | 11 ++++++++++- test/hard.test.js | 9 +++++++-- 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/test/fixtures/hard/source-maps.js b/test/fixtures/hard/source-maps.js index 7f42148..37bd8c2 100644 --- a/test/fixtures/hard/source-maps.js +++ b/test/fixtures/hard/source-maps.js @@ -22,9 +22,18 @@ const Button4 = styled.button` display: block; ` -// ⚠️ BAD INDENTATION at 29:5 ⚠️ +// ⚠️ BAD INDENTATION at 28:5 ⚠️ const Button5 = styled.button` color: blue; background: ${color}; display: block; ` + +// ⚠️ BAD INDENTATION at 35:5 ⚠️ +const Button6 = styled.button` + color: blue; + ${` + background: red; + `} + display: block; +` diff --git a/test/hard.test.js b/test/hard.test.js index cf45c17..625aac2 100644 --- a/test/hard.test.js +++ b/test/hard.test.js @@ -99,8 +99,8 @@ describe('hard', () => { expect(data.errored).toEqual(true) }) - it('should have four warning', () => { - expect(data.results[0].warnings.length).toEqual(4) + it('should have five warning', () => { + expect(data.results[0].warnings.length).toEqual(5) }) it('should have four warnings about indentation', () => { @@ -108,6 +108,7 @@ describe('hard', () => { expect(data.results[0].warnings[1].rule).toEqual('indentation') expect(data.results[0].warnings[2].rule).toEqual('indentation') expect(data.results[0].warnings[3].rule).toEqual('indentation') + expect(data.results[0].warnings[4].rule).toEqual('indentation') }) it('should have a warning in line 5', () => { @@ -125,5 +126,9 @@ describe('hard', () => { it('should have a warning in line 28', () => { expect(data.results[0].warnings[3].line).toEqual(28) }) + + it('should have a warning in line 35', () => { + expect(data.results[0].warnings[4].line).toEqual(35) + }) }) }) From 7476747e5b864aea525e577a47f762ed9e8b62b6 Mon Sep 17 00:00:00 2001 From: Max Date: Wed, 26 Oct 2016 08:39:29 +0200 Subject: [PATCH 5/6] Add even more tests --- test/fixtures/interpolations/valid.js | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/test/fixtures/interpolations/valid.js b/test/fixtures/interpolations/valid.js index 8c84b8e..f569e8d 100644 --- a/test/fixtures/interpolations/valid.js +++ b/test/fixtures/interpolations/valid.js @@ -49,3 +49,23 @@ const Button4 = styled.button` `} background: blue; ` + +// Conditional +const cond = true +const Button5 = styled.button` + display: block; + ${cond && ` + color: blue; + `} + background: blue; +` + +// Conditional +const cond2 = false +const Button6 = styled.button` + display: block; + ${cond2 && ` + color: ${cond2}; + `} + background: blue; +` From bb21f5a04f55076ac3435436d5a677f65b546126 Mon Sep 17 00:00:00 2001 From: Max Date: Wed, 26 Oct 2016 08:50:59 +0200 Subject: [PATCH 6/6] Fix linting --- test/hard.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/hard.test.js b/test/hard.test.js index 625aac2..9e4c734 100644 --- a/test/hard.test.js +++ b/test/hard.test.js @@ -126,7 +126,7 @@ describe('hard', () => { it('should have a warning in line 28', () => { expect(data.results[0].warnings[3].line).toEqual(28) }) - + it('should have a warning in line 35', () => { expect(data.results[0].warnings[4].line).toEqual(35) })