diff --git a/index.js b/index.js index 61230a2..7da8b10 100644 --- a/index.js +++ b/index.js @@ -25,13 +25,38 @@ 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; + } else if(node.parent) { + // this checks for multiple nesting -> e.g, @include breakpoint inside @support + return checkIsCssSupportsRule(node.parent); + } + return false; +}; + function cleanUpNode(node) { @@ -209,21 +234,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) { - 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); + } } }); @@ -231,17 +258,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) { 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 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); } }); });