Custom scope selector

Author: lutien

CHANGELOG.md

@@ -1,3 +1,10 @@
-# 0.1.0
+## v0.2.0
+#### Added
 
-* Initial release.
+* Add support several colors in one property
+* Fix regexp for different color types
+* Add support color keywords
+* Add opportunity to set custom selector, which will contain variables
+
+## v0.1.0
+Initial release

README.md

@@ -65,5 +65,13 @@ Default: `false`
 
 If you set true, only colors (hex, rgb, hsl, color keywords) will be extracted from values.
 
+### Scope
+
+Type: `string`<br>
+Required: `false`<br>
+Default: `:root`
+
+You can set custom selector, which will contain variables.
+
 
 See [PostCSS] docs for examples for your environment.

index.js

@@ -1,12 +1,13 @@
 var postcss = require('postcss'),
-    colorName = Object.keys(require('color-name'));
+    colorNameList = Object.keys(require('color-name'));
 
 module.exports = postcss.plugin('postcss-extract-value', function (opts) {
     opts = opts || {};
 
     // Cache RegExp
-    var reColorKeywords = new RegExp(colorName.join('|'));
-    var reCheck =  new RegExp(/#\w+|rgba?|hsla?/.source + '|' + reColorKeywords.source, 'g');
+    var reColorKeywords = new RegExp(colorNameList.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]+\)/;
@@ -17,6 +18,7 @@ module.exports = postcss.plugin('postcss-extract-value', function (opts) {
     // Options
     var filterByProps = opts.filterByProps;
     var onlyColor = opts.onlyColor;
+    var scope = opts.scope || ':root';
 
     function checkColor(value) {
         return reCheck.test(value);
@@ -40,8 +42,8 @@ module.exports = postcss.plugin('postcss-extract-value', function (opts) {
         return '--' + prop + '-' + num;
     }
 
-    function addCSSVariable(root, prop, value, num) {
-        root.append(makeCSSVariable(prop, ++num) + ': ' + value);
+    function addCSSVariable(currentScope, prop, value, num) {
+        currentScope.append(makeCSSVariable(prop, ++num) + ': ' + value);
     }
 
     function extractValue(decl, storePropsLink, valueFiltered) {
@@ -63,7 +65,7 @@ module.exports = postcss.plugin('postcss-extract-value', function (opts) {
 
         css.walkRules(function (rule) {
 
-            if (rule.selector === ':root') {
+            if (rule.selector === scope) {
                 rootSel = rule;
             } else {
                 rule.walkDecls(function (decl) {
@@ -103,7 +105,7 @@ module.exports = postcss.plugin('postcss-extract-value', function (opts) {
         });
 
         if (!rootSel) {
-            rootSel = postcss.rule({ selector: ':root' });
+            rootSel = postcss.rule({ selector: scope });
             root.prepend(rootSel);
         }
         for (var prop in storeProps) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-extract-value",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "PostCSS plugin to extract values from css properties and put them into variables.",
   "keywords": [
     "postcss",

test.js

@@ -68,6 +68,17 @@ test('option "onlyColor"', 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 });
+});
+
 test('exist root element', t => {
     let input = `:root {
         --base-font-size: 16px;
@@ -99,13 +110,32 @@ test('several colors in one property', t => {
     return run(t, input, output, { onlyColor: true });
 });
 
-test('color keyword', t => {
+test('custom element for css variables', t => {
     let input = `.foo {
-        border: 1px solid black;
+        --color-1: black;
+    }
+    .bar {
+        border-color: red;
+    }`;
+    let output = `.foo {
+        --color-1: black;
+        --border-color-1: red;
+    }
+    .bar {
+        border-color: var(--border-color-1);
+    }`;
+    return run(t, input, output, { scope: '.foo' });
+});
+
+test('filter by color and props', t => {
+    let input = `.foo {
+        border: 1px solid #000;
+        background-color: red;
     }`;
     let output = `:root {
-        --border-1: black;\n}\n.foo {
+        --border-1: #000;\n}\n.foo {
         border: 1px solid var(--border-1);
+        background-color: red;
     }`;
-    return run(t, input, output, { onlyColor: true });
+    return run(t, input, output, { onlyColor: true, filterByProps: ['border'] });
 });