From b9af5bcb818ba5cd2c144afcc8caee680c5c9a4c Mon Sep 17 00:00:00 2001 From: Otho Date: Fri, 16 Feb 2018 15:16:46 -0200 Subject: [PATCH 1/4] Only put trailing semicolon when merging style attributes This is a first draft that tries to maintain the same code behavior without worrying too much about the code quality --- packages/pug-runtime/index.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/pug-runtime/index.js b/packages/pug-runtime/index.js index 4d1bdbee0..fd4d9766d 100644 --- a/packages/pug-runtime/index.js +++ b/packages/pug-runtime/index.js @@ -30,7 +30,11 @@ function pug_merge(a, b) { a[key] = (Array.isArray(valA) ? valA : [valA]).concat(b[key] || []); } else if (key === 'style') { var valA = pug_style(a[key]); + if (valA !== '' && valA[valA.length - 1] !== ';') + valA += ';'; var valB = pug_style(b[key]); + if (valB !== '' && valB[valB.length - 1] !== ';') + valB += ';'; a[key] = valA + valB; } else { a[key] = b[key]; @@ -110,8 +114,6 @@ function pug_style(val) { return out; } else { val += ''; - if (val[val.length - 1] !== ';') - return val + ';'; return val; } }; From 13ac11dda61a72629b31921243ec0ed11a97ef5d Mon Sep 17 00:00:00 2001 From: Otho Date: Fri, 16 Feb 2018 15:19:54 -0200 Subject: [PATCH 2/4] Update tests so they reflect the new code behavior All style attributes that received a String won't generate a trailing semicolon --- packages/pug-runtime/test/index.test.js | 2 +- packages/pug/test/cases-es2015/attr.html | 2 +- packages/pug/test/cases/styles.html | 6 +++--- packages/pug/test/output-es2015/attr.html | 2 +- packages/pug/test/pug.test.js | 12 ++++++------ 5 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/pug-runtime/test/index.test.js b/packages/pug-runtime/test/index.test.js index 6618b63a7..c729b0c82 100644 --- a/packages/pug-runtime/test/index.test.js +++ b/packages/pug-runtime/test/index.test.js @@ -132,7 +132,7 @@ addTest('merge', function (merge) { addTest('style', function (style) { expect(style(null)).toBe(''); expect(style('')).toBe(''); - expect(style('foo: bar')).toBe('foo: bar;'); + expect(style('foo: bar')).toBe('foo: bar'); expect(style('foo: bar;')).toBe('foo: bar;'); expect(style({foo: 'bar'})).toBe('foo:bar;'); expect(style({foo: 'bar', baz: 'bash'})).toBe('foo:bar;baz:bash;'); diff --git a/packages/pug/test/cases-es2015/attr.html b/packages/pug/test/cases-es2015/attr.html index 5b9fbfbdd..fba8cc120 100644 --- a/packages/pug/test/cases-es2015/attr.html +++ b/packages/pug/test/cases-es2015/attr.html @@ -1 +1 @@ -
+
diff --git a/packages/pug/test/cases/styles.html b/packages/pug/test/cases/styles.html index 394953e32..251556ee4 100644 --- a/packages/pug/test/cases/styles.html +++ b/packages/pug/test/cases/styles.html @@ -7,11 +7,11 @@ +
+
-
-
-
+
diff --git a/packages/pug/test/output-es2015/attr.html b/packages/pug/test/output-es2015/attr.html index 25c479ac8..63a82c0d4 100644 --- a/packages/pug/test/output-es2015/attr.html +++ b/packages/pug/test/output-es2015/attr.html @@ -1,2 +1,2 @@ -
\ No newline at end of file +
\ No newline at end of file diff --git a/packages/pug/test/pug.test.js b/packages/pug/test/pug.test.js index 4fb073ae3..228dadbd9 100644 --- a/packages/pug/test/pug.test.js +++ b/packages/pug/test/pug.test.js @@ -371,8 +371,8 @@ describe('pug', function(){ assert.equal('', pug.render('a(href= "http://google.com", title= "Some : weird = title")')); assert.equal('', pug.render('label(for="name")')); assert.equal('', pug.render("meta(name= 'viewport', content='width=device-width')"), 'Test attrs that contain attr separators'); - assert.equal('
', pug.render("div(style='color= white')")); - assert.equal('
', pug.render("div(style='color: white')")); + assert.equal('
', pug.render("div(style='color= white')")); + assert.equal('
', pug.render("div(style='color: white')")); assert.equal('

', pug.render("p('class'='foo')"), 'Test keys with single quotes'); assert.equal('

', pug.render("p(\"class\"= 'foo')"), 'Test keys with double quotes'); @@ -389,10 +389,10 @@ describe('pug', function(){ assert.equal('', pug.render('meta(http-equiv="X-UA-Compatible", content="IE=edge,chrome=1")')); - assert.equal('
Foo
', pug.render("div(style= 'background: url(/images/test.png)') Foo")); - assert.equal('
Foo
', pug.render("div(style= 'background = url(/images/test.png)') Foo")); - assert.equal('
Foo
', pug.render("div(style= ['foo', 'bar'][0]) Foo")); - assert.equal('
Foo
', pug.render("div(style= { foo: 'bar', baz: 'raz' }['foo']) Foo")); + assert.equal('
Foo
', pug.render("div(style= 'background: url(/images/test.png)') Foo")); + assert.equal('
Foo
', pug.render("div(style= 'background = url(/images/test.png)') Foo")); + assert.equal('
Foo
', pug.render("div(style= ['foo', 'bar'][0]) Foo")); + assert.equal('
Foo
', pug.render("div(style= { foo: 'bar', baz: 'raz' }['foo']) Foo")); assert.equal('Foo', pug.render("a(href='abcdefg'.substr(3,3)) Foo")); assert.equal('Foo', pug.render("a(href={test: 'abcdefg'}.test.substr(3,3)) Foo")); assert.equal('Foo', pug.render("a(href={test: 'abcdefg'}.test.substr(3,[0,3][1])) Foo")); From 5e010157d071697c30c66ded03b67ac7995c9925 Mon Sep 17 00:00:00 2001 From: Otho Date: Fri, 16 Feb 2018 15:34:19 -0200 Subject: [PATCH 3/4] Improve merge trailing semicolon code Check if String is not empty by checking if it its true ('' is false) Get last character of the string using slice(-1) Add semicolon if the last string character is not a semicolon --- packages/pug-runtime/index.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/packages/pug-runtime/index.js b/packages/pug-runtime/index.js index fd4d9766d..78db370df 100644 --- a/packages/pug-runtime/index.js +++ b/packages/pug-runtime/index.js @@ -30,11 +30,9 @@ function pug_merge(a, b) { a[key] = (Array.isArray(valA) ? valA : [valA]).concat(b[key] || []); } else if (key === 'style') { var valA = pug_style(a[key]); - if (valA !== '' && valA[valA.length - 1] !== ';') - valA += ';'; + valA = valA && valA.slice(-1) !== ';' ? valA + ';' : valA; var valB = pug_style(b[key]); - if (valB !== '' && valB[valB.length - 1] !== ';') - valB += ';'; + valB = valB && valB.slice(-1) !== ';' ? valB + ';' : valB; a[key] = valA + valB; } else { a[key] = b[key]; @@ -113,8 +111,7 @@ function pug_style(val) { } return out; } else { - val += ''; - return val; + return val + ''; } }; From a8354ff3800ebb3dd7bb1e0be549cc370355739e Mon Sep 17 00:00:00 2001 From: Forbes Lindesay Date: Mon, 19 Feb 2018 10:25:18 +0000 Subject: [PATCH 4/4] Use array style indexing instead of `.slice` to get last character --- packages/pug-runtime/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/pug-runtime/index.js b/packages/pug-runtime/index.js index 78db370df..d506ddb28 100644 --- a/packages/pug-runtime/index.js +++ b/packages/pug-runtime/index.js @@ -30,9 +30,9 @@ function pug_merge(a, b) { a[key] = (Array.isArray(valA) ? valA : [valA]).concat(b[key] || []); } else if (key === 'style') { var valA = pug_style(a[key]); - valA = valA && valA.slice(-1) !== ';' ? valA + ';' : valA; + valA = valA && valA[valA.length - 1] !== ';' ? valA + ';' : valA; var valB = pug_style(b[key]); - valB = valB && valB.slice(-1) !== ';' ? valB + ';' : valB; + valB = valB && valB[valB.length - 1] !== ';' ? valB + ';' : valB; a[key] = valA + valB; } else { a[key] = b[key];