Add support for custom selectors

Author: Pedro Valentim

examples/example.css

@@ -32,4 +32,22 @@ button
 
   button
     border-radius: 0
-    width: 100%
+    width: 100%
+
+@custom-selector --heading h1, h2
+@custom-selector :--link :hover, :active
+
+@custom-selector --heading h1, h2
+@custom-selector :--any-link :link, :visited
+
+a:hover
+  color: red
+
+a:--any-link
+  color: blue
+
+--heading
+  color: #fff
+
+article --heading
+  color: #000

examples/index.js

@@ -9,4 +9,4 @@ var fs = require('fs')
 
 var str = read('examples/example.css', 'utf8');
 var css = compile(str);
-console.log(css);
+console.log(css);

lib/lexer.js

@@ -34,7 +34,8 @@ var pseudos = [
   '-o',
   '-ms',
   '-moz',
-  '-webkit'
+  '-webkit',
+  '--'
 ]
 
 /**
@@ -196,7 +197,7 @@ module.exports = function(str) {
     var m = str.match(/^([^\n,]+, *\n|[^\n]+)+/);
     if (!m) return;
     str = str.slice(m[0].length);
-    m = m[0].split(/\s*,\s*/);
+    m = (m[0].indexOf('@custom-selector') > -1) ? [m[0]] : m[0].split(/\s*,\s*/);
     return ['rule', m];
   }
 }

test/cases/custom-selectors.css

@@ -0,0 +1,11 @@
+@custom-selector --heading h1, h2
+@custom-selector :--any-link :link, :visited
+
+a:--any-link
+  color: blue
+
+--heading
+  color: #fff
+
+article --heading
+  color: #000

test/cases/custom-selectors.out.css

@@ -0,0 +1,15 @@
+@custom-selector --heading h1, h2;
+
+@custom-selector :--any-link :link, :visited;
+
+a:--any-link {
+  color: blue;
+}
+
+--heading {
+  color: #fff;
+}
+
+article --heading {
+  color: #000;
+}