Loosen the valueParser to avoid throing many errors (#36)

Author: bartveneman

src/analyzer/values/colors.js

@@ -32,11 +32,13 @@ function nodeIsKeyword(node) {
 function extractColorsFromDeclaration(declaration) {
   const colors = []
 
-  valueParser(declaration.value).parse().walk(node => {
-    if (nodeIsHexColor(node) || nodeIsColorFn(node) || nodeIsKeyword(node)) {
-      return colors.push(node)
-    }
-  })
+  valueParser(declaration.value, {loose: true})
+    .parse()
+    .walk(node => {
+      if (nodeIsHexColor(node) || nodeIsColorFn(node) || nodeIsKeyword(node)) {
+        return colors.push(node)
+      }
+    })
 
   if (colors.length > 0) {
     declaration.colors = colors.map(color => color.toString().trim())

test/analyzer/values/input.css

@@ -14,6 +14,15 @@
   /* comment */
 }
 
+/* Custom properties and calc() and complex values */
+:root {
+  --my-custom-property: 12px;
+  height: var(--my-custom-property);
+  width: calc(100px + 2%);
+  grid-column: 1/-1; /* Used to cause an Error */
+}
+
+/* Colors */
 .color4 { color: #aff034; }
 .color5 { color: rgb(100, 200, 10); }
 .color6 { color: rgba(100, 200, 10, 0.5); }

test/analyzer/values/output.json

@@ -1,5 +1,5 @@
 {
-  "total": 69,
+  "total": 73,
   "fontfamilies": {
     "total": 18,
     "totalUnique": 12,
@@ -121,7 +121,7 @@
         "count": 1
       }
     ],
-    "share": 0.057971014492753624
+    "share": 0.0547945205479452
   },
   "colors": {
     "total": 22,

test/parser/declarations.js

@@ -2,7 +2,13 @@ const test = require('ava')
 const parser = require('../../src/parser')
 
 test('basic declarations are parsed', async t => {
-  const fixture = 'html, body {color:red; font-size : 12px; a: whatever;}'
+  const fixture = `
+    html, body {
+      color:red;
+      font-size : 12px;
+      a: whatever;
+    }
+  `
   const actual = await parser(fixture)
   const expected = [{
     property: 'color',
@@ -22,7 +28,12 @@ test('basic declarations are parsed', async t => {
 })
 
 test('!important is parsed', async t => {
-  const fixture = 'html { color: red !important; content: \'!important\'; color: blue; }'
+  const fixture = `html {
+      color: red !important;
+      content: '!important';
+      color: blue;
+    }
+  `
   const actual = await parser(fixture)
   const expected = [{
     property: 'color',
@@ -40,3 +51,45 @@ test('!important is parsed', async t => {
 
   t.deepEqual(actual.declarations, expected)
 })
+
+test('custom properties are parsed', async t => {
+  const fixture = `
+    :root {
+      --my-custom-property: 12px;
+      width: var(--my-custom-property);
+    }
+  `
+  const actual = await parser(fixture)
+  const expected = [{
+    property: '--my-custom-property',
+    value: '12px',
+    important: false
+  }, {
+    property: 'width',
+    value: 'var(--my-custom-property)',
+    important: false
+  }]
+
+  t.deepEqual(actual.declarations, expected)
+})
+
+test('calc() is parsed', async t => {
+  const fixture = `
+    .el {
+      width: calc(100px + 3%);
+      font-size: calc(3em + 20vmin);
+    }
+  `
+  const actual = await parser(fixture)
+  const expected = [{
+    property: 'width',
+    value: 'calc(100px + 3%)',
+    important: false
+  }, {
+    property: 'font-size',
+    value: 'calc(3em + 20vmin)',
+    important: false
+  }]
+
+  t.deepEqual(actual.declarations, expected)
+})