Update regex for var()

Fix #199

Author: asamuzaK

lib/parsers.js

@@ -30,7 +30,8 @@ var angleRegEx = new RegExp(`^${NUMBER}(?:deg|g?rad|turn)$`);
 var urlRegEx = /^url\(\s*((?:[^)]|\\\))*)\s*\)$/;
 var keywordRegEx = /^[a-z]+(?:\-[a-z]+)*$/i;
 var stringRegEx = /^("[^"]*"|'[^']*')$/;
-var varRegEx = /^var\(|(?<=[*/\s(])var\(/;
+var varRegEx = /^var\(/;
+var varContainedRegEx = /(?<=[*/\s(])var\(/;
 var calcRegEx =
   /^(?:a?(?:cos|sin|tan)|abs|atan2|calc|clamp|exp|hypot|log|max|min|mod|pow|rem|round|sign|sqrt)\(/;
 
@@ -143,6 +144,9 @@ exports.parseNumber = function parseNumber(val) {
         format: 'specifiedValue',
       });
     default:
+      if (varContainedRegEx.test(val)) {
+        return val;
+      }
       return undefined;
   }
 };
@@ -162,6 +166,9 @@ exports.parseLength = function parseLength(val) {
       return `${parseFloat(numVal)}${unit}`;
     }
     default:
+      if (varContainedRegEx.test(val)) {
+        return val;
+      }
       if (type === exports.TYPES.NUMBER && parseFloat(val) === 0) {
         return '0px';
       }
@@ -183,6 +190,9 @@ exports.parsePercent = function parsePercent(val) {
       const [, numVal, unit] = unitRegEx.exec(val);
       return `${parseFloat(numVal)}${unit}`;
     default:
+      if (varContainedRegEx.test(val)) {
+        return val;
+      }
       if (type === exports.TYPES.NUMBER && parseFloat(val) === 0) {
         return '0%';
       }
@@ -206,6 +216,9 @@ exports.parseMeasurement = function parseMeasurement(val) {
       const [, numVal, unit] = unitRegEx.exec(val);
       return `${parseFloat(numVal)}${unit}`;
     default:
+      if (varContainedRegEx.test(val)) {
+        return val;
+      }
       if (type === exports.TYPES.NUMBER && parseFloat(val) === 0) {
         return '0px';
       }
@@ -384,7 +397,10 @@ exports.parseImage = function parseImage(val) {
   if (type === exports.TYPES.UNDEFINED) {
     return undefined;
   }
-  var values = splitValue(val, ',');
+  var values = splitValue(val, {
+    delimiter: ',',
+    preserveComment: varContainedRegEx.test(val),
+  });
   var isImage = !!values.length;
   var i;
   for (i = 0; i < values.length; i++) {

package-lock.json

@@ -37,7 +37,7 @@
   ],
   "main": "./lib/CSSStyleDeclaration.js",
   "dependencies": {
-    "@asamuzakjp/css-color": "^3.1.5",
+    "@asamuzakjp/css-color": "^3.1.7",
     "rrweb-cssom": "^0.8.0"
   },
   "devDependencies": {

package.json

@@ -89,18 +89,18 @@ describe('valueType', () => {
     assert.strictEqual(output, parsers.TYPES.UNIDENT);
   });
 
-  it('returns var for url(var(--foo))', () => {
+  it('returns unidentified for url(var(--foo))', () => {
     let input = 'url(var(--foo))';
     let output = parsers.valueType(input);
 
-    assert.strictEqual(output, parsers.TYPES.VAR);
+    assert.strictEqual(output, parsers.TYPES.UNIDENT);
   });
 
-  it('returns var from calc(100px *  var(--foo))', () => {
+  it('returns calc from calc(100px *  var(--foo))', () => {
     let input = 'calc(100px *  var(--foo))';
     let output = parsers.valueType(input);
 
-    assert.strictEqual(output, parsers.TYPES.VAR);
+    assert.strictEqual(output, parsers.TYPES.CALC);
   });
 
   it('returns var from var(--foo)', () => {
@@ -800,6 +800,13 @@ describe('parseColor', () => {
 
     assert.strictEqual(output, 'transparent');
   });
+
+  it('should return value as is with var()', () => {
+    let input = 'rgb(var(--my-var, 0, 0, 0))';
+    let output = parsers.parseColor(input);
+
+    assert.strictEqual(output, 'rgb(var(--my-var, 0, 0, 0))');
+  });
 });
 
 describe('parseAngle', () => {
@@ -887,18 +894,23 @@ describe('parseImage', () => {
 
     assert.strictEqual(
       output,
-      'radial-gradient(transparent, /* comment */ var(--custom-color)), url(example.png)'
+      'radial-gradient(transparent, /* comment */ var(--custom-color)), url("example.png")'
     );
   });
 
-  it('should return value as is if var() is included and even if invalid image type is included', () => {
+  it('should return undefined if invalid image type is included', () => {
     let input = 'radial-gradient(transparent, var(--custom-color)), red';
     let output = parsers.parseImage(input);
 
-    assert.strictEqual(output, 'radial-gradient(transparent, var(--custom-color)), red');
+    assert.strictEqual(output, undefined);
   });
 
-  it.todo('test');
+  it('should return undefined if value is not image type', () => {
+    let input = 'rgb(var(--my-var, 0, 0, 0))';
+    let output = parsers.parseImage(input);
+
+    assert.strictEqual(output, undefined);
+  });
 });
 
 describe('dashedToCamelCase', () => {