From 57c4610d07f5317c03bc6ea7a0a9bf6ef724e786 Mon Sep 17 00:00:00 2001 From: Andrew Delpha Date: Thu, 19 Jan 2017 14:04:04 -0600 Subject: [PATCH 1/3] Added fix for handling of spaces within parenthesis in values. Also added handling of nested parenthesis in a value so that it doesn't leave the value parenthesis state until all open parenthesis are matched with a close. Added a test for the case I ran across this problem where I had a linear-gradient with an RGBA value for the second transition point, but transparent for the first. The space was dropped after the transparent, but not the rgba value because the closing paren of the RGBA value transitioned back into the value state from value-parenthesis. --- lib/parse.js | 25 +++++++++++++++++-------- spec/parse.spec.js | 22 ++++++++++++++++++++++ 2 files changed, 39 insertions(+), 8 deletions(-) diff --git a/lib/parse.js b/lib/parse.js index 3f6c8a2..ba0fbc7 100644 --- a/lib/parse.js +++ b/lib/parse.js @@ -24,10 +24,12 @@ CSSOM.parse = function parse(token) { var index; var buffer = ""; + var valueParenthesisDepth=0; var SIGNIFICANT_WHITESPACE = { "selector": true, "value": true, + "value-parenthesis": true, "atRule": true, "importRule-begin": true, "importRule": true, @@ -253,16 +255,22 @@ CSSOM.parse = function parse(token) { if (state === 'value') { // ie css expression mode if (buffer.trim() === 'expression') { - var info = (new CSSOM.CSSValueExpression(token, i)).parse(); + var info = (new CSSOM.CSSValueExpression(token, i)).parse(); - if (info.error) { - parseError(info.error); - } else { - buffer += info.expression; - i = info.idx; - } + if (info.error) { + parseError(info.error); + } else { + buffer += info.expression; + i = info.idx; + } + } else if (state === 'value-parenthesis') { + valueParenthesisDepth++; + buffer += character; } else { state = 'value-parenthesis'; + //always ensure this is reset to 1 on transition + //from value to value-parenthesis + valueParenthesisDepth=1; buffer += character; } } else { @@ -272,7 +280,8 @@ CSSOM.parse = function parse(token) { case ")": if (state === 'value-parenthesis') { - state = 'value'; + valueParenthesisDepth--; + if(valueParenthesisDepth === 0) state = 'value'; } buffer += character; break; diff --git a/spec/parse.spec.js b/spec/parse.spec.js index 68fb9f8..506c251 100644 --- a/spec/parse.spec.js +++ b/spec/parse.spec.js @@ -445,6 +445,28 @@ var TESTS = [ return result; })() }, + { + input: ".gradient{background-image: linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);}", + result: (function() { + var result = { + cssRules: [ + { + selectorText: '.gradient', + parentRule: null, + style: { + 0: 'background-image', + "background-image": 'linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%)', + length: 1 + } + } + ], + parentStyleSheet: null + }; + result.cssRules[0].parentStyleSheet = result; + result.cssRules[0].style.parentRule = result.cssRules[0]; + return result; + })() + }, { input: "@media handheld, only screen and (max-device-width: 480px) {body{max-width:480px}}", result: (function() { From 4919efff4c64d3e3008856feed4efaf67abfca3b Mon Sep 17 00:00:00 2001 From: Andrew Delpha Date: Thu, 19 Jan 2017 14:12:24 -0600 Subject: [PATCH 2/3] added spec that tests for issue #86 - spaces being removed from calc. --- spec/parse.spec.js | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/spec/parse.spec.js b/spec/parse.spec.js index 506c251..653bb22 100644 --- a/spec/parse.spec.js +++ b/spec/parse.spec.js @@ -445,6 +445,28 @@ var TESTS = [ return result; })() }, + { + input: ".calc{width: calc(100% - 15px);}", + result: (function() { + var result = { + cssRules: [ + { + selectorText: '.calc', + parentRule: null, + style: { + 0: 'width', + width: 'calc(100% - 15px)', + length: 1 + } + } + ], + parentStyleSheet: null + }; + result.cssRules[0].parentStyleSheet = result; + result.cssRules[0].style.parentRule = result.cssRules[0]; + return result; + })() + }, { input: ".gradient{background-image: linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);}", result: (function() { From a3b4d7badb3a920160d81b9f40658b547f8e2656 Mon Sep 17 00:00:00 2001 From: Andrew Delpha Date: Thu, 19 Jan 2017 22:50:55 -0600 Subject: [PATCH 3/3] Fixed code style issues as requested. Also fixed a problem in the PR - the else if check that increased the valueParenthsisDepth was part of the wrong if block. --- lib/parse.js | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/lib/parse.js b/lib/parse.js index ba0fbc7..7a4bec9 100644 --- a/lib/parse.js +++ b/lib/parse.js @@ -24,7 +24,7 @@ CSSOM.parse = function parse(token) { var index; var buffer = ""; - var valueParenthesisDepth=0; + var valueParenthesisDepth = 0; var SIGNIFICANT_WHITESPACE = { "selector": true, @@ -255,24 +255,24 @@ CSSOM.parse = function parse(token) { if (state === 'value') { // ie css expression mode if (buffer.trim() === 'expression') { - var info = (new CSSOM.CSSValueExpression(token, i)).parse(); + var info = (new CSSOM.CSSValueExpression(token, i)).parse(); - if (info.error) { - parseError(info.error); - } else { - buffer += info.expression; - i = info.idx; - } - } else if (state === 'value-parenthesis') { - valueParenthesisDepth++; - buffer += character; + if (info.error) { + parseError(info.error); + } else { + buffer += info.expression; + i = info.idx; + } } else { state = 'value-parenthesis'; - //always ensure this is reset to 1 on transition + //always ensure this is reset to 1 on transition //from value to value-parenthesis - valueParenthesisDepth=1; + valueParenthesisDepth = 1; buffer += character; } + } else if (state === 'value-parenthesis') { + valueParenthesisDepth++; + buffer += character; } else { buffer += character; } @@ -281,7 +281,7 @@ CSSOM.parse = function parse(token) { case ")": if (state === 'value-parenthesis') { valueParenthesisDepth--; - if(valueParenthesisDepth === 0) state = 'value'; + if (valueParenthesisDepth === 0) state = 'value'; } buffer += character; break;