upgrade postcss-vaues-parser to v3 (#118)

Author: bartveneman

package-lock.json

@@ -26,7 +26,7 @@
     "src"
   ],
   "scripts": {
-    "test": "xo && nyc ava test/analyzer test/parser"
+    "test": "xo && nyc ava test"
   },
   "xo": {
     "space": true,
@@ -48,7 +48,6 @@
   "dependencies": {
     "color-sorter": "^3.0.0",
     "css-at-supports-browser-h4cks-analyzer": "^1.0.0",
-    "css-color-names": "^1.0.0",
     "css-media-query-browser-h4cks-analyzer": "^1.0.0",
     "css-property-browser-h4cks-analyzer": "^1.1.0",
     "css-selector-browser-h4cks-analyzer": "^1.1.0",
@@ -59,7 +58,7 @@
     "is-vendor-prefixed": "^1.0.0",
     "path": "^0.12.7",
     "postcss": "^7.0.14",
-    "postcss-values-parser": "^2.0.1",
+    "postcss-values-parser": "^3.0.2",
     "specificity": "^0.4.1",
     "string-natural-compare": "^2.0.3",
     "tinycolor2": "^1.4.1",

package.json

@@ -1,47 +1,17 @@
-const valueParser = require('postcss-values-parser')
-const cssColorNames = require('css-color-names')
+const {parse} = require('postcss-values-parser')
 const tinycolor = require('tinycolor2')
 const colorSorter = require('color-sorter')
 
 const uniquer = require('../../utils/uniquer')
 
-const CSS_COLOR_KEYWORDS = Object.keys(cssColorNames).map(color =>
-  color.toLowerCase()
-)
-const CSS_COLOR_FUNCTIONS = ['hsl', 'hsla', 'rgb', 'rgba']
-
-function prepareValue(value) {
-  return value
-    .toString()
-    .toLowerCase()
-    .trim()
-}
-
-function nodeIsHexColor(node) {
-  return node.isColor
-}
-
-function nodeIsColorFn(node) {
-  return (
-    node.type === 'func' &&
-    CSS_COLOR_FUNCTIONS.includes(prepareValue(node.value))
-  )
-}
-
-function nodeIsKeyword(node) {
-  return node.type === 'word' && CSS_COLOR_KEYWORDS.includes(prepareValue(node))
-}
-
 function extractColorsFromDeclaration(declaration) {
   const colors = []
 
-  valueParser(declaration.value, {loose: true})
-    .parse()
-    .walk(node => {
-      if (nodeIsHexColor(node) || nodeIsColorFn(node) || nodeIsKeyword(node)) {
-        return colors.push(node)
-      }
-    })
+  parse(declaration.value, {loose: true}).walk(node => {
+    if (node.isColor) {
+      return colors.push(node)
+    }
+  })
 
   if (colors.length > 0) {
     declaration.colors = colors.map(color => color.toString().trim())

src/analyzer/values/colors.js

@@ -169,7 +169,7 @@ test('It finds RGB(A) colors', t => {
     [
       'rgb(100, 200, 10)',
       'rgba(100, 200, 10, 0.5)',
-      'rgba(100, 200, 11, .5)',
+      'RGBA(100, 200, 11, .5)',
       'rgba(2,2,2,.2)'
     ].map(value => ({
       property: 'color',
@@ -181,7 +181,7 @@ test('It finds RGB(A) colors', t => {
     unique: [
       {count: 1, value: 'rgb(100, 200, 10)'},
       {count: 1, value: 'rgba(100, 200, 10, 0.5)'},
-      {count: 1, value: 'rgba(100, 200, 11, .5)'},
+      {count: 1, value: 'RGBA(100, 200, 11, .5)'},
       {count: 1, value: 'rgba(2,2,2,.2)'}
     ],
     totalUnique: 4,
@@ -197,7 +197,7 @@ test('It finds RGB(A) colors', t => {
 
 test('It finds HSL(A) colors', t => {
   const actual = analyze(
-    ['hsl(100, 20%, 30%)', 'hsla(100, 20%, 30%, 0.5)'].map(value => ({
+    ['hsl(100, 20%, 30%)', 'Hsla(100, 20%, 30%, 0.5)'].map(value => ({
       property: 'color',
       value
     }))
@@ -206,7 +206,7 @@ test('It finds HSL(A) colors', t => {
     total: 2,
     unique: [
       {count: 1, value: 'hsl(100, 20%, 30%)'},
-      {count: 1, value: 'hsla(100, 20%, 30%, 0.5)'}
+      {count: 1, value: 'Hsla(100, 20%, 30%, 0.5)'}
     ],
     totalUnique: 2,
     duplicates: {