Update splitValue()

src/js/css-gradient.ts

@@ -226,7 +226,9 @@ export const parseGradient = (
     const type = getGradientType(value);
     const gradValue = value.replace(REG_GRAD, '').replace(/\)$/, '');
     if (type && gradValue) {
-      const [lineOrColorStop = '', ...colorStops] = splitValue(gradValue, ',');
+      const [lineOrColorStop = '', ...colorStops] = splitValue(gradValue, {
+        delimiter: ','
+      });
       const dimension = /^(?:repeating-)?conic-gradient$/.test(type)
         ? DIM_ANGLE_PCT
         : DIM_LEN_PCT;

src/js/typedef.ts

@@ -24,6 +24,7 @@ export interface Options {
   dimension?: Record<string, number | ((K: string) => number)>;
   format?: string;
   nullable?: boolean;
+  preserveComment?: boolean;
 }
 
 /**

src/js/util.ts

@@ -38,23 +38,25 @@ const REG_MIX = new RegExp(SYN_MIX);
 /**
  * split value
  * @param value - CSS value
- * @param [delimiter] - comma or space
+ * @param [opt] - options
  * @returns array of values, NOTE: comments are stripped
  */
-export const splitValue = (value: string, delimiter: string = ''): string[] => {
+export const splitValue = (value: string, opt: Options = {}): string[] => {
   if (isString(value)) {
     value = value.trim();
   } else {
     throw new TypeError(`${value} is not a string.`);
   }
+  const { delimiter = ' ', preserveComment = false } = opt;
   const cacheKey: string = createCacheKey(
     {
       namespace: NAMESPACE,
       name: 'splitValue',
       value
     },
     {
-      delimiter
+      delimiter,
+      preserveComment
     }
   );
   const cachedResult = getCache(cacheKey);
@@ -83,6 +85,9 @@ export const splitValue = (value: string, delimiter: string = ''): string[] => {
         break;
       }
       case COMMENT: {
+        if (preserveComment && delimiter === ',') {
+          str += value;
+        }
         break;
       }
       case FUNC:

test/util.test.ts

@@ -38,7 +38,9 @@ describe('split value', () => {
   });
 
   it('should get value', () => {
-    const res = func('foo bar', ',');
+    const res = func('foo bar', {
+      delimiter: ','
+    });
     assert.deepEqual(res, ['foo bar'], 'result');
   });
 
@@ -48,7 +50,9 @@ describe('split value', () => {
   });
 
   it('should get value', () => {
-    const res = func('foo  bar', ',');
+    const res = func('foo  bar', {
+      delimiter: ','
+    });
     assert.deepEqual(res, ['foo bar'], 'result');
   });
 
@@ -58,19 +62,48 @@ describe('split value', () => {
   });
 
   it('should get value', () => {
-    const res = func('foo /* comment */ , bar', ',');
+    const res = func('foo /* comment */ , bar', {
+      delimiter: ','
+    });
+    assert.deepEqual(res, ['foo', 'bar'], 'result');
+  });
+
+  it('should get value', () => {
+    const res = func('foo /* comment */ bar', {
+      preserveComment: true
+    });
     assert.deepEqual(res, ['foo', 'bar'], 'result');
   });
 
   it('should get value', () => {
-    const res = func(',', ',');
+    const res = func('foo /* comment */ , bar', {
+      delimiter: ',',
+      preserveComment: true
+    });
+    assert.deepEqual(res, ['foo /* comment */', 'bar'], 'result');
+  });
+
+  it('should get value', () => {
+    const res = func('foo /* comment */ bar, baz', {
+      delimiter: ',',
+      preserveComment: true
+    });
+    assert.deepEqual(res, ['foo /* comment */ bar', 'baz'], 'result');
+  });
+
+  it('should get value', () => {
+    const res = func(',', {
+      delimiter: ','
+    });
     assert.deepEqual(res, ['', ''], 'result');
   });
 
   it('should get value', () => {
     const res = func(
       'linear-gradient(red, blue), radial-gradient(yellow, green)',
-      ','
+      {
+        delimiter: ','
+      }
     );
     assert.deepEqual(
       res,