From 18f46f9b65207c80bdda162567a275b3e67df145 Mon Sep 17 00:00:00 2001 From: Dan Gamble Date: Tue, 25 Oct 2016 09:49:54 +0100 Subject: [PATCH 1/5] Add the ability to replace declaration values --- README.md | 37 +++++++++++++++++++++++++++++++++++++ index.js | 13 ++++++++++++- 2 files changed, 49 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index c41a50f..011a058 100644 --- a/README.md +++ b/README.md @@ -111,5 +111,42 @@ Default: `&` Ancestor selector base symbol +### replaceValues + +Type `boolean` +Default: `false` + +If this is true then this plugin will look through your declaration values for the placeholder symbol and replace them with the desired selector. + +i.e. + +```css +.foo { + background-color: red; + + &:hover { + background-color: blue; + + &::before { + content: '^&'; + } + } +} +``` + +``` +.foo { + background-color: red; +} + +.foo:hover { + background-color: blue; +} + +.foo:hover::before { + content: '.foo' +} +``` + ## Todo's - Add warning when nestingLevel >= parentsStack.length diff --git a/index.js b/index.js index 0383923..99b09bc 100644 --- a/index.js +++ b/index.js @@ -4,7 +4,8 @@ var postcss = require('postcss'), module.exports = postcss.plugin('postcss-nested-ancestors', function (opts) { opts = assign({ - placeholder: '^&' + placeholder: '^&', + replaceValues: false }, opts); // Advanced options @@ -85,6 +86,16 @@ module.exports = postcss.plugin('postcss-nested-ancestors', function (opts) { // Replace parents placeholders in rule selector rule.selectors = rule.selectors.map(replacePlaceholders); + if (opts.replaceValues) { + rule.nodes.forEach(function (node) { + if (node.type === 'decl') { + if (node.value.indexOf(opts.placeholder) >= 0) { + node.value = replacePlaceholders(node.value); + } + } + }) + } + // Process child rules process(rule); } From aaaa47c88f0aa510b4cde9b832576d28a82facb3 Mon Sep 17 00:00:00 2001 From: Dan Gamble Date: Tue, 25 Oct 2016 10:12:47 +0100 Subject: [PATCH 2/5] Add tests --- index.js | 12 +++++++----- test.js | 8 ++++++++ 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/index.js b/index.js index 99b09bc..d8f2ab5 100644 --- a/index.js +++ b/index.js @@ -87,13 +87,15 @@ module.exports = postcss.plugin('postcss-nested-ancestors', function (opts) { rule.selectors = rule.selectors.map(replacePlaceholders); if (opts.replaceValues) { - rule.nodes.forEach(function (node) { - if (node.type === 'decl') { - if (node.value.indexOf(opts.placeholder) >= 0) { - node.value = replacePlaceholders(node.value); + rule.nodes.forEach(function (ruleNode) { + if (ruleNode.type === 'decl') { + if (ruleNode.value.indexOf(opts.placeholder) >= 0) { + ruleNode.value = replacePlaceholders( + ruleNode.value + ); } } - }) + }); } // Process child rules diff --git a/test.js b/test.js index 5a0a739..b425e04 100644 --- a/test.js +++ b/test.js @@ -43,6 +43,14 @@ test('Prepend 2 ancestors in double selector', t => { ); }); +test('Replace declaration values if replaceValues is true', t => { + return run( t, + '.a{ background: red; &:hover {&::before { content: "^&"; }}}', + '.a{ background: red; &:hover {&::before { content: ".a"; }}}', + { replaceValues: true } + ); +}); + test('Replace ancestors at different nesting levels', t => { return run( t, '.a{ &:hover{ ^&-b{} } .c{ .d{ ^&-e{} } } .z{} }', From f672864256f2afd040a63cf31af5e18150791cf4 Mon Sep 17 00:00:00 2001 From: Dan Gamble Date: Tue, 25 Oct 2016 10:23:10 +0100 Subject: [PATCH 3/5] Add pseudoClasses option --- index.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index d8f2ab5..c6d33f8 100644 --- a/index.js +++ b/index.js @@ -5,7 +5,8 @@ var postcss = require('postcss'), module.exports = postcss.plugin('postcss-nested-ancestors', function (opts) { opts = assign({ placeholder: '^&', - replaceValues: false + replaceValues: false, + pseudoClasses: false }, opts); // Advanced options @@ -35,6 +36,8 @@ module.exports = postcss.plugin('postcss-nested-ancestors', function (opts) { function getParentSelectorAtLevel(nestingLevel) { nestingLevel = nestingLevel || 1; + if (opts.pseudoClasses) nestingLevel -= 1 + // @TODO add warning when nestingLevel >= parentsStack.length return parentsStack.filter( function (rule, index) { From 7c820e7cb690caf0783257ece7fe05bed8ea1881 Mon Sep 17 00:00:00 2001 From: Dan Gamble Date: Tue, 25 Oct 2016 10:29:07 +0100 Subject: [PATCH 4/5] Add tests --- index.js | 2 +- test.js | 10 ++++++++++ 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index c6d33f8..e9b58ff 100644 --- a/index.js +++ b/index.js @@ -36,7 +36,7 @@ module.exports = postcss.plugin('postcss-nested-ancestors', function (opts) { function getParentSelectorAtLevel(nestingLevel) { nestingLevel = nestingLevel || 1; - if (opts.pseudoClasses) nestingLevel -= 1 + if (opts.pseudoClasses) nestingLevel -= 1; // @TODO add warning when nestingLevel >= parentsStack.length diff --git a/test.js b/test.js index b425e04..c356465 100644 --- a/test.js +++ b/test.js @@ -51,6 +51,16 @@ test('Replace declaration values if replaceValues is true', t => { ); }); +test('Take into account pseudo classes if pseudoClasses is true', t => { + return run( t, + '.a{ background: red; &:hover {&::before ' + + '{ content: "^&"; }}}', + '.a{ background: red; &:hover {&::before ' + + '{ content: ".a:hover"; }}}', + { replaceValues: true, pseudoClasses: true } + ); +}); + test('Replace ancestors at different nesting levels', t => { return run( t, '.a{ &:hover{ ^&-b{} } .c{ .d{ ^&-e{} } } .z{} }', From 2f9bb57c294fe8fc6b02b18b267958d086394abf Mon Sep 17 00:00:00 2001 From: Dan Gamble Date: Tue, 25 Oct 2016 10:30:30 +0100 Subject: [PATCH 5/5] Update README --- README.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/README.md b/README.md index 011a058..39eae5c 100644 --- a/README.md +++ b/README.md @@ -148,5 +148,12 @@ i.e. } ``` +### pseudoClasses + +Type `boolean` +Default: `false` + +If this is true then pseudo classes (`&:hover`, `&:focus`) are included in the parent chain + ## Todo's - Add warning when nestingLevel >= parentsStack.length