Support color keywords

Author: lutien

README.md

@@ -63,7 +63,7 @@ Type: `boolean`<br>
 Required: `false`<br>
 Default: `false`
 
-If you set true, only colors (hex, rgb, hsl, color keyword isn`t supported now) will be extracted from values.
+If you set true, only colors (hex, rgb, hsl, color keywords) will be extracted from values.
 
 
 See [PostCSS] docs for examples for your environment.

index.js

@@ -1,20 +1,22 @@
-var postcss = require('postcss');
+var postcss = require('postcss'),
+    colorName = Object.keys(require('color-name'));
 
 module.exports = postcss.plugin('postcss-extract-value', function (opts) {
     opts = opts || {};
 
     // Cache RegExp
-    var reCheck = /#\w+|rgba?|hsla?/;
+    var reColorKeywords = new RegExp(colorName.join('|'));
+    var reCheck =  new RegExp(/#\w+|rgba?|hsla?/.source + '|' + reColorKeywords.source, 'g');
     var reCSSVariable = /var\(-{2}\w{1}[\w+-]*/;
     var reHex = /#(\w{6}|\w{3})/;
     var reRgb = /rgba?\([\d,.\s]+\)/;
     var reHls = /hsla?\(\s?[0-9]{1,3},\s?(([0-9]{1,3})+%,\s?){2}[0-9.]+\s?\)/;
     var reExtract = new RegExp(reHex.source + '|' + reRgb.source + '|' +
-        reHls.source, 'g');
+        reHls.source + '|' + reColorKeywords.source, 'g');
 
     // Options
-    var filterByProps = opts.filterByProps,
-        onlyColor = opts.onlyColor;
+    var filterByProps = opts.filterByProps;
+    var onlyColor = opts.onlyColor;
 
     function checkColor(value) {
         return reCheck.test(value);
@@ -23,6 +25,7 @@ module.exports = postcss.plugin('postcss-extract-value', function (opts) {
     function extractColor(value) {
         var resultArray = [];
         var result = [];
+
         while ((result = reExtract.exec(value)) !== null) {
             resultArray.push(result[0]);
         }
@@ -44,18 +47,19 @@ module.exports = postcss.plugin('postcss-extract-value', function (opts) {
     function extractValue(decl, storePropsLink, valueFiltered) {
         var positionValue = storePropsLink.indexOf(valueFiltered) + 1;
         var variable = 'var(' + makeCSSVariable(decl.prop, positionValue) + ')';
-        decl.value = decl.value.replace(valueFiltered, variable);
+
+        return decl.value.replace(valueFiltered, variable);
     }
 
     return function (css) {
-        var root = css.root(),
-            storeProps = {},
-            storePropsLink = {},
-            checkColorFilter = true,
-            checkPropFilter = true,
-            valueFilteredList = [],
-            valueFiltered = '',
-            rootSel = null;
+        var root = css.root();
+        var storeProps = {};
+        var storePropsLink = {};
+        var checkColorFilter = true;
+        var checkPropFilter = true;
+        var valueFilteredList = [];
+        var valueFiltered = '';
+        var rootSel = null;
 
         css.walkRules(function (rule) {
 
@@ -90,7 +94,7 @@ module.exports = postcss.plugin('postcss-extract-value', function (opts) {
                                     storePropsLink.push(valueFiltered);
                                 }
 
-                                extractValue(decl, storePropsLink, valueFiltered);
+                                decl.value = extractValue(decl, storePropsLink, valueFiltered);
                             }
                         }
                     }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-extract-value",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "PostCSS plugin to extract values from css properties and put them into variables.",
   "keywords": [
     "postcss",
@@ -16,7 +16,8 @@
   },
   "homepage": "https://github.com/lutien/postcss-extract-value",
   "dependencies": {
-    "postcss": "^5.0.21"
+    "postcss": "^5.0.21",
+    "color-name": "^1.1.1"
   },
   "devDependencies": {
     "ava": "^0.14.0",

test.js

@@ -98,3 +98,14 @@ test('several colors in one property', t => {
     }`;
     return run(t, input, output, { onlyColor: true });
 });
+
+test('color keyword', t => {
+    let input = `.foo {
+        border: 1px solid black;
+    }`;
+    let output = `:root {
+        --border-1: black;\n}\n.foo {
+        border: 1px solid var(--border-1);
+    }`;
+    return run(t, input, output, { onlyColor: true });
+});