diff --git a/lib/CSSStyleDeclaration.js b/lib/CSSStyleDeclaration.js index 0a180f6..d7a7566 100644 --- a/lib/CSSStyleDeclaration.js +++ b/lib/CSSStyleDeclaration.js @@ -53,7 +53,9 @@ CSSStyleDeclaration.prototype = { this.removeProperty(name); return; } - var isCustomProperty = name.indexOf('--') === 0; + var isCustomProperty = + name.indexOf('--') === 0 || + (typeof value === 'string' && /^var\(--[-\w]+,?.*\)$/.test(value)); if (isCustomProperty) { this._setProperty(name, value, priority); return; diff --git a/lib/parsers.js b/lib/parsers.js index e0aa6e5..3c3b695 100644 --- a/lib/parsers.js +++ b/lib/parsers.js @@ -18,8 +18,7 @@ exports.TYPES = { ANGLE: 8, KEYWORD: 9, NULL_OR_EMPTY_STR: 10, - CALC: 11, - VAR: 12, + CALC: 11 }; // rough regular expressions @@ -36,7 +35,6 @@ var colorRegEx4 = /^hsla?\(\s*(-?\d+|-?\d*.\d+)\s*,\s*(-?\d+|-?\d*.\d+)%\s*,\s*(-?\d+|-?\d*.\d+)%\s*(,\s*(-?\d+|-?\d*.\d+)\s*)?\)/; var calcRegEx = /^calc\((.*)\)$/; var angleRegEx = /^([-+]?[0-9]*\.?[0-9]+)(deg|grad|rad)$/; -var varRegEx = /^var\((.*)\)$/; // This will return one of the above types based on the passed in string exports.valueType = function valueType(val) { @@ -69,9 +67,6 @@ exports.valueType = function valueType(val) { if (calcRegEx.test(val)) { return exports.TYPES.CALC; } - if (varRegEx.test(val)) { - return exports.TYPES.VAR; - } if (stringRegEx.test(val)) { return exports.TYPES.STRING; } @@ -214,7 +209,7 @@ 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 || type === exports.TYPES.VAR) { + if (type === exports.TYPES.CALC) { return val; } @@ -293,9 +288,6 @@ exports.parseString = function parseString(val) { exports.parseColor = function parseColor(val) { var type = exports.valueType(val); - if (type === exports.TYPES.VAR) { - return val; - } if (type === exports.TYPES.NULL_OR_EMPTY_STR) { return val; } diff --git a/lib/parsers.test.js b/lib/parsers.test.js index 7800978..a792e1e 100644 --- a/lib/parsers.test.js +++ b/lib/parsers.test.js @@ -91,21 +91,21 @@ describe('valueType', () => { let input = 'var(--foo)'; let output = parsers.valueType(input); - expect(output).toEqual(parsers.TYPES.VAR); + expect(output).toEqual(parsers.TYPES.KEYWORD); }); it('returns var from var(--foo, var(--bar))', () => { let input = 'var(--foo, var(--bar))'; let output = parsers.valueType(input); - expect(output).toEqual(parsers.TYPES.VAR); + expect(output).toEqual(parsers.TYPES.KEYWORD); }); it('returns var from var(--foo, calc(var(--bar) * 2))', () => { let input = 'var(--foo, calc(var(--bar) * 2))'; let output = parsers.valueType(input); - expect(output).toEqual(parsers.TYPES.VAR); + expect(output).toEqual(parsers.TYPES.KEYWORD); }); }); describe('parseInteger', () => { @@ -143,12 +143,11 @@ describe('parseColor', () => { expect(output).toEqual('rgba(5, 5, 5, 0.5)'); }); - it('should pass through vars', () => { let input = 'var(--foo)'; let output = parsers.valueType(input); - expect(output).toEqual(parsers.TYPES.VAR); + expect(output).toEqual(parsers.TYPES.KEYWORD); }); it.each([