From ed5f8a2749b824df1b05d870371590bd82b1ec7f Mon Sep 17 00:00:00 2001 From: claudia-romano Date: Fri, 17 Aug 2018 16:25:29 +0100 Subject: [PATCH 1/5] do not expand comma separated rules --- index.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/index.js b/index.js index 61230a2..3e34b75 100644 --- a/index.js +++ b/index.js @@ -231,17 +231,17 @@ module.exports = postcss.plugin('postcss-css-variables', function(options) { var rulesToWorkOn = [].concat(rule); // Split out the rule into each comma separated selector piece // We only need to split if is actually comma separted(selectors > 1) - if(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; + // if(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; - }); + // return ruleClone; + // }); - rule.remove(); - } + // rule.remove(); + // } // Resolve the declarations rulesToWorkOn.forEach(function(ruleToWorkOn) { From fedabe9bdba77a7daeb0e0671b8ec5d7436db2cc Mon Sep 17 00:00:00 2001 From: claudia-romano Date: Wed, 28 Nov 2018 15:16:08 +0000 Subject: [PATCH 2/5] use :root a only ancestor selector --- lib/is-piece-always-ancestor-selector.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/is-piece-always-ancestor-selector.js b/lib/is-piece-always-ancestor-selector.js index 00df95a..8324e62 100644 --- a/lib/is-piece-always-ancestor-selector.js +++ b/lib/is-piece-always-ancestor-selector.js @@ -1,7 +1,7 @@ var alwaysAncestorSelector = { - '*': true, + '*': false, ':root': true, - 'html': true + 'html': false }; // This means it will be always be an ancestor of any other selector From 7827b5d0d4a9c0e8c75c9a57decd90b49373dcde Mon Sep 17 00:00:00 2001 From: claudia-romano Date: Wed, 28 Nov 2018 15:18:42 +0000 Subject: [PATCH 3/5] skip decls/rules if they are inside a @supports(--) --- index.js | 27 ++++++++++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index 3e34b75..a10882c 100644 --- a/index.js +++ b/index.js @@ -25,13 +25,35 @@ var RE_VAR_PROP = (/(--(.+))/); function eachCssVariableDeclaration(css, cb) { // Loop through all of the declarations and grab the variables and put them in the map css.walkDecls(function(decl) { + var isUnderSupportsCss = declIsInCssSupportsRule(decl); // If declaration is a variable - if(RE_VAR_PROP.test(decl.prop)) { + if(RE_VAR_PROP.test(decl.prop) && !isUnderSupportsCss) { cb(decl); } }); } +function declIsInCssSupportsRule(decl) { + if(decl.parent && decl.parent.parent) { + return checkIsCssSupportsRule(decl.parent.parent); + } + return false; +}; + +function ruleIsInCssSupportsRule(rule) { + if(rule.parent) { + return checkIsCssSupportsRule(rule.parent); + } + return false; +}; + +function checkIsCssSupportsRule(node) { + if(node.type == 'atrule' && node.name === 'supports' && [].concat(node.params)[0].indexOf('--') > -1) { + return true; + } + return false; +}; + function cleanUpNode(node) { @@ -209,6 +231,9 @@ module.exports = postcss.plugin('postcss-css-variables', function(options) { // Collect all the rules that have declarations that use variables var rulesThatHaveDeclarationsWithVariablesList = []; css.walkRules(function(rule) { + if(ruleIsInCssSupportsRule(rule)) { + return false; + } var doesRuleUseVariables = rule.nodes.some(function(node) { if(node.type === 'decl') { var decl = node; From 0eb1802dbf30c9c20234f89ce3c198d4fc60f1d0 Mon Sep 17 00:00:00 2001 From: claudia-romano Date: Thu, 29 Nov 2018 09:03:22 +0000 Subject: [PATCH 4/5] fix issue with @supports --css rule + skip duplicates in mq --- index.js | 29 ++++++++++++++--------------- lib/resolve-decl.js | 7 ++++++- 2 files changed, 20 insertions(+), 16 deletions(-) diff --git a/index.js b/index.js index a10882c..0bcbc7e 100644 --- a/index.js +++ b/index.js @@ -231,24 +231,23 @@ module.exports = postcss.plugin('postcss-css-variables', function(options) { // Collect all the rules that have declarations that use variables var rulesThatHaveDeclarationsWithVariablesList = []; css.walkRules(function(rule) { - if(ruleIsInCssSupportsRule(rule)) { - return false; - } - var doesRuleUseVariables = rule.nodes.some(function(node) { - if(node.type === 'decl') { - var decl = node; - // If it uses variables - // and is not a variable declarations that we may be preserving from earlier - if(resolveValue.RE_VAR_FUNC.test(decl.value) && !RE_VAR_PROP.test(decl.prop)) { - return true; + if(!ruleIsInCssSupportsRule(rule)) { + var doesRuleUseVariables = rule.nodes.some(function(node) { + if(node.type === 'decl') { + var decl = node; + // If it uses variables + // and is not a variable declarations that we may be preserving from earlier + if(resolveValue.RE_VAR_FUNC.test(decl.value) && !RE_VAR_PROP.test(decl.prop)) { + return true; + } } - } - return false; - }); + return false; + }); - if(doesRuleUseVariables) { - rulesThatHaveDeclarationsWithVariablesList.push(rule); + if(doesRuleUseVariables) { + rulesThatHaveDeclarationsWithVariablesList.push(rule); + } } }); diff --git a/lib/resolve-decl.js b/lib/resolve-decl.js index cae8e03..bed7809 100644 --- a/lib/resolve-decl.js +++ b/lib/resolve-decl.js @@ -14,6 +14,7 @@ var cloneSpliceParentOntoNodeWhen = require('./clone-splice-parent-onto-node-whe function eachMapItemDependencyOfDecl(variablesUsedList, map, decl, cb) { // Now find any at-rule declarations that pertains to each rule // Loop through the variables used + var previousDecl = ''; variablesUsedList.forEach(function(variableUsedName) { // Find anything in the map that corresponds to that variable @@ -60,7 +61,11 @@ function eachMapItemDependencyOfDecl(variablesUsedList, map, decl, cb) { // If it is under the proper scope, // we need to check because we are iterating over all map entries if(mimicDecl && isNodeUnderScope(mimicDecl, mapItem.parent, true)) { - cb(mimicDecl, mapItem); + //double check the declaration is not exactly the same as the previous one -> prevent diplicated blocks in mq + if( previousDecl != JSON.stringify(mimicDecl) ) { + cb(mimicDecl, mapItem); + } + previousDecl = JSON.stringify(mimicDecl); } }); }); From 6712e6d5db7c004e544b61ce3fd4058a86aed249 Mon Sep 17 00:00:00 2001 From: claudia-romano Date: Wed, 20 Mar 2019 16:12:17 +0000 Subject: [PATCH 5/5] skip decls/rules if they are inside a @supports(--) Fix bug with '@include breakpoint' inside '@supports(--)' --- index.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/index.js b/index.js index 0bcbc7e..7da8b10 100644 --- a/index.js +++ b/index.js @@ -50,6 +50,9 @@ function ruleIsInCssSupportsRule(rule) { function checkIsCssSupportsRule(node) { if(node.type == 'atrule' && node.name === 'supports' && [].concat(node.params)[0].indexOf('--') > -1) { return true; + } else if(node.parent) { + // this checks for multiple nesting -> e.g, @include breakpoint inside @support + return checkIsCssSupportsRule(node.parent); } return false; };