diff --git a/packages/postcss-convert-values/src/__tests__/index.js b/packages/postcss-convert-values/src/__tests__/index.js index cca8456c9..6610a4fcf 100644 --- a/packages/postcss-convert-values/src/__tests__/index.js +++ b/packages/postcss-convert-values/src/__tests__/index.js @@ -67,8 +67,12 @@ let tests = [{ expected: 'h1{z-index:5}' }, { message: 'should operate in calc values', - fixture: 'h1{width:calc(192px + 2em)}', - expected: 'h1{width:calc(2in + 2em)}' + fixture: 'h1{width:calc(192px + 2em - (0px * 4))}', + expected: 'h1{width:calc(2in + 2em - (0px * 4))}' +}, { + message: 'should not convert zero values in calc', + fixture: 'h1{width:calc(0em)}', + expected: 'h1{width:calc(0em)}' }, { message: 'should not mangle values outside of its domain', fixture: 'h1{background:url(a.png)}', @@ -84,7 +88,7 @@ let tests = [{ }, { message: 'should optimise fractions inside calc', fixture: 'h1{width:calc(10.px + .0px)}', - expected: 'h1{width:calc(10px + 0)}' + expected: 'h1{width:calc(10px + 0px)}' }, { message: 'should handle leading zero in rem values', fixture: '.one{top:0.25rem}', diff --git a/packages/postcss-convert-values/src/index.js b/packages/postcss-convert-values/src/index.js index 45121b25b..559964c45 100644 --- a/packages/postcss-convert-values/src/index.js +++ b/packages/postcss-convert-values/src/index.js @@ -4,6 +4,19 @@ import postcss from 'postcss'; import convert from './lib/convert'; import valueParser, {unit} from 'postcss-value-parser'; +function parseWord (node, opts, stripZeroUnit) { + let pair = unit(node.value); + if (pair) { + let num = Number(pair.number); + let u = pair.unit.toLowerCase(); + if (num === 0) { + node.value = (stripZeroUnit || u === 'ms' || u === 's') ? 0 + u : 0; + } else { + node.value = convert(num, u, opts); + } + } +} + function transform (opts) { return decl => { if (~decl.prop.indexOf('flex')) { @@ -12,18 +25,19 @@ function transform (opts) { decl.value = valueParser(decl.value).walk(function (node) { if (node.type === 'word') { - let pair = unit(node.value); - if (pair) { - let num = Number(pair.number); - let u = pair.unit.toLowerCase(); - if (num === 0) { - node.value = (u === 'ms' || u === 's') ? 0 + u : 0; - } else { - node.value = convert(num, u, opts); - } - } + parseWord(node, opts); } - if (node.type === 'function' && node.value !== 'calc') { + if (node.type === 'function') { + if (node.value === 'calc') { + node.nodes.forEach(function walkNodes (node) { + if (node.type === 'word') { + parseWord(node, opts, true); + } + if (node.type === 'function') { + node.nodes.forEach(walkNodes); + } + }); + } return false; } }).toString();