From b881aaa8b1913dac9883bfcf8de54c19132ea769 Mon Sep 17 00:00:00 2001 From: Sergey Bondar Date: Fri, 7 Jan 2022 01:33:31 +0300 Subject: [PATCH 1/3] fix: #130 variables in nested comma-separated selectors --- index.js | 56 ++++++------ .../cascade-and-multiple-on-nested-rules.css | 37 ++++++++ ...-and-multiple-on-nested-rules.expected.css | 87 +++++++++++++++++++ test/test.js | 2 + 4 files changed, 153 insertions(+), 29 deletions(-) create mode 100644 test/fixtures/cascade-and-multiple-on-nested-rules.css create mode 100644 test/fixtures/cascade-and-multiple-on-nested-rules.expected.css diff --git a/index.js b/index.js index 95dc3eb..4174270 100644 --- a/index.js +++ b/index.js @@ -234,40 +234,38 @@ module.exports = (options = {}) => { }); if (doesRuleUseVariables) { - rulesThatHaveDeclarationsWithVariablesList.push(rule); + if (rule.type === "rule" && rule.selectors.length > 1) { + // Split out the rule into each comma separated selector piece + // We only need to split if it's actually a Rule with multiple selectors (comma separated) + // duplicate rules would be probably merged with cssnano (cannot be sure about nested) + rule.selectors.reverse().forEach(function(selector) { + var ruleClone = rule.cloneAfter(); + ruleClone.selector = selector; + + return ruleClone; + }); + + // Rules will be added to list in the next traverse + rule.remove(); + } else { + rulesThatHaveDeclarationsWithVariablesList.push(rule); + } } }); rulesThatHaveDeclarationsWithVariablesList.forEach(function(rule) { - var rulesToWorkOn = [].concat(rule); - // Split out the rule into each comma separated selector piece - // We only need to split if it's actually a Rule with multiple selectors (comma separated) - if (rule.type === "rule" && rule.selectors.length > 1) { - // Reverse the selectors so that we can cloneAfter in the same comma separated order - rulesToWorkOn = rule.selectors.reverse().map(function(selector) { - var ruleClone = rule.cloneAfter(); - ruleClone.selector = selector; - - return ruleClone; - }); - - rule.remove(); - } - // Resolve the declarations - rulesToWorkOn.forEach(function(ruleToWorkOn) { - ruleToWorkOn.nodes.slice(0).forEach(function(node) { - if (node.type === "decl") { - var decl = node; - resolveDecl( - decl, - map, - opts.preserve, - opts.preserveAtRulesOrder, - logResolveValueResult - ); - } - }); + rule.nodes.slice(0).forEach(function(node) { + if (node.type === "decl") { + var decl = node; + resolveDecl( + decl, + map, + opts.preserve, + opts.preserveAtRulesOrder, + logResolveValueResult + ); + } }); }); diff --git a/test/fixtures/cascade-and-multiple-on-nested-rules.css b/test/fixtures/cascade-and-multiple-on-nested-rules.css new file mode 100644 index 0000000..cd5a678 --- /dev/null +++ b/test/fixtures/cascade-and-multiple-on-nested-rules.css @@ -0,0 +1,37 @@ +:root { + --some-width: 150px; +} +:root { + --White1: #FFF; +} + +.a, .b { + width: var(--some-width); + + .simple { + color: var(--White1); + } +} + +.a { + width: var(--some-width); + + a, label, &:after { + color: var(--White1); + } +} + +/* postcss-nested double parent selector case */ +.a, .b { + /* here variable */ + width: var(--some-width); + + /* and here another */ + a, label { + background: var(--White1); + + ol, ul { + width: var(--some-width); + } + } +} diff --git a/test/fixtures/cascade-and-multiple-on-nested-rules.expected.css b/test/fixtures/cascade-and-multiple-on-nested-rules.expected.css new file mode 100644 index 0000000..30a5568 --- /dev/null +++ b/test/fixtures/cascade-and-multiple-on-nested-rules.expected.css @@ -0,0 +1,87 @@ +.a { + width: 150px; + + .simple { + color: #FFF + } +} + +.b { + width: 150px; + + .simple { + color: #FFF + } +} + +.a { + width: 150px; + + a { + color: #FFF + } + + label { + color: #FFF + } + + &:after { + color: #FFF + } +} + +.a { + width: 150px; + + a { + background: #FFF; + + ol { + width: 150px; + } + + ul { + width: 150px; + } + } + + label { + background: #FFF; + + ol { + width: 150px; + } + + ul { + width: 150px; + } + } +} + +.b { + width: 150px; + + a { + background: #FFF; + + ol { + width: 150px; + } + + ul { + width: 150px; + } + } + + label { + background: #FFF; + + ol { + width: 150px; + } + + ul { + width: 150px; + } + } +} diff --git a/test/test.js b/test/test.js index 45a2f33..e8f0af8 100644 --- a/test/test.js +++ b/test/test.js @@ -186,6 +186,8 @@ describe("postcss-css-variables", function() { test("should cascade to nested rules", "cascade-on-nested-rules"); + test("should cascade to nested multiple rules", "cascade-and-multiple-on-nested-rules"); + test( "should cascade with calc-expression to nested rules", "cascade-with-calc-expression-on-nested-rules" From fd599ce754e7928ac00b453dee561b45da610371 Mon Sep 17 00:00:00 2001 From: Eric Eastwood Date: Wed, 12 Apr 2023 03:07:42 -0500 Subject: [PATCH 2/3] Prepare changelog with #131 --- CHANGELOG.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index dece1fe..4cd88f6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,8 @@ +# v0.19.0 - 2023-04-12 + +- Fix nesting edge case with comma separated selectors + - Thank you to [@marapper](https://github.com/marapper) for the [contribution](https://github.com/MadLittleMods/postcss-css-variables/pull/131) + # v0.18.0 - 2021-05-11 - [breaking] Add basic postcss 8 support (older versions of PostCSS no longer compatible) From 0b8e46d84ce975b3f28598cf4f35dc654b88c7f6 Mon Sep 17 00:00:00 2001 From: Eric Eastwood Date: Wed, 12 Apr 2023 03:08:33 -0500 Subject: [PATCH 3/3] 0.19.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 568d0e9..35c8403 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "postcss-css-variables", - "version": "0.18.0", + "version": "0.19.0", "description": "PostCSS plugin to transform CSS Custom Properties(CSS variables) syntax into a static representation", "keywords": [ "postcss",