From 6024c6379302f3b98c9d484a9c73fc0135242c95 Mon Sep 17 00:00:00 2001 From: Pedro Valentim Date: Wed, 25 Mar 2015 13:32:27 +0000 Subject: [PATCH] Add support for custom selectors --- examples/example.css | 20 +++++++++++++++++++- examples/index.js | 2 +- lib/lexer.js | 5 +++-- test/cases/custom-selectors.css | 11 +++++++++++ test/cases/custom-selectors.out.css | 15 +++++++++++++++ 5 files changed, 49 insertions(+), 4 deletions(-) create mode 100644 test/cases/custom-selectors.css create mode 100644 test/cases/custom-selectors.out.css diff --git a/examples/example.css b/examples/example.css index e5b1fa2..13c884b 100644 --- a/examples/example.css +++ b/examples/example.css @@ -32,4 +32,22 @@ button button border-radius: 0 - width: 100% \ No newline at end of file + 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 diff --git a/examples/index.js b/examples/index.js index 3d8dd63..c225626 100644 --- a/examples/index.js +++ b/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); \ No newline at end of file +console.log(css); diff --git a/lib/lexer.js b/lib/lexer.js index 2ac3795..9e2097e 100644 --- a/lib/lexer.js +++ b/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]; } } diff --git a/test/cases/custom-selectors.css b/test/cases/custom-selectors.css new file mode 100644 index 0000000..8275b54 --- /dev/null +++ b/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 diff --git a/test/cases/custom-selectors.out.css b/test/cases/custom-selectors.out.css new file mode 100644 index 0000000..c771e93 --- /dev/null +++ b/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; +}