From 1ac6d8c74c8a3bab241d5c11a12ec59b9ce190b5 Mon Sep 17 00:00:00 2001 From: ericminio Date: Sun, 4 Jul 2021 08:15:16 -0700 Subject: [PATCH 1/3] keep property definition using calc and var --- lib/parsers.js | 10 ++++++- lib/parsers.test.js | 63 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 72 insertions(+), 1 deletion(-) diff --git a/lib/parsers.js b/lib/parsers.js index 8ecdf5e3..16290971 100644 --- a/lib/parsers.js +++ b/lib/parsers.js @@ -19,6 +19,7 @@ exports.TYPES = { KEYWORD: 9, NULL_OR_EMPTY_STR: 10, CALC: 11, + VARIABLE: 12 }; // rough regular expressions @@ -31,7 +32,8 @@ var stringRegEx = /^("[^"]*"|'[^']*')$/; var colorRegEx1 = /^#([0-9a-fA-F]{3,4}){1,2}$/; var colorRegEx2 = /^rgb\(([^)]*)\)$/; var colorRegEx3 = /^rgba\(([^)]*)\)$/; -var calcRegEx = /^calc\(([^)]*)\)$/; +var calcRegEx = /^calc\((.*)\)$/; +var variableRegEx = /^var\(--([^)]*)\)$/; var colorRegEx4 = /^hsla?\(\s*(-?\d+|-?\d*.\d+)\s*,\s*(-?\d+|-?\d*.\d+)%\s*,\s*(-?\d+|-?\d*.\d+)%\s*(,\s*(-?\d+|-?\d*.\d+)\s*)?\)/; var angleRegEx = /^([-+]?[0-9]*\.?[0-9]+)(deg|grad|rad)$/; @@ -66,6 +68,9 @@ exports.valueType = function valueType(val) { if (calcRegEx.test(val)) { return exports.TYPES.CALC; } + if (variableRegEx.test(val)) { + return exports.TYPES.VARIABLE; + } if (stringRegEx.test(val)) { return exports.TYPES.STRING; } @@ -211,6 +216,9 @@ exports.parseMeasurement = function parseMeasurement(val) { if (type === exports.TYPES.CALC) { return val; } + if (type === exports.TYPES.VARIABLE) { + return val; + } var length = exports.parseLength(val); if (length !== undefined) { diff --git a/lib/parsers.test.js b/lib/parsers.test.js index 926f7e74..b833702d 100644 --- a/lib/parsers.test.js +++ b/lib/parsers.test.js @@ -72,6 +72,20 @@ describe('valueType', () => { expect(output).toEqual(parsers.TYPES.CALC); }); + + it('returns calc from calc(100px * (6 - 4))', () => { + let input = 'calc(100px * (6 - 4))'; + let output = parsers.valueType(input); + + expect(output).toEqual(parsers.TYPES.CALC); + }); + + it('returns variable from var(--value)', () => { + let input = 'var(--value)'; + let output = parsers.valueType(input); + + expect(output).toEqual(parsers.TYPES.VARIABLE); + }); }); describe('parseInteger', () => { it.todo('test'); @@ -86,6 +100,55 @@ describe('parsePercent', () => { it.todo('test'); }); describe('parseMeasurement', () => { + it('accepts px', () => { + let input = '15px'; + let output = parsers.parseMeasurement(input); + + expect(output).toEqual('15px'); + }); + it('accepts percent', () => { + let input = '15%'; + let output = parsers.parseMeasurement(input); + + expect(output).toEqual('15%'); + }); + it('defaults to undefined', () => { + let input = '15'; + let output = parsers.parseMeasurement(input); + + expect(output).toEqual(undefined); + }); + it('accepts zero without unit', () => { + let input = '0'; + let output = parsers.parseMeasurement(input); + + expect(output).toEqual('0px'); + }); + it('rejects other unit', () => { + let input = '15deg'; + let output = parsers.parseMeasurement(input); + + expect(output).toEqual(undefined); + }); + it('keeps value definition starting with calc', () => { + let input = 'calc(100% / 4)'; + let output = parsers.parseMeasurement(input); + + expect(output).toEqual('calc(100% / 4)'); + }); + it('keeps value definition starting with var', () => { + let input = 'var(--value)'; + let output = parsers.parseMeasurement(input); + + expect(output).toEqual('var(--value)'); + }); + it('keeps value definition combining calc and var', () => { + let input = 'calc((20 - 18) * 2 * var(--value))'; + let output = parsers.parseMeasurement(input); + + expect(output).toEqual('calc((20 - 18) * 2 * var(--value))'); + }); + it.todo('test'); }); describe('parseUrl', () => { From 33ac86c6f136d231268b5477bee3e364d1f04219 Mon Sep 17 00:00:00 2001 From: ericminio Date: Sun, 4 Jul 2021 08:29:41 -0700 Subject: [PATCH 2/3] document var support in CSSStyleDeclaration tests --- lib/CSSStyleDeclaration.test.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/lib/CSSStyleDeclaration.test.js b/lib/CSSStyleDeclaration.test.js index 9fa8ed3b..c02a2204 100644 --- a/lib/CSSStyleDeclaration.test.js +++ b/lib/CSSStyleDeclaration.test.js @@ -553,4 +553,10 @@ describe('CSSStyleDeclaration', () => { style.setProperty('width', 'calc(100% - 100px)'); expect(style.getPropertyValue('width')).toEqual('calc(100% - 100px)'); }); + + test('supports var', () => { + const style = new CSSStyleDeclaration(); + style.setProperty('width', 'var(--value)'); + expect(style.getPropertyValue('width')).toEqual('var(--value)'); + }); }); From 62aa2ce2a7b0a4bb287e5918582d703524e0aed9 Mon Sep 17 00:00:00 2001 From: ericminio Date: Sun, 4 Jul 2021 18:26:15 -0700 Subject: [PATCH 3/3] parseColor keeps definition when it start with var(-- --- lib/CSSStyleDeclaration.test.js | 6 ++++++ lib/parsers.js | 9 ++++----- lib/parsers.test.js | 6 ++++++ 3 files changed, 16 insertions(+), 5 deletions(-) diff --git a/lib/CSSStyleDeclaration.test.js b/lib/CSSStyleDeclaration.test.js index c02a2204..6e347112 100644 --- a/lib/CSSStyleDeclaration.test.js +++ b/lib/CSSStyleDeclaration.test.js @@ -559,4 +559,10 @@ describe('CSSStyleDeclaration', () => { style.setProperty('width', 'var(--value)'); expect(style.getPropertyValue('width')).toEqual('var(--value)'); }); + + test('supports color var', () => { + const style = new CSSStyleDeclaration(); + style.setProperty('color', 'var(--foo)'); + expect(style.getPropertyValue('color')).toEqual('var(--foo)'); + }); }); diff --git a/lib/parsers.js b/lib/parsers.js index 16290971..e3cc854a 100644 --- a/lib/parsers.js +++ b/lib/parsers.js @@ -213,10 +213,8 @@ exports.parsePercent = function parsePercent(val) { // either a length or a percent exports.parseMeasurement = function parseMeasurement(val) { var type = exports.valueType(val); - if (type === exports.TYPES.CALC) { - return val; - } - if (type === exports.TYPES.VARIABLE) { + if (type === exports.TYPES.CALC || + type === exports.TYPES.VARIABLE) { return val; } @@ -295,7 +293,8 @@ exports.parseString = function parseString(val) { exports.parseColor = function parseColor(val) { var type = exports.valueType(val); - if (type === exports.TYPES.NULL_OR_EMPTY_STR) { + if (type === exports.TYPES.NULL_OR_EMPTY_STR + || type === exports.TYPES.VARIABLE) { return val; } var red, diff --git a/lib/parsers.test.js b/lib/parsers.test.js index b833702d..95daaee5 100644 --- a/lib/parsers.test.js +++ b/lib/parsers.test.js @@ -170,6 +170,12 @@ describe('parseColor', () => { expect(output).toEqual('rgba(5, 5, 5, 0.5)'); }); + it('should keep value definition when it starts with var', () => { + let input = 'var(--value)'; + let output = parsers.parseColor(input); + + expect(output).toEqual('var(--value)'); + }); it.todo('Add more tests'); });