Add leeway for commas between parenthesis (usually for shorthand CSS statements)

Add check for extra commas. Needed to check for this otherwise extra commas would render CSS as valid.

Author: jwang1919

locales/en/translation.json

@@ -123,6 +123,7 @@
       "selector-missing": "Start every block of CSS with a selector, such as an element name or class name.\nTry: p {\n  color: red;\n}",
       "block-expected": "Start a block using { after your selector.\nTry: {{error}} {",
       "extra-tokens-after-value": "The {{token}} at the end of this line doesn’t belong there.",
+      "extra-commas": "Looks like you have extra commas on this line",
       "illegal-token-after-combinator": "After a + or > in a selector, you need to specify the name of another element, class, or ID",
       "invalid-token": "This line doesn't look like valid CSS.",
       "invalid-token-in-selector": "The {{token}} on this line doesn’t belong here.",

src/validations/css/prettycss.js

@@ -53,15 +53,16 @@ const errorMap = {
   },
 
   'extra-tokens-after-value': (error, source) => {
-    const lineNumber = error.token.line;
+    const errorToken = error.token;
+    const lineNumber = errorToken.line;
 
     if (lineNumber > 1) {
       const lines = source.split('\n');
       const previousLine = lines[lineNumber - 2];
       const thisLine = lines[lineNumber - 1];
 
       if (
-        error.token.charNum - 1 === /\S/.exec(thisLine).index &&
+        errorToken.charNum - 1 === /\S/.exec(thisLine).index &&
         !endsWith(trim(previousLine), ';')
       ) {
         return {
@@ -70,11 +71,25 @@ const errorMap = {
           column: previousLine.length - 1,
         };
       }
+      if (/,(?=\s*,)/.test(thisLine)) {
+        return {
+          reason: 'extra-commas',
+          row: lineNumber - 1,
+          column: errorToken.charNum,
+        };
+      }
+      if (
+        errorToken.content === ',' &&
+        errorToken.charNum - 1 !== /,/.exec(thisLine).index &&
+        endsWith(trim(thisLine), ';')
+      ) {
+        return null;
+      }
     }
 
     return ({
       reason: 'extra-tokens-after-value',
-      payload: {token: error.token.content},
+      payload: {token: errorToken.content},
     });
   },
 

test/unit/validations/css.js

@@ -26,6 +26,15 @@ test('valid filter', validationTest(
   css,
 ));
 
+test('valid text-shadow declaration', validationTest(
+  `p {
+    text-shadow: rgba(0,0,0,0.1) 0 -5px, rgba(0,0,0,0.1) 0 -1px, \
+     rgba(255,255,255,0.1) 1px 0, rgba(255,255,255,0.1) 0 1px, \
+     rgba(0,0,0,0.1) -1px -1px, rgba(255,255,255,0.1) 1px 1px; 
+  }`,
+  css,
+));
+
 test('bogus flex value', validationTest(
   '.flex-item { flex: bogus; }',
   css,
@@ -78,6 +87,16 @@ test('missing semicolon at end of block', validationTest(
   {reason: 'missing-semicolon', row: 1},
 ));
 
+test('extra commas in value', validationTest(
+  `p {
+    text-shadow: rgba(0,0,0,0.1) 0 -5px,, rgba(0,0,0,0.1) 0 -1px, \
+     rgba(255,255,255,0.1) 1px 0, rgba(255,255,255,0.1) 0 1px, \
+     rgba(0,0,0,0.1) -1px -1px, rgba(255,255,255,0.1) 1px 1px; 
+  }`,
+  css,
+  {reason: 'extra-commas', row: 1},
+));
+
 test('missing semicolon within block', validationTest(
   `
     p {